Add chat to your website

Copy your widget's install code onto your site, by hand or with WordPress, Shopify or Google Tag Manager, then check that it works.

Website chat puts a chat button on your website. Visitors' chats arrive in your Inbox next to your WhatsApp conversations. To add it to your site, you paste one short piece of code, the install code, into your pages.

Note: Owners and Admins can install and publish a widget. Supervisors, Marketing Managers and Read Only members can see the install code but can't change anything.

Before you start

Go to Website › Chat widgets and open your widget. If you don't have one yet, click Add widget, give it a name and pick a theme.
Open the Domains & privacy tab and add every site the chat should appear on. The widget only runs on these domains, so copying your code onto another site does nothing.
Click Save changes, then Publish. A draft widget only shows in the designer's preview. A published widget shows on your allowed domains.

www and the bare domain are different sites

example.com and www.example.com are two separate domains to the widget:

You add	The chat runs on
`example.com`	`example.com` only, not `www.example.com`
`www.example.com`	`www.example.com` only, not `example.com`
`*.example.com`	every subdomain, including `www.example.com` and `shop.example.com`, but not `example.com` itself

If visitors can reach your site both with and without www, add both, for example example.com and www.example.com, or example.com and *.example.com. Enter just the name: no https://, no path and no port.

Changes take about a minute

After you save, allowed domains, the design, texts and settings reach your site within about a minute. If the chat doesn't appear straight away after you add a domain, wait a minute and reload the page.

You can paste the code before you publish. The chat button appears on your site when you click Publish.

Copy the install code

Open the widget's Install tab. Website › Install and help also lists your widgets with a link to each one's install code.
Under Install code, click Copy code.
Paste the code just before the closing </body> tag on every page where the chat should appear.

The code looks like this, with your own widget key:

html

<script src="https://widget.iconengage.com/loader.js" data-widget="wk_…" async></script>

It loads in the background, so it doesn't slow your page down. You only need to paste it once per page or template, and you don't need to change it when you edit the widget's design or texts.

WordPress

In your WordPress dashboard, install a plugin that adds code to every page's footer, such as a "header and footer code" plugin. Many themes also have a Footer scripts box in their settings.
Paste the install code into the footer (body end) box.
Save, then open your site in a new browser window to check the chat button.

If you edit your theme's footer.php directly instead, paste the code just before </body>. A theme update can remove it, so a plugin is safer.

Shopify

In Shopify admin, go to Online Store › Themes.
Next to your current theme, open the … menu and choose Edit code.
Under Layout, open theme.liquid.
Paste the install code just before </body> and click Save.

Add your shop's domain to the widget's allowed domains: your own domain and, if customers also see it, your-shop.myshopify.com.

Google Tag Manager

In your container, go to Tags › New.
Choose Custom HTML as the tag type and paste the install code.
Set the trigger to All Pages.
Save the tag, then click Submit and Publish your container.

Tag Manager adds the code with JavaScript after the page loads. The chat works the same way, but the page check below may say Install code not found. Check last seen instead.

Check installation

On the widget's Install tab, Check installation shows when the widget last loaded in a real browser and on which site, for example "Last seen on https://example.com, 2 minutes ago". Open your site, wait a moment, then come back and refresh to see it.

To check one page, enter its address in Page address (optional) and click Check. You'll see one of these results:

Result	What it means
Installed	The install code is on that page.
Install code not found	We couldn't find the code on that page. If you use a tag manager, this can happen even when the chat works. Check last seen.
A different widget	The page has the install code of another widget. Copy this widget's code instead.
Not an allowed domain	The page, or a page it redirects to, isn't on the widget's allowed domains, so the chat won't run there. Click Review allowed domains to add it.
Page could not be opened	Check the address, and that the page is public and not behind a login.

Where the chat sits on the page

On the widget's Appearance tab, under Launcher, Position sets where the chat button and the open chat sit: Bottom right (the default), Bottom left, Middle right or Middle left.

Bottom: the button sits in that corner, and the chat opens above it.
Middle: the button sits halfway down that edge of the page, and the chat opens beside it, inside the window.
On phones: the button moves to match, and the chat always opens full screen.

The side is the side of the screen, so it stays the same on right-to-left pages. Distance from the side and Distance from the bottom move the button further in. The button also keeps clear of a phone's notch and home bar.

If the chat doesn't appear

Make sure the widget is Live, not Draft or Paused.
Make sure the site's domain is in Domains & privacy › Allowed domains, saved, with no https:// or path. Check www: example.com doesn't cover www.example.com.
If you've just saved, wait about a minute and reload.
Make sure the code is on the page you're looking at. Open the page, view its source and search for loader.js.
If your site uses a Content Security Policy, allow https://widget.iconengage.com in script-src and frame-src, and allow 'unsafe-inline' in style-src, because the chat button brings its own styles.
Clear your site's cache or your CDN's cache after adding the code.

Visitors

Still need help?

Write to us at [email protected] and tell us what you were trying to do. Already a customer? Sign in to IconEngage — the same articles are under Help in the app.