One rule applies on any platform: the widget code goes on every page, as it is. Preferably in the header (<head>); if the platform doesn't allow it, right before </body>.
Before you start
- The widget code, copied from Chat agentAgent profileShare, Chat button panel.
- Access to the website's files, to the website builder's admin panel or to the Google Tag Manager container.
#HTML website
Open the HTML file of each page, or the shared template if the website has one. Paste the code before </head> and upload the files to the server.
#Google Tag Manager
With Google Tag Manager you create a tag that adds the widget to every page, without touching the website's code.
-
Create a Custom HTML tag
In the website's container, create a new tag of type Custom HTML. Paste the widget code copied from the console, as it is.
-
Choose the trigger
As the trigger, choose the page view on every page (All Pages).
-
Test and publish
Test the tag with Tag Manager's Preview, then publish the container. Until you publish it, the tag doesn't reach the website.
#Wix, Squarespace, Webflow and other website builders
Website builders almost always have a feature to add custom code. The name changes from platform to platform: custom code, code injection, embed code.
-
Find the custom code feature
Look for it in the website settings, not in the settings of a single page.
-
Choose the header and all pages
If the platform asks, choose to place the code in the header (head) and on all pages. If the header isn't among the options, the end of the page (body) works too.
-
Paste and publish
Paste the widget code, save and publish the website.
It depends on the platform's plan. Some website builders allow custom code only on paid plans, or only with a connected domain. If your plan doesn't allow it, you can use the chat link.
#Joomla
On Joomla you have two options:
- a custom code extension that puts the code in the header of every page;
- the template's main file (
index.php), where you paste the code before</head>. Work on a child template or a copy: a template update would wipe out your change.
#PrestaShop
On PrestaShop you have two options:
- a custom code module that puts the code in the header of every page;
- the theme's header file, where you paste the code at the end. In the Classic theme of PrestaShop 1.7 and 8 it's
templates/_partials/head.tpl. Work on a child theme or a copy: a theme update would wipe out your change.
After the change, clear the PrestaShop cache, usually in Advanced ParametersPerformance. To let the chat recognize signed-in customers, there's an example in Passing user data.
#Custom-built websites and security rules
If the website is custom-built, whoever develops it does the installation: send them the Widget JavaScript API page.
Some websites have a Content Security Policy (CSP): a security rule that says which addresses the page can load scripts, images and connections from. If the website has one, it must be updated with the widget's addresses, otherwise the button doesn't appear. The domains and directives to add are in Widget JavaScript API › Content Security Policy.
Result
The widget code is on every published page and the chat opens when clicked.
#How to check
Open the published website in a private window, not the platform's editor or preview, and follow the check in Installing the widget. If the widget is missing, the causes are in Website widget.