> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yourhomie.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Google Tag Manager

> Deploy the homie AI chat widget through a Google Tag Manager Custom HTML tag in under a minute.

You can roll out homie AI through Google Tag Manager (GTM) without touching theme code. This is ideal when several properties share the same container, or when you manage all of your site tags in one place.

<Note>
  Before you start, make sure you have:

  * An assistant created on the platform
  * Your embed script copied from the assistant's **Publish** area
  * Access to a Google Tag Manager container on your site
</Note>

## Add a Custom HTML tag

<Steps>
  <Step title="Copy your embed script">
    Open your assistant on the platform, go to its **Publish** area, choose **Google Tag Manager**, and copy the script. It already contains your `chatbotId`.

    <Frame>
      <img src="https://mintcdn.com/homieai/t1ZSM74lXOpzsQLS/images/integrations/connect.png?fit=max&auto=format&n=t1ZSM74lXOpzsQLS&q=85&s=ddc2630812f2d8706ba54bc3b19cb1a3" alt="Platform Publish area showing the copyable script snippet" width="1340" height="978" data-path="images/integrations/connect.png" />
    </Frame>
  </Step>

  <Step title="Create a new Custom HTML tag">
    Sign in at [tagmanager.google.com](https://tagmanager.google.com), select your container, then choose **Tags → New → Custom HTML**.

    Paste the embed script into the HTML field. The Tag Manager version configures the widget through `window.homieBotConfig` and injects it for you, because Custom HTML tags load scripts in a way that prevents reading attributes directly:

    ```html theme={null}
    <script>
      (function () {
        window.homieBotConfig = {
          chatbotId: "YOUR-CHATBOT-ID",
          domain: "https://chat.yourhomie.ai"
        };
        var script = document.createElement("script");
        script.src = "https://cdn.yourhomie.ai/embed.min.js";
        script.defer = true;
        if (document.readyState === "loading") {
          document.addEventListener("DOMContentLoaded", function () {
            document.body.appendChild(script);
          });
        } else {
          document.body.appendChild(script);
        }
      })();
    </script>
    ```
  </Step>

  <Step title="Set the trigger to All Pages">
    Choose the **All Pages** trigger so the chat bubble loads site-wide.

    <Frame>
      <img src="https://mintcdn.com/homieai/t1ZSM74lXOpzsQLS/images/integrations/gtm/gtm.png?fit=max&auto=format&n=t1ZSM74lXOpzsQLS&q=85&s=81ab22811cfb5f329bc2956e16fd1027" alt="Google Tag Manager with the All Pages trigger selected for the homie tag" width="1496" height="1048" data-path="images/integrations/gtm/gtm.png" />
    </Frame>
  </Step>

  <Step title="Submit and publish">
    Click **Submit**, then **Publish**. GTM deploys the tag immediately.
  </Step>
</Steps>

<Check>
  Refresh your site. The homie chat bubble appears in the bottom-right corner. Open it and send a test message.
</Check>

<Tip>
  Use GTM's built-in environments to test the tag in a preview before you publish to production.
</Tip>

## Troubleshooting

* **Tag fires but no bubble?** Disable any script blockers and clear your cache.
* **Only on specific pages?** Adjust the trigger to a **Page View** rule that matches the pages you want.
* **Multiple environments?** Use GTM environments to validate before going live.

For deeper configuration and methods, see the [Client API](/en/api-reference/client/overview).

## Next steps

<CardGroup cols={2}>
  <Card title="Client API" icon="code" href="/en/api-reference/client/overview">
    Configure the widget and call methods from your site.
  </Card>

  <Card title="Installation overview" icon="plug" href="/en/user-guide/installation/overview">
    Compare install methods for every platform.
  </Card>
</CardGroup>