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

# Install on Your Platform

> Step-by-step instructions for adding the A2V2.ai chat bubble or iframe to plain HTML, WordPress, Webflow, Shopify, and Google Tag Manager.

You've copied your agent's embed snippet from **Channels & API → Embed/Install** —
now you need to paste it into the right place on your website. Where that is depends
on the platform you build on. This page walks through the most common ones.

Every snippet on this page comes straight from the **Embed/Install** screen, with
your agent's ID already filled in. Copy it from there rather than retyping it — see
[Embed & install](/embed/install) for where each snippet comes from and which option
(Share Link, chat bubble, or iframe) to choose.

<Note>
  In the snippets below, `<AGENT_ID>` is a placeholder. Your real agent ID is already
  baked into the snippet shown on the **Embed/Install** screen — copy that one.
</Note>

## The two snippets you'll paste

Most installs use the **chat bubble** — a floating button that opens the chat. It
comes in two short scripts:

```html theme={null}
<!-- 1. Your agent's config -->
<script>
  window.A2V2WidgetConfig = { chatbotId: "<AGENT_ID>" };
</script>

<!-- 2. The widget loader -->
<script src="https://chat-widget.a2v2.ai/embed.js"></script>
```

If you'd rather embed the chat **inline** inside a page (for example a dedicated
"Help" page), use the iframe instead:

```html theme={null}
<iframe src="https://chat.a2v2.ai/<AGENT_ID>" width="100%" allow="clipboard-write; microphone" sandbox="allow-scripts allow-same-origin allow-popups allow-forms" style="height: 100%; min-height: 700px" frameborder="0"></iframe>
```

<Tip>
  For the chat bubble, paste **both** scripts into a location that loads on every page
  (a global footer or site-wide custom-code area) so the bubble appears across your
  whole site at once.
</Tip>

## Plain HTML

<Steps>
  <Step title="Open your page's HTML">
    Edit the HTML file (or template) for the pages where you want the chat bubble.
  </Step>

  <Step title="Paste before the closing body tag">
    Add both chat-bubble scripts just before `</body>`:

    ```html theme={null}
        <script>
          window.A2V2WidgetConfig = { chatbotId: "<AGENT_ID>" };
        </script>
        <script src="https://chat-widget.a2v2.ai/embed.js"></script>
      </body>
    </html>
    ```
  </Step>

  <Step title="Save and reload">
    Save the file, deploy if needed, and reload the page. The chat bubble appears in
    the corner.
  </Step>
</Steps>

## WordPress

WordPress doesn't expose raw HTML on every page, so add the snippet site-wide.

<Steps>
  <Step title="Open a header/footer code area">
    Use a header-and-footer code plugin (most WordPress sites already have one), or
    your theme's built-in **Custom Code → Footer** area. Avoid pasting into post
    content — the visual editor can strip `<script>` tags.
  </Step>

  <Step title="Paste both scripts into the footer">
    Add the config script and the loader script to the **footer** (before `</body>`)
    box so the bubble loads on every page.

    ```html theme={null}
    <script>
      window.A2V2WidgetConfig = { chatbotId: "<AGENT_ID>" };
    </script>
    <script src="https://chat-widget.a2v2.ai/embed.js"></script>
    ```
  </Step>

  <Step title="Save and view your site">
    Save the settings and open your live site. The bubble appears across all pages.
  </Step>
</Steps>

<Note>
  To embed the chat **inline** on a single WordPress page, add a **Custom HTML** block
  to that page and paste the iframe snippet into it.
</Note>

## Webflow

<Steps>
  <Step title="Choose site-wide or single-page">
    For the bubble on every page, open **Project Settings → Custom Code**. For one
    page only, open that page's **Settings → Custom Code**.
  </Step>

  <Step title="Paste into the Footer Code area">
    Add both scripts to the **Footer Code** (the "Before `</body>` tag") box:

    ```html theme={null}
    <script>
      window.A2V2WidgetConfig = { chatbotId: "<AGENT_ID>" };
    </script>
    <script src="https://chat-widget.a2v2.ai/embed.js"></script>
    ```
  </Step>

  <Step title="Publish">
    Save, then **Publish** your Webflow site. Custom code only runs on the published
    site, not in the Designer preview.
  </Step>
</Steps>

## Shopify

<Steps>
  <Step title="Open your theme code">
    From your Shopify admin, go to **Online Store → Themes → ⋯ → Edit code**.
  </Step>

  <Step title="Edit theme.liquid">
    Open `theme.liquid` and find the closing `</body>` tag near the bottom.
  </Step>

  <Step title="Paste before </body>">
    Add both scripts immediately before `</body>`:

    ```html theme={null}
    <script>
      window.A2V2WidgetConfig = { chatbotId: "<AGENT_ID>" };
    </script>
    <script src="https://chat-widget.a2v2.ai/embed.js"></script>
    ```
  </Step>

  <Step title="Save">
    Save the file. The bubble now appears on every storefront page that uses this
    theme.
  </Step>
</Steps>

<Warning>
  Edit a copy of your live theme (Shopify lets you **Duplicate** a theme first) if you
  want to preview before publishing. Theme code changes go live immediately on the
  active theme.
</Warning>

## Google Tag Manager

If your site already runs Google Tag Manager (GTM), you can deploy the bubble without
touching your site's code.

<Steps>
  <Step title="Create a Custom HTML tag">
    In your GTM workspace, select **Tags → New → Tag Configuration → Custom HTML**.
  </Step>

  <Step title="Paste both scripts">
    Add the config and loader together in the HTML box:

    ```html theme={null}
    <script>
      window.A2V2WidgetConfig = { chatbotId: "<AGENT_ID>" };
    </script>
    <script src="https://chat-widget.a2v2.ai/embed.js"></script>
    ```
  </Step>

  <Step title="Fire on all pages">
    Set the **Trigger** to **All Pages** so the bubble loads everywhere.
  </Step>

  <Step title="Submit and publish">
    **Submit** and **Publish** the container. Use GTM **Preview** mode first to
    confirm the tag fires and the bubble appears.
  </Step>
</Steps>

## Where to paste, at a glance

| Platform               | Where the snippet goes                                          |
| ---------------------- | --------------------------------------------------------------- |
| **Plain HTML**         | Before `</body>` in your page or template.                      |
| **WordPress**          | A header/footer code plugin or theme **Footer** code area.      |
| **Webflow**            | **Project Settings → Custom Code → Footer Code**, then Publish. |
| **Shopify**            | `theme.liquid`, before `</body>`.                               |
| **Google Tag Manager** | A **Custom HTML** tag firing on **All Pages**.                  |

## Tips

<Tip>
  * The widget loads inside an isolated container, so it won't clash with your site's
    styles, and your site's CSS won't change how it looks.
  * Paste the chat bubble into a **global** template or footer once, rather than on
    every page individually.
  * Re-test your agent in the [Sandbox](/testing/sandbox) before installing so visitors
    get the final experience.
</Tip>

## Troubleshooting

<AccordionGroup>
  <Accordion title="The bubble doesn't appear">
    Confirm both scripts are present, that `chatbotId` is filled in, and that your
    platform didn't strip the `<script>` tags (some page editors do — use a
    code/footer area instead of body content). Check your browser's console for
    errors.
  </Accordion>

  <Accordion title="It works on one page but not site-wide">
    You pasted into a single page's code instead of the site-wide footer or template.
    Move the snippet to the global footer / **All Pages** location for your platform.
  </Accordion>

  <Accordion title="My changes don't show up">
    Webflow and GTM only go live after you **Publish**. For other platforms, your site
    or CDN may be caching — hard-refresh and clear any site/CDN cache.
  </Accordion>

  <Accordion title="Fonts or styling look off on my site">
    The widget loads its own font and isolates its styles. If your site enforces a
    strict Content-Security-Policy, allow the widget's script and font sources.
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Embed & install" icon="code" href="/embed/install">
    Where each snippet comes from and which option to choose.
  </Card>

  <Card title="Visitor experience" icon="comments" href="/widget/end-user-experience">
    What people see and can do inside the chat.
  </Card>

  <Card title="Visibility & access" icon="eye" href="/embed/visibility">
    Control who's allowed to chat with your agent.
  </Card>

  <Card title="Appearance" icon="palette" href="/customize/appearance">
    Style the bubble and chat window.
  </Card>
</CardGroup>