> ## 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.

# Embed & Install

> Add your agent to any website as a floating chat bubble or an inline iframe.

When your agent is ready, add it to any website via link, iframe, or chat bubble.
The **Embed/Install** screen gives you three ready-to-use options, each with the
snippet filled in for your agent.

Open **Channels & API → Embed/Install** from the agent sidebar.

<Frame>
  <img src="https://mintcdn.com/a2v2ai/ItYQQYTHsiiRmr-t/images/embed/install.png?fit=max&auto=format&n=ItYQQYTHsiiRmr-t&q=85&s=16163e98213167e4dd7024bae4d706ba" alt="The Embed/Install screen with the Share Link, iframe, and Chat Bubble snippets." width="1440" height="900" data-path="images/embed/install.png" />
</Frame>

## Prerequisites

* An agent that's tested and ready (see [Sandbox](/testing/sandbox)).
* Access to edit your website's HTML (for the iframe and chat bubble options).

<Note>
  In the snippets below, `<AGENT_ID>` is filled in automatically for your agent —
  copy the snippet directly from the **Embed/Install** screen rather than retyping
  it.
</Note>

## Option 1 — Share Link

The fastest way to share your agent: a hosted page you can send in an email, link
from a button, or post anywhere — no code required.

```text theme={null}
https://chat.a2v2.ai/<AGENT_ID>
```

Anyone who opens the link chats with your agent on its own hosted page.

## Option 2 — Chat bubble (recommended)

A floating button in the corner of your site that opens the chat when clicked.
This option comes in two parts.

<Steps>
  <Step title="Add the widget script to your head">
    Paste this into your page's `<head>`:

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

  <Step title="Add the config to your body">
    Paste this into your page's `<body>`:

    ```html theme={null}
    <script>
      window.A2V2WidgetConfig = { chatbotId: "<AGENT_ID>" };
    </script>
    ```
  </Step>

  <Step title="Publish and reload">
    Publish your site and reload — the chat bubble appears. Add both snippets to
    every page where you want the bubble.
  </Step>
</Steps>

<Note>
  The widget loads inside an isolated container (a Shadow DOM), so it won't clash
  with your site's styles, and it won't be affected by them.
</Note>

## Option 3 — Inline iframe

Embed the chat directly inside a page (for example, a dedicated "Help" page). Copy
the `<iframe>` snippet and place it in your page's HTML where the chat should
appear.

```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>
```

## Which should I use?

| Use the…          | When you want…                                         |
| ----------------- | ------------------------------------------------------ |
| **Share Link**    | To send your agent as a link, with nothing to install. |
| **Chat bubble**   | A site-wide assistant available on every page.         |
| **Inline iframe** | The chat embedded into a specific page or layout.      |

## Tips

<Tip>
  * Add the **chat bubble** snippet to your global template/footer so it appears
    everywhere at once.
  * For platforms like WordPress, Webflow, or Shopify, paste the snippet into the
    theme's "custom code" / "footer code" area.
  * Re-test in the [Sandbox](/testing/sandbox) before embedding so visitors get the
    final experience.
</Tip>

## Troubleshooting

<AccordionGroup>
  <Accordion title="The bubble doesn't appear">
    Confirm the snippet is before `</body>`, that `chatbotId` is present, and that
    your site doesn't strip `<script>` tags. Check the browser console for errors.
  </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 font/script sources.
  </Accordion>

  <Accordion title="Updates aren't showing">
    Your site or CDN may be caching the page. Hard-refresh, and clear any
    site/CDN cache after embedding.
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Appearance" icon="palette" href="/customize/appearance" />

  <Card title="Visibility" icon="eye" href="/embed/visibility" />

  <Card title="Test your agent" icon="vial" href="/testing/sandbox" />
</CardGroup>
