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

# Google Tag Manager

> Install the BubblaV chatbot widget with Google Tag Manager (GTM) — no code editing required, works on any website.

Add the BubblaV AI chatbot to **any website** using Google Tag Manager (GTM). GTM is one of the most popular ways to manage scripts on a site, and it lets you add the widget without touching your website's source code — ideal for a normal or custom website that doesn't have a dedicated marketplace app.

## Why Use Google Tag Manager?

<CardGroup cols={3}>
  <Card title="No Code Editing" icon="code">
    Add the widget through the GTM interface. You never edit your website's HTML, theme files, or server templates directly.
  </Card>

  <Card title="Works on Any Site" icon="globe">
    GTM runs on virtually any website — custom builds, static sites, and platforms without an official app. It's a great default choice.
  </Card>

  <Card title="Central Control" icon="sliders">
    Manage the widget alongside all your other tags (analytics, ads, tracking) from one place. Enable, pause, or remove it anytime.
  </Card>
</CardGroup>

<Note>
  Looking for a no-code app install instead? If your site is on **Wix**, **Webflow**, or **Framer**, use our official marketplace app. GTM is the recommended method for any other or custom website.
</Note>

***

## Prerequisites

Before you start, make sure you have:

1. A **Google Tag Manager container** installed on your website. If you haven't set up GTM yet, follow Google's [Web installation guide](https://developers.google.com/tag-platform/tag-manager/web) first.
2. Your **BubblaV embed code**, available in your dashboard under **Installation**. It looks like this:

```html theme={null}
<script
  src="https://www.bubblav.com/widget.js"
  data-site-id="YOUR_WEBSITE_ID"
  defer
></script>
```

***

## Installation

### Step 1: Open Google Tag Manager

Log in to [Google Tag Manager](https://tagmanager.google.com) and select your container (or create a new one for your website).

### Step 2: Create a New Tag

Go to **Tags** in the left sidebar, then click **New**.

### Step 3: Configure the Tag

Click on **Tag Configuration**, then choose **Custom HTML** as the tag type.

### Step 4: Paste the Widget Code

Paste your BubblaV embed code into the HTML field:

```html theme={null}
<script
  src="https://www.bubblav.com/widget.js"
  data-site-id="YOUR_WEBSITE_ID"
  defer
></script>
```

Replace `YOUR_WEBSITE_ID` with the site ID from your BubblaV dashboard.

### Step 5: Set the Trigger

Click on **Triggering** and select **All Pages** so the widget loads on every page of your site.

### Step 6: Name and Save

Name the tag **"BubblaV Chat Widget"** and click **Save**.

### Step 7: Publish

Click **Submit** in the top-right corner, then click **Publish** to make the tag live on your site.

<Tip>
  After publishing, it may take a few minutes for changes to propagate. Open your site in an incognito window to verify the widget appears.
</Tip>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="The widget is not appearing on my site">
    * Make sure you clicked **Submit** → **Publish** in GTM (saving a tag is not enough)
    * Confirm the trigger is set to **All Pages** (or includes the page you're checking)
    * Open your site in an incognito window and wait 1–2 minutes for cache to clear
    * Verify the `data-site-id` in your tag matches the website ID in your BubblaV dashboard
  </Accordion>

  <Accordion title="The tag shows but the widget still doesn't load">
    * Use **Preview** mode in GTM to confirm the "BubblaV Chat Widget" tag fires on page load
    * Check your browser console for errors related to `widget.js`
    * Make sure an ad blocker or script blocker isn't blocking `bubblav.com`
    * Confirm your website has available message quota in the dashboard
  </Accordion>

  <Accordion title="I don't have a Google Tag Manager account yet">
    GTM is free. Create an account at [tagmanager.google.com](https://tagmanager.google.com), set up a container for your website, and add the two GTM container snippets to your site's `<head>` and `<body>` as Google instructs. Then follow the installation steps above.
  </Accordion>
</AccordionGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Design Your Widget" icon="palette" href="/user-guide/widget-design">
    Customize colors, position, and behavior
  </Card>

  <Card title="Set Up Knowledge" icon="book" href="/user-guide/knowledge/overview">
    Add your content for better AI responses
  </Card>
</CardGroup>