How to add an AI chatbot with Google Tag Manager

Google Tag Manager is the easiest route when you can’t, or don’t want to, edit your site’s templates: marketing teams, agencies, or platforms where code changes go through a release. Feedbot (our product) installs with one script tag, so it fits in a GTM Custom HTML tag as is.

What you need

• A Feedbot bot id from Dashboard → Bot → Install (the Free plan is enough to start).
• A GTM web container already installed on your site, and permission to publish it.

Add the chatbot tag

1. In Google Tag Manager, open your container and go to Tags → New.

2. Name the tag, for example Feedbot chat.

3. Click Tag Configuration and choose Custom HTML.

4. Paste the snippet:

   <script src="https://w.feedbotai.com/v1/feedbot.js" data-bot-id="YOUR_BOT_ID" async></script>

   Leave Support document.write unchecked. The loader doesn’t use it.

5. Click Triggering and pick All Pages.

6. Click Save.

7. Click Preview, enter your site URL and check that the chat button appears and that Tag Assistant shows Feedbot chat under Tags Fired.

8. Back in GTM, click Submit, add a version name such as “Add Feedbot chat”, and click Publish.

The steps for Custom HTML tags are described in Google’s custom tags help.

Show the chatbot on some pages only

GTM triggers decide where the tag runs. Common setups:

On a single-page app, a Page View trigger fires once per full page load, so a route-based trigger only applies on the first page a visitor lands on. Once loaded, the widget stays across in-app navigation. For SPAs, it’s simpler to load it everywhere, or to install it in code (see the React guide).

Open the chat from a button

Add a second Custom HTML tag, triggered on All Pages, that defines the queue stub:

<script>
  window.Feedbot = window.Feedbot || function () { (Feedbot.q = Feedbot.q || []).push(arguments) };
</script>

Then any link or button on the site can call Feedbot('open') or Feedbot('sendMessage', 'I have a question about pricing'). See the JavaScript API.

Identify logged-in users

If your site pushes user data to the dataLayer, for example:

dataLayer.push({ userId: "u_123", userEmail: "[email protected]", feedbotHash: "HASH_FROM_YOUR_SERVER" });

create Data Layer Variables for those keys and add a Custom HTML tag:

<script>
  window.Feedbot = window.Feedbot || function () { (Feedbot.q = Feedbot.q || []).push(arguments) };
  Feedbot("identify", { userId: {{DLV - userId}}, email: {{DLV - userEmail}}, hash: {{DLV - feedbotHash}} });
</script>

GTM inserts variable values as JavaScript values, so don’t wrap {{...}} in quotes. Fire the tag on a Custom Event trigger matching the event your site pushes after login. The hash must be computed on your server; the secret never goes into GTM. See Identify users.

Consent mode

GTM’s consent settings can hold the tag until the visitor agrees. Open the tag, go to Advanced Settings → Consent Settings, select Require additional consent for tag to fire and add functionality_storage. Google explains the options in consent mode support. The widget keeps a visitor id in local storage, so decide with your privacy policy whether chat counts as functional. If you gate it, visitors who decline won’t see the chat; a hosted chat link on your contact page is a fallback.

Troubleshooting

Train it on your site

On Free, the bot learns from text and FAQ you add. From Starter, import your website by URL or sitemap and upload files. See knowledge base.

Next steps

• Install docs for data-* options like position, color and language.
• Running Ghost or Bubble? Their built-in code fields are an alternative to GTM: Ghost, Bubble.