[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"initial-data":3,"kb:search:disabled":33,"kb:sectionPath:null:null:es":36,"kb:categories:1:es":37,"kb:brandArticles:1:0:es":38,"kb:articleDetails:70:es":45},[4,14],{"theme":5,"assets":11},{"color-primary":6,"color-page-bg":7,"color-page-bg-dark":8,"color-content-bg":7,"color-content-bg-hover":9,"color-text-default":10},"#e51728","#ffffff","#121212","#f6f9fc","#0a2540",{"logo":12,"favicon":13},"\u002Fknowledge-base\u002Fpleased-logo.svg","\u002Fknowledge-base\u002Fpleased-favicon.svg",[15],{"name":16,"code":17,"url":17,"displayOrder":18,"isActive":19,"inboundEmailDomains":20,"outboundEmailDomain":20,"publishSettings":21,"id":18},"Pleased","pleased",1,true,"@pleased.com",{"KB":22,"CHATBOT":29},{"publishedLanguages":23,"defaultLanguage":28},[24],{"name":25,"nameLocal":26,"locale":27},"English*","English","en",{"name":25,"nameLocal":26,"locale":27},{"publishedLanguages":30,"defaultLanguage":32},[31],{"name":25,"nameLocal":26,"locale":27},null,{"data":34,"total":35},[],0,[],[],{"content":39,"number":35,"size":40,"totalElements":35,"pageable":41,"last":19,"totalPages":35,"sort":44,"first":19,"numberOfElements":35,"empty":19},[],10,{"sort":42,"offset":35,"pageNumber":35,"pageSize":40,"paged":19,"unpaged":43},{"sorted":19,"empty":43,"unsorted":43},false,{"sorted":19,"empty":43,"unsorted":43},{"article":46,"sections":55,"category":60,"relatedArticles":63,"relatedTagsArticles":65},{"id":47,"brandId":18,"sectionId":32,"categoryId":48,"title":49,"body":50,"keywords":32,"position":47,"isCommentDisabled":32,"isDraft":43,"isPromoted":19,"upvotes":32,"downvotes":32,"isActive":19,"language":27,"englishVersion":19,"createdAt":51,"createdBy":52,"updatedAt":53,"updatedBy":52,"tags":32,"includeForAi":19,"authorName":54},70,3,"Install the Pleased Chat Widget on your website","\u003Cp>The Pleased Chat Widget can be installed on websites and web applications by adding a small JavaScript snippet.\u003C\u002Fp>\u003Cp>This article provides installation instructions for common platforms and frameworks.\u003C\u002Fp>\u003Ch2>Before you begin\u003C\u002Fh2>\u003Cp>Before installing the Chat Widget, make sure you have access to your website's code or tag management system.\u003C\u002Fp>\u003Cp>You will also need permission to create and manage Chat Widgets in Pleased.\u003C\u002Fp>\u003Ch2>Create a Chat Widget\u003C\u002Fh2>\u003Cp>Before you can install the Chat Widget, create one in your Pleased workspace.\u003C\u002Fp>\u003Col>\u003Cli>Go to \u003Cstrong>Settings > Chat Widget Setup\u003C\u002Fstrong> in Pleased.\u003C\u002Fli>\u003Cli>Select \u003Cstrong>Add Widget\u003C\u002Fstrong>.\u003C\u002Fli>\u003Cli>Enter a \u003Cstrong>Widget Name\u003C\u002Fstrong> to identify the widget within Pleased.\u003C\u002Fli>\u003Cli>Select the \u003Cstrong>Brand\u003C\u002Fstrong> that the Chat Widget should be associated with.\u003C\u002Fli>\u003Cli>Optionally, add the website addresses where the Chat Widget should be allowed to appear.\u003C\u002Fli>\u003Cli>Select the option to create the widget.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>After the widget has been created, Pleased generates the Chat Widget code for you.\u003C\u002Fp>\u003Cp>Your generated code will look similar to:\u003C\u002Fp>\u003Cpre class=\"ql-syntax\" spellcheck=\"false\"><script\n  async\n  src=\"https:\u002F\u002Fd33p0nal4ufnrm.cloudfront.net\u002Fwidget\u002Fpl-loader.min.js\"\n  data-pls-widget-id=\"YOUR_WIDGET_ID\"\n  data-pls-client-id=\"YOUR_CLIENT_ID\"\n><\u002Fscript>\n\u003C\u002Fpre>\u003Cp>Copy the generated code. You will use it to install the Chat Widget on your website.\u003C\u002Fp>\u003Cblockquote>\u003Cstrong>Important:\u003C\u002Fstrong> 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.\u003C\u002Fblockquote>\u003Cp>For more information about Brands, website restrictions, visibility settings and managing existing widgets, see \u003Cstrong>How to set up your Chat Widget\u003C\u002Fstrong>.\u003C\u002Fp>\u003Ch2>Install the Chat Widget\u003C\u002Fh2>\u003Cp>Add the generated Chat Widget code to the pages where you want Pleased to be available.\u003C\u002Fp>\u003Cp>For a standard HTML website, add the code before the closing \u003Ccode style=\"background-color: rgb(240, 240, 240);\"><\u002Fbody>\u003C\u002Fcode> tag:\u003C\u002Fp>\u003Cpre class=\"ql-syntax\" spellcheck=\"false\"><body>\n  <!-- Your website content -->\n\n  <script\n    async\n    src=\"https:\u002F\u002Fd33p0nal4ufnrm.cloudfront.net\u002Fwidget\u002Fpl-loader.min.js\"\n    data-pls-widget-id=\"YOUR_WIDGET_ID\"\n    data-pls-client-id=\"YOUR_CLIENT_ID\"\n  ><\u002Fscript>\n<\u002Fbody>\n\u003C\u002Fpre>\u003Cp>The \u003Ccode style=\"background-color: rgb(240, 240, 240);\">async\u003C\u002Fcode> attribute allows the Chat Widget script to load without blocking the rest of the page.\u003C\u002Fp>\u003Cp>After adding the code, publish or deploy your website changes.\u003C\u002Fp>\u003Ch2>WordPress\u003C\u002Fh2>\u003Cp>You can install the Chat Widget globally on WordPress using a custom code plugin or your site's theme.\u003C\u002Fp>\u003Ch3>Using a custom code plugin\u003C\u002Fh3>\u003Cp>If your WordPress site uses a plugin for adding custom scripts:\u003C\u002Fp>\u003Col>\u003Cli>Open the plugin's custom code or script settings.\u003C\u002Fli>\u003Cli>Create a new HTML or JavaScript entry.\u003C\u002Fli>\u003Cli>Paste the Chat Widget code generated by Pleased.\u003C\u002Fli>\u003Cli>Configure the code to load in the footer or before the closing \u003Ccode style=\"background-color: rgb(240, 240, 240);\"><\u002Fbody>\u003C\u002Fcode> tag.\u003C\u002Fli>\u003Cli>Configure it to load on all pages where you want the Chat Widget to appear.\u003C\u002Fli>\u003Cli>Save and activate the code.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Using a custom code plugin is generally preferable to editing theme files directly, as theme updates may overwrite manual changes.\u003C\u002Fp>\u003Ch3>Using your WordPress theme\u003C\u002Fh3>\u003Cp>If you manage the theme code directly, add the generated Chat Widget code before the closing \u003Ccode style=\"background-color: rgb(240, 240, 240);\"><\u002Fbody>\u003C\u002Fcode> tag in the appropriate theme template.\u003C\u002Fp>\u003Cp>Publish your changes and open your website to load the widget.\u003C\u002Fp>\u003Ch2>Shopify\u003C\u002Fh2>\u003Cp>To install the Chat Widget across a Shopify storefront:\u003C\u002Fp>\u003Col>\u003Cli>Open your Shopify admin.\u003C\u002Fli>\u003Cli>Go to \u003Cstrong>Online Store > Themes\u003C\u002Fstrong>.\u003C\u002Fli>\u003Cli>Open the code editor for your active theme.\u003C\u002Fli>\u003Cli>Open \u003Ccode style=\"background-color: rgb(240, 240, 240);\">theme.liquid\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Locate the closing \u003Ccode style=\"background-color: rgb(240, 240, 240);\"><\u002Fbody>\u003C\u002Fcode> tag.\u003C\u002Fli>\u003Cli>Paste the Chat Widget code immediately before it.\u003C\u002Fli>\u003Cli>Save your changes.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Open your storefront after saving the changes to load the widget.\u003C\u002Fp>\u003Cblockquote>If you replace or change your Shopify theme, make sure the Chat Widget code is also installed in the new theme.\u003C\u002Fblockquote>\u003Ch2>Webflow\u003C\u002Fh2>\u003Cp>To install the Chat Widget across a Webflow site:\u003C\u002Fp>\u003Col>\u003Cli>Open your site in Webflow.\u003C\u002Fli>\u003Cli>Open \u003Cstrong>Site settings > Custom code\u003C\u002Fstrong>.\u003C\u002Fli>\u003Cli>Find the section for code that is inserted before the closing \u003Ccode style=\"background-color: rgb(240, 240, 240);\"><\u002Fbody>\u003C\u002Fcode> tag.\u003C\u002Fli>\u003Cli>Paste the Chat Widget code generated by Pleased.\u003C\u002Fli>\u003Cli>Save your changes.\u003C\u002Fli>\u003Cli>Publish the website.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>The Chat Widget will be loaded on pages using the site's global custom code.\u003C\u002Fp>\u003Ch2>Wix\u003C\u002Fh2>\u003Cp>To install the Chat Widget using Wix:\u003C\u002Fp>\u003Col>\u003Cli>Open your site's dashboard.\u003C\u002Fli>\u003Cli>Go to \u003Cstrong>Settings > Custom Code\u003C\u002Fstrong>.\u003C\u002Fli>\u003Cli>Select \u003Cstrong>Add Custom Code\u003C\u002Fstrong>.\u003C\u002Fli>\u003Cli>Paste the Chat Widget code generated by Pleased.\u003C\u002Fli>\u003Cli>Configure the code to load in \u003Cstrong>Body - end\u003C\u002Fstrong>.\u003C\u002Fli>\u003Cli>Select the pages where the Chat Widget should appear.\u003C\u002Fli>\u003Cli>Save and publish your changes.\u003C\u002Fli>\u003C\u002Fol>\u003Ch2>Squarespace\u003C\u002Fh2>\u003Cp>To install the Chat Widget using Squarespace:\u003C\u002Fp>\u003Col>\u003Cli>Open your website settings.\u003C\u002Fli>\u003Cli>Open \u003Cstrong>Code Injection\u003C\u002Fstrong>.\u003C\u002Fli>\u003Cli>Find the \u003Cstrong>Footer\u003C\u002Fstrong> section.\u003C\u002Fli>\u003Cli>Paste the Chat Widget code generated by Pleased.\u003C\u002Fli>\u003Cli>Save your changes.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>The availability of code injection may depend on your Squarespace plan.\u003C\u002Fp>\u003Ch2>Google Tag Manager\u003C\u002Fh2>\u003Cp>You can install the Chat Widget using Google Tag Manager instead of modifying your website's code directly.\u003C\u002Fp>\u003Col>\u003Cli>Open your Google Tag Manager container.\u003C\u002Fli>\u003Cli>Create a new tag.\u003C\u002Fli>\u003Cli>Select \u003Cstrong>Custom HTML\u003C\u002Fstrong> as the tag type.\u003C\u002Fli>\u003Cli>Paste the Chat Widget code generated by Pleased.\u003C\u002Fli>\u003Cli>Add an \u003Cstrong>All Pages\u003C\u002Fstrong> trigger, or configure a trigger for the pages where the Chat Widget should appear.\u003C\u002Fli>\u003Cli>Save the tag.\u003C\u002Fli>\u003Cli>Preview the container and confirm that the tag runs.\u003C\u002Fli>\u003Cli>Publish the container.\u003C\u002Fli>\u003C\u002Fol>\u003Cblockquote>Do not install the same Chat Widget directly on your website and through Google Tag Manager.\u003C\u002Fblockquote>\u003Ch2>React\u003C\u002Fh2>\u003Cp>For React applications, load the Chat Widget once at the application level rather than from an individual page or component.\u003C\u002Fp>\u003Cp>If your application has a shared HTML entry document, add the generated Chat Widget code before the closing \u003Ccode style=\"background-color: rgb(240, 240, 240);\"><\u002Fbody>\u003C\u002Fcode> tag.\u003C\u002Fp>\u003Cp>For example:\u003C\u002Fp>\u003Cpre class=\"ql-syntax\" spellcheck=\"false\"><body>\n  <div id=\"root\"><\u002Fdiv>\n\n  <!-- Pleased Chat Widget code -->\n<\u002Fbody>\n\u003C\u002Fpre>\u003Cp>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.\u003C\u002Fp>\u003Ch2>Next.js\u003C\u002Fh2>\u003Cp>For Next.js applications, install the Chat Widget at the application or root layout level.\u003C\u002Fp>\u003Cp>You can use the Next.js \u003Ccode style=\"background-color: rgb(240, 240, 240);\">Script\u003C\u002Fcode> component:\u003C\u002Fp>\u003Cpre class=\"ql-syntax\" spellcheck=\"false\">import Script from \"next\u002Fscript\";\n\n<Script\n  src=\"https:\u002F\u002Fd33p0nal4ufnrm.cloudfront.net\u002Fwidget\u002Fpl-loader.min.js\"\n  data-pls-widget-id=\"YOUR_WIDGET_ID\"\n  data-pls-client-id=\"YOUR_CLIENT_ID\"\n  strategy=\"afterInteractive\"\n\u002F>\n\u003C\u002Fpre>\u003Cp>Use the widget and client identifiers from the code generated by Pleased.\u003C\u002Fp>\u003Cp>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.\u003C\u002Fp>\u003Ch2>Vue\u003C\u002Fh2>\u003Cp>For Vue applications, add the generated Chat Widget code to the application's HTML entry document.\u003C\u002Fp>\u003Cp>For a standard Vue application, this is typically \u003Ccode style=\"background-color: rgb(240, 240, 240);\">index.html\u003C\u002Fcode>:\u003C\u002Fp>\u003Cpre class=\"ql-syntax\" spellcheck=\"false\"><body>\n  <div id=\"app\"><\u002Fdiv>\n\n  <!-- Pleased Chat Widget code -->\n<\u002Fbody>\n\u003C\u002Fpre>\u003Cp>Add the code before the closing \u003Ccode style=\"background-color: rgb(240, 240, 240);\"><\u002Fbody>\u003C\u002Fcode> tag.\u003C\u002Fp>\u003Cp>This allows the widget to load once when the application starts and remain available as users navigate between routes.\u003C\u002Fp>\u003Ch2>Angular\u003C\u002Fh2>\u003Cp>For Angular applications, add the generated Chat Widget code to \u003Ccode style=\"background-color: rgb(240, 240, 240);\">src\u002Findex.html\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Add it before the closing \u003Ccode style=\"background-color: rgb(240, 240, 240);\"><\u002Fbody>\u003C\u002Fcode> tag:\u003C\u002Fp>\u003Cpre class=\"ql-syntax\" spellcheck=\"false\"><body>\n  <app-root><\u002Fapp-root>\n\n  <!-- Pleased Chat Widget code -->\n<\u002Fbody>\n\u003C\u002Fpre>\u003Cp>Build and deploy the application after making the change.\u003C\u002Fp>\u003Ch2>Other platforms\u003C\u002Fh2>\u003Cp>You can install the Pleased Chat Widget on other platforms that allow custom JavaScript.\u003C\u002Fp>\u003Cp>Look for functionality named:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Custom code\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>Custom HTML\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>Code injection\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>Footer scripts\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>Third-party scripts\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>Tag management\u003C\u002Fstrong>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Paste the Chat Widget code generated by Pleased and, where possible, configure it to load before the closing \u003Ccode style=\"background-color: rgb(240, 240, 240);\"><\u002Fbody>\u003C\u002Fcode> tag.\u003C\u002Fp>\u003Cp>Make sure the code is loaded on every page where you want the Chat Widget to appear.\u003C\u002Fp>\u003Ch2>Verify the installation\u003C\u002Fh2>\u003Cp>After installing the Chat Widget:\u003C\u002Fp>\u003Col>\u003Cli>Publish or deploy your changes.\u003C\u002Fli>\u003Cli>Open a page where the Chat Widget has been installed.\u003C\u002Fli>\u003Cli>Return to \u003Cstrong>Chat Widget Setup\u003C\u002Fstrong> in Pleased.\u003C\u002Fli>\u003Cli>Review the widget's installation status.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>When Pleased detects the Chat Widget being loaded on a webpage, its status changes to \u003Cstrong>Installed\u003C\u002Fstrong>.\u003C\u002Fp>\u003Cp>For more information about installation status, website restrictions and visibility settings, see \u003Cstrong>How to set up your Chat Widget\u003C\u002Fstrong>.\u003C\u002Fp>\u003Ch2>Troubleshooting\u003C\u002Fh2>\u003Cp>If the Chat Widget does not load:\u003C\u002Fp>\u003Cul>\u003Cli>Confirm that you installed the code generated for the correct Chat Widget.\u003C\u002Fli>\u003Cli>Confirm that your website changes have been published or deployed.\u003C\u002Fli>\u003Cli>Make sure the script is present on the published page.\u003C\u002Fli>\u003Cli>Make sure the Chat Widget has not been installed more than once on the same page.\u003C\u002Fli>\u003Cli>Check the browser developer console for JavaScript or Content Security Policy errors.\u003C\u002Fli>\u003Cli>Check whether a browser extension, content blocker or network policy is blocking the widget.\u003C\u002Fli>\u003Cli>If website restrictions are configured in Pleased, confirm that the current website is allowed.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>For Chat Widget configuration or installation status issues, see \u003Cstrong>How to set up your Chat Widget\u003C\u002Fstrong>.\u003C\u002Fp>","2026-08-17T06:32:43.000+00:00",16,"2026-08-17T08:52:13.000+00:00","Manu Ustenko",[56],{"title":57,"id":58,"brandId":35,"categoryId":35,"position":35,"description":59,"isActive":19,"language":27,"englishVersion":19},"All Sections",-1,"",{"id":48,"brandId":18,"position":48,"title":61,"description":62,"titleTranslated":32,"descriptionTranslated":32,"isActive":19,"language":27,"englishVersion":19,"isInternal":43},"Getting Started","Getting Started with Pleased",[64],{"id":47,"brandId":18,"sectionId":32,"categoryId":48,"categoryName":32,"categoryNameTranslated":32,"title":49,"titleTranslated":32,"position":47,"isDraft":43,"isPromoted":19,"isActive":19,"language":27,"englishVersion":19,"updatedAt":32,"isInternal":32,"includeForAi":32,"expiryTime":32,"priority":43,"isPriority":43},[]]