Pleased logoDocs

Install the Pleased Chat Widget on your website

Last edited 17/08/2026 by Manu Ustenko

The Pleased Chat Widget can be installed on websites and web applications by adding a small JavaScript snippet.

This article provides installation instructions for common platforms and frameworks.

Before you begin

Before installing the Chat Widget, make sure you have access to your website's code or tag management system.

You will also need permission to create and manage Chat Widgets in Pleased.

Create a Chat Widget

Before you can install the Chat Widget, create one in your Pleased workspace.

  1. Go to Settings > Chat Widget Setup in Pleased.
  2. Select Add Widget.
  3. Enter a Widget Name to identify the widget within Pleased.
  4. Select the Brand that the Chat Widget should be associated with.
  5. Optionally, add the website addresses where the Chat Widget should be allowed to appear.
  6. Select the option to create the widget.

After the widget has been created, Pleased generates the Chat Widget code for you.

Your generated code will look similar to:

<script
  async
  src="https://d33p0nal4ufnrm.cloudfront.net/widget/pl-loader.min.js"
  data-pls-widget-id="YOUR_WIDGET_ID"
  data-pls-client-id="YOUR_CLIENT_ID"
></script>

Copy the generated code. You will use it to install the Chat Widget on your website.

Important: Use the code generated for your Chat Widget in Pleased. Do not copy the example values from this article or manually change the widget or client identifiers.

For more information about Brands, website restrictions, visibility settings and managing existing widgets, see How to set up your Chat Widget.

Install the Chat Widget

Add the generated Chat Widget code to the pages where you want Pleased to be available.

For a standard HTML website, add the code before the closing </body> tag:

<body>
  <!-- Your website content -->

  <script
    async
    src="https://d33p0nal4ufnrm.cloudfront.net/widget/pl-loader.min.js"
    data-pls-widget-id="YOUR_WIDGET_ID"
    data-pls-client-id="YOUR_CLIENT_ID"
  ></script>
</body>

The async attribute allows the Chat Widget script to load without blocking the rest of the page.

After adding the code, publish or deploy your website changes.

WordPress

You can install the Chat Widget globally on WordPress using a custom code plugin or your site's theme.

Using a custom code plugin

If your WordPress site uses a plugin for adding custom scripts:

  1. Open the plugin's custom code or script settings.
  2. Create a new HTML or JavaScript entry.
  3. Paste the Chat Widget code generated by Pleased.
  4. Configure the code to load in the footer or before the closing </body> tag.
  5. Configure it to load on all pages where you want the Chat Widget to appear.
  6. Save and activate the code.

Using a custom code plugin is generally preferable to editing theme files directly, as theme updates may overwrite manual changes.

Using your WordPress theme

If you manage the theme code directly, add the generated Chat Widget code before the closing </body> tag in the appropriate theme template.

Publish your changes and open your website to load the widget.

Shopify

To install the Chat Widget across a Shopify storefront:

  1. Open your Shopify admin.
  2. Go to Online Store > Themes.
  3. Open the code editor for your active theme.
  4. Open theme.liquid.
  5. Locate the closing </body> tag.
  6. Paste the Chat Widget code immediately before it.
  7. Save your changes.

Open your storefront after saving the changes to load the widget.

If you replace or change your Shopify theme, make sure the Chat Widget code is also installed in the new theme.

Webflow

To install the Chat Widget across a Webflow site:

  1. Open your site in Webflow.
  2. Open Site settings > Custom code.
  3. Find the section for code that is inserted before the closing </body> tag.
  4. Paste the Chat Widget code generated by Pleased.
  5. Save your changes.
  6. Publish the website.

The Chat Widget will be loaded on pages using the site's global custom code.

Wix

To install the Chat Widget using Wix:

  1. Open your site's dashboard.
  2. Go to Settings > Custom Code.
  3. Select Add Custom Code.
  4. Paste the Chat Widget code generated by Pleased.
  5. Configure the code to load in Body - end.
  6. Select the pages where the Chat Widget should appear.
  7. Save and publish your changes.

Squarespace

To install the Chat Widget using Squarespace:

  1. Open your website settings.
  2. Open Code Injection.
  3. Find the Footer section.
  4. Paste the Chat Widget code generated by Pleased.
  5. Save your changes.

The availability of code injection may depend on your Squarespace plan.

Google Tag Manager

You can install the Chat Widget using Google Tag Manager instead of modifying your website's code directly.

  1. Open your Google Tag Manager container.
  2. Create a new tag.
  3. Select Custom HTML as the tag type.
  4. Paste the Chat Widget code generated by Pleased.
  5. Add an All Pages trigger, or configure a trigger for the pages where the Chat Widget should appear.
  6. Save the tag.
  7. Preview the container and confirm that the tag runs.
  8. Publish the container.
Do not install the same Chat Widget directly on your website and through Google Tag Manager.

React

For React applications, load the Chat Widget once at the application level rather than from an individual page or component.

If your application has a shared HTML entry document, add the generated Chat Widget code before the closing </body> tag.

For example:

<body>
  <div id="root"></div>

  <!-- Pleased Chat Widget code -->
</body>

Avoid adding the script from a component that can be repeatedly mounted or rendered, as this may cause the widget script to be loaded more than once.

Next.js

For Next.js applications, install the Chat Widget at the application or root layout level.

You can use the Next.js Script component:

import Script from "next/script";

<Script
  src="https://d33p0nal4ufnrm.cloudfront.net/widget/pl-loader.min.js"
  data-pls-widget-id="YOUR_WIDGET_ID"
  data-pls-client-id="YOUR_CLIENT_ID"
  strategy="afterInteractive"
/>

Use the widget and client identifiers from the code generated by Pleased.

For applications using the App Router, the script can typically be added to the root layout so that it is loaded once for the application.

Vue

For Vue applications, add the generated Chat Widget code to the application's HTML entry document.

For a standard Vue application, this is typically index.html:

<body>
  <div id="app"></div>

  <!-- Pleased Chat Widget code -->
</body>

Add the code before the closing </body> tag.

This allows the widget to load once when the application starts and remain available as users navigate between routes.

Angular

For Angular applications, add the generated Chat Widget code to src/index.html.

Add it before the closing </body> tag:

<body>
  <app-root></app-root>

  <!-- Pleased Chat Widget code -->
</body>

Build and deploy the application after making the change.

Other platforms

You can install the Pleased Chat Widget on other platforms that allow custom JavaScript.

Look for functionality named:

  • Custom code
  • Custom HTML
  • Code injection
  • Footer scripts
  • Third-party scripts
  • Tag management

Paste the Chat Widget code generated by Pleased and, where possible, configure it to load before the closing </body> tag.

Make sure the code is loaded on every page where you want the Chat Widget to appear.

Verify the installation

After installing the Chat Widget:

  1. Publish or deploy your changes.
  2. Open a page where the Chat Widget has been installed.
  3. Return to Chat Widget Setup in Pleased.
  4. Review the widget's installation status.

When Pleased detects the Chat Widget being loaded on a webpage, its status changes to Installed.

For more information about installation status, website restrictions and visibility settings, see How to set up your Chat Widget.

Troubleshooting

If the Chat Widget does not load:

  • Confirm that you installed the code generated for the correct Chat Widget.
  • Confirm that your website changes have been published or deployed.
  • Make sure the script is present on the published page.
  • Make sure the Chat Widget has not been installed more than once on the same page.
  • Check the browser developer console for JavaScript or Content Security Policy errors.
  • Check whether a browser extension, content blocker or network policy is blocking the widget.
  • If website restrictions are configured in Pleased, confirm that the current website is allowed.

For Chat Widget configuration or installation status issues, see How to set up your Chat Widget.