Add the chat with Google Tag Manager

A Custom HTML tag on all pages, with the Tag Manager version of the code from Settings, then Preview and Publish.

3 MIN READUPDATED 7 SECTIONS

To add an AI chatbot with Google Tag Manager, create a Custom HTML tag that loads Dazza’s chat, trigger it on All Pages, check it in Preview, then Submit and Publish the container. Use the Tag Manager version of the code: in Dazza, open Settings → Install and choose Google Tag Manager above the code.

Why a different version

Dazza’s usual line is a script tag with your agent’s key in a data-agent attribute:

<script src="https://app.dazza.io/widget.js" data-agent="dz_…" async></script>

Tag Manager removes custom attributes like data-agent from script tags in Custom HTML, and without the key the chat can’t load. The Tag Manager version sets the key in window.DazzaSettings first, which the chat reads when the attribute isn’t there:

<script>
  window.DazzaSettings = { agent: "dz_…" };
</script>
<script src="https://app.dazza.io/widget.js" async></script>

Settings → Install fills in your agent’s key. Options go in the same place, such as { agent: "dz_…", position: "left", label: "Chat with us" }.

If you set the tag up with the earlier version of this guide, which added the script with setAttribute("data-agent", …), it keeps working. There’s nothing to change.

Before you start

  • Publish your agent. The chat button only appears once your agent has a published version.
  • Check it isn’t already on your site. If your theme has the line too, only the first copy loads. Keep one.

Create the tag

  1. In Tag Manager, open your container and go to Tags, then click New.
  2. Name the tag, such as “Dazza chat”.
  3. Click Tag Configuration and choose Custom HTML.
  4. Paste the version above into the HTML box, with your key in it.
  5. Click Triggering and choose All Pages.
  6. Click Save.

Test it in Preview

  1. Click Preview at the top right, enter your site’s address and connect.
  2. In Tag Assistant, check that “Dazza chat” is listed under the tags that fired.
  3. On your site, look for the chat button in the bottom corner, and ask it a question.

Publish

  1. Click Submit at the top right.
  2. Choose Publish and Create Version, and give the version a name, such as “Add Dazza chat”.
  3. Click Publish.

In Dazza, Settings → Install then shows Installed and the address the chat was last seen on.

Common problems

What you see What to do
The tag fired but there’s no chat Open your browser’s console. “No agent key” means the key didn’t arrive: use the Tag Manager version above, with window.DazzaSettings before the script.
No chat button anywhere Publish your agent in Agent. Settings → Install says so if it isn’t live yet.
It works in Preview but not for visitors Submit and publish the container. Preview only affects your own browser.
No chat on some addresses If you’ve listed Allowed websites in Settings → Install, add every domain the container runs on. Subdomains are included.
No chat for some visitors Ad and tracking blockers often block Tag Manager itself. Adding the line to your site directly avoids that.
The tag waits for consent The chat doesn’t set cookies. It keeps the conversation in the visitor’s browser storage for app.dazza.io, which it needs to work. Mention it in your cookie notice.

Next

Still stuck? A person reads every message. Contact us ↗