Install the Web Chat widget on your site

Installation is a single <script> tag. Once it’s on a page, the widget renders without further work.

Before you start

• The widget exists in Settings → Web Chat. If not, create one first.
• You can edit your site’s HTML, your CMS template, or your tag manager.

Steps

1. Open Settings → Web Chat and click your widget.
2. Open the Installation tab.
3. Copy the embed snippet. It looks like:

```html

```

The WIDGET_ID is filled in for you — you don’t need to edit it. 4. Paste the snippet into your site’s HTML, ideally just before the closing </body> tag. This keeps the rest of your page from waiting on the widget to load. 5. Publish or deploy your site. 6. Make sure the widget is enabled from the list in Settings → Web Chat. A disabled widget won’t render even if the script is on the page.

Verify it worked

• Open your site in a browser. The launcher icon should appear in the corner within a second or two.
• Click the launcher. You should see your widget’s welcome message and the input box.

Where to put the snippet

The cleanest answer is “just before </body>,” but in practice:

• A traditional static site — drop the snippet into your site template’s footer.
• A CMS like WordPress — use a “footer scripts” plugin, or add it to the theme’s footer.php.
• A tag manager like Google Tag Manager — create a Custom HTML tag with the snippet, fire on All Pages.
• A single-page app (React, Vue, etc.) — add the snippet to your index.html template. You don’t need to integrate it into the framework.

Loading on specific pages only

The script renders the widget on every page where it loads. If you want it only on certain pages, scope where the script is included rather than trying to control the widget after it loads. Tag managers make this easy with firing rules.

Troubleshooting

• Symptom: No launcher appears, even though the snippet is on the page. Fix: Open your browser’s developer tools, look at the console and network tabs, and check that chat-widget.js loaded with a 200. If it didn’t, the data-widget-id may be wrong or the widget may be disabled. See Widget not appearing.

• Symptom: The launcher appears for some pages but not others. Fix: Confirm the snippet is in the template that renders those pages. If you’re using a tag manager, check the firing rules.

• Symptom: Multiple launchers appear on the page. Fix: The snippet is loaded twice. Search your site’s HTML or your tag manager for duplicate copies.