Google Tag Manager (Babelbeez Voice Agent)

Add your Babelbeez AI Voice Agent to any website that uses Google Tag Manager (GTM) by installing the Babelbeez Voice Agent tag template.

This guide covers requirements, how to find your Public Chatbot ID, creating the tag in GTM, and basic troubleshooting.

Requirements

• A Babelbeez account and at least one configured voice agent
• Your site’s domain added under Configure Allowed Domains in the Babelbeez dashboard
• A published Web container in Google Tag Manager already installed on your site
• Your site served over HTTPS (required for microphone access and secure WebRTC)

WARNING

If your site is not using HTTPS, browsers will block microphone access and the voice agent will not be able to start.

Step 1 – Find your Public Chatbot ID

1. Sign in to the Babelbeez dashboard.
2. Select your voice agent.
3. Go to Go Live!.
4. In Step 3 – Add to Your Website, choose Google Tag Manager as the platform.
5. Copy the Public Chatbot ID shown in the Public Chatbot ID box.

You will paste this value into the GTM tag template.

Step 2 – Install the Babelbeez template from the Gallery

1. Go to Google Tag Manager and open your Web container.
2. In the left menu, click Templates.
3. Under Tag Templates, click Search Gallery.
4. Search for Babelbeez Voice Agent.
5. Select the template and review the permissions (it sets a single global config object and loads the Babelbeez loader script).
6. Click Add to workspace.

After this, the Babelbeez Voice Agent template will be available when creating a new tag.

Step 3 – Create a Babelbeez Voice Agent tag

1. In GTM, go to Tags → New.
2. Click Tag Configuration.
3. Choose Babelbeez Voice Agent from the list of available tag types.
4. In the tag settings:
   • Paste your Public Chatbot ID (from Step 1) into the Public Chatbot ID field.
5. Under Triggering, select when the voice agent should load:
   • For most sites, choose All Pages.
   • If you only want the agent on specific pages or sections, choose or create a more targeted trigger (for example, a specific URL pattern).

Click Save when you’re done configuring the tag.

Step 4 – Preview, then Publish

Before publishing, use GTM preview mode to confirm everything is wired correctly.

1. In GTM, click Preview in the top-right corner.
2. Enter your website URL and start the Tag Assistant preview.
3. In the previewed browser window:
   • Navigate to a page where the tag should fire (e.g. your home page).
   • Open the Tag Assistant panel and verify that the Babelbeez Voice Agent tag is firing on that page.
4. Open the browser developer console:
   • Look for log messages starting with:
     • Babelbeez Voice Agent: ...
   • If you see the loader script loading without errors and your site is on HTTPS with the domain allowed, you should see the Babelbeez voice button appear.

When everything looks correct:

1. Return to GTM.
2. Click Submit.
3. Add a version name/description if desired.
4. Click Publish.

Your Babelbeez AI Voice Agent will now load wherever that GTM tag is set to fire.

Troubleshooting

The agent doesn't show up at all

Check the following in order:

1. Tag firing in GTM preview

   • Use Preview mode and confirm that the Babelbeez Voice Agent tag appears under Tags Fired for the page you are testing.
   • If it’s under Tags Not Fired, your trigger conditions may be too narrow or not matching that page.

2. Allowed domains

   • In the Babelbeez dashboard:
     • Open your agent → Go Live! → Step 1 – Configure Allowed Domains.
     • Ensure your domain is listed without protocol, for example:
       • example.com
       • staging.example.com
   • If the domain is missing or mis-typed, initialization will fail.

3. HTTPS

   • Confirm the page URL starts with https://:
     • Microphone and WebRTC will not work on plain http:// (except on localhost for development).
   • If your site is still on HTTP, you’ll need to enable HTTPS before using the voice agent.

The tag fires, but there are console errors

Open your browser's developer console on the previewed page and look for:

• Network errors when loading:
  • https://www.babelbeez.com/assets/embedLoader.js
• Console messages such as:
  • Babelbeez Voice Agent: Failed to load loader script.

Possible causes:

• Ad blockers or privacy extensions

  • Temporarily disable ad blockers / privacy extensions and reload the page.
  • If the agent appears, you may need to adjust those tools or communicate this limitation to your users.

• Content Security Policy (CSP)

  • If your site uses a strict CSP, ensure it allows:
    • https://www.babelbeez.com for script loading.

Public Chatbot ID issues

If the tag fires but nothing appears and there are no obvious network errors:

1. Go back to the Babelbeez dashboard and confirm:
   • You copied the Public Chatbot ID for the correct agent.
2. In GTM:
   • Re-open your Babelbeez Voice Agent tag.
   • Verify the Public Chatbot ID exactly matches what is shown in the dashboard (no extra spaces or truncation).

If you change the Public Chatbot ID in the Babelbeez dashboard:

• Update the value in the GTM tag and republish the container so the new ID is used.

Staging vs production

If you have multiple environments (for example, staging.example.com and www.example.com):

• Add each domain under Configure Allowed Domains in the Babelbeez dashboard.
• Make sure:
  • The correct GTM container is installed on each environment.
  • Your Babelbeez Voice Agent tag is published in the container that matches that environment.

Where this appears in the dashboard

In the Babelbeez dashboard:

• Go to your voice agent → Go Live!:
  • Step 1 – Configure Allowed Domains: add your website's domains.
  • Step 2 – Choose Your Platform: select Google Tag Manager.
  • Step 3 – Add to Your Website:
    • Follow the short GTM instructions.
    • Copy the Public Chatbot ID using the dedicated copy button.