All install guides
Google Tag Manager

How to add an AI chatbot with Google Tag Manager

Ship the chat bubble as a Custom HTML tag firing on All Pages. Useful when your site’s code is out of reach but Tag Manager is not.

You’ll need

A Tag Manager container already installed on your site. Tag Manager itself is free.

Before you start

You need your embed snippet first. Start a free trial, point Serochat at a page or a document, and you get a single line of code to copy — it is on the Customise page in your dashboard. Then follow the steps below.

The steps

  1. In Tag Manager, open Tags in the left-hand menu and click New.
  2. Click Tag Configuration and choose Custom HTML.
  3. Paste the snippet into the HTML box.
  4. Click Triggering and choose All Pages. Not ‘Initialization – All Pages’ — that one is meant for Google’s own tags.
  5. Click Save, then Submit at the top right, then Publish.
  6. Come back to Serochat and press Verify install — we’ll load your site and confirm the chatbot is live.

Verify install can say “not found” for a Tag Manager install even when it worked: we read your page’s HTML once, and Tag Manager adds the snippet a moment later. Open your site in a browser and look for the chat bubble to be sure.

Pasting this in is safe: it is one line that loads the chat bubble, and it cannot change or break the rest of your site. Delete the line and Serochat is gone completely.

If your site has a Content-Security-Policy

If your site sends a Content-Security-Policy header, the browser will silently block the chat bubble until that policy allows Serochat. This is the whole list. If you have no CSP — which is most sites — there is nothing to do here.

script-src must allow https://serochat.ai
The snippet you pasted loads widget.js from us.
connect-src must allow https://serochat.ai
The widget calls our API to send a message and fetch the reply.
img-src must allow https://serochat.ai
Only if you have uploaded an avatar image for your bot. The default lettered avatar needs no image.
style-src must allow 'unsafe-inline'
The widget styles itself with one <style> block inside its own shadow root, which your policy sees as an inline style. This is the only directive that is a genuine loosening rather than an allow-list entry, and it applies to styles only — never add 'unsafe-inline' to script-src for us.

A policy with nothing else in it would read:

Content-Security-Policy: script-src 'self' https://serochat.ai; connect-src 'self' https://serochat.ai; img-src 'self' https://serochat.ai; style-src 'self' 'unsafe-inline';

Two things that catch people out. If your policy sets default-src and not the four directives above, every one of them falls back to default-src — so either add the directives explicitly or add https://serochat.ai to default-src. And a policy delivered by a <meta> tag behaves the same way as a header, so check both. If the bubble still does not appear, open your browser’s developer console: a blocked resource says so by name, and the directive it names is the one to fix.

Get your snippet

Start a free trial, connect a page or a document, and Serochat answers your customers from your own content — with a link to the passage it used.

Try Serochat free Card-free trial · see pricing.