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

# Add your agent to your website

> Put a chat bubble on every page of your website with one line of code, embed the chat inside a page, or share a link to a hosted chat page.

There are three ways to put your agent on the web:

* **Chat bubble**: a button in the corner of every page that opens the chat. The most common choice.
* **Shareable link**: a hosted chat page. No website needed; share it in emails, QR codes, or your social profiles.
* **Iframe embed**: the chat inside a page, such as a help center or a contact page.

Open your agent, click **Channels**, and click **Manage** on **Chat bubble**. The **Website** page has all three.

## Add the chat bubble

<Steps>
  <Step title="Style the chat bubble">
    Choose where the bubble sits and how it looks. The preview on the right shows your choices.

    <Frame>
      <img src="https://mintcdn.com/easy-peasyai/9Brw5At2juy5r5tl/images/agents/website-channel.webp?fit=max&auto=format&n=9Brw5At2juy5r5tl&q=85&s=e8bbd63d805f88a4dd12841d28120954" alt="The Website page: Chat bubble with Position (Bottom Right selected), Widget Button Size, Widget Button Color #6366f1, Widget Icon, and a live preview of a page with the chat bubble at the bottom right" width="1400" height="1257" data-path="images/agents/website-channel.webp" />
    </Frame>

    | Setting                 | Options                                                                                                                         |
    | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
    | **Position**            | **Bottom Right**, **Bottom Left**, **Top Right**, **Top Left**, or a tab on the side of the page: **Side Right**, **Side Left** |
    | **Widget Button Size**  | **Medium**, **Large**, or **Extra Large** (corner positions)                                                                    |
    | **Side Rail Label**     | The text on the side tab, such as "Chat with us" (side positions)                                                               |
    | **Widget Button Color** | The bubble's color                                                                                                              |
    | **Widget Icon**         | A link to an image to use instead of the chat icon                                                                              |
    | **Chat window width**   | **Default · 400px**, **Wide · 480px**, or **Extra wide · 560px** on computers. On phones the chat always opens full screen      |

    **Open full preview** shows the real chat on a sample page.
  </Step>

  <Step title="Copy the install snippet">
    Under **Install snippet**, click **Copy**. The code includes your choices:

    ```html theme={null}
    <script
        src="https://bots.easy-peasy.ai/chat.min.js"
        data-chat-url="https://bots.easy-peasy.ai/bot/YOUR_AGENT_ID"
        data-btn-position="bottom-right"
        data-widget-btn-color="#6366f1"
        defer>
    </script>
    ```
  </Step>

  <Step title="Paste it into your website">
    Paste the code just before the closing `</body>` tag of your site, on every page where the chat should appear. Most site builders have a place for this, such as **Footer code** or **Custom code**: see [Website platforms](/docs/agents/website-platforms).
  </Step>

  <Step title="Check your site">
    Open your website. The chat bubble appears in the corner, and the greeting pops up next to it. Click the bubble and ask a question.

    <Frame>
      <img src="https://mintcdn.com/easy-peasyai/9Brw5At2juy5r5tl/images/agents/preview-bubble.webp?fit=max&auto=format&n=9Brw5At2juy5r5tl&q=85&s=5b2c85fa9e79c0823c4dea19f26aa7be" alt="A sample web page with the agent's chat bubble at the bottom right and its greeting, Welcome to Example Yoga Studio! How can I help you?, next to it" width="1600" height="958" data-path="images/agents/preview-bubble.webp" />
    </Frame>
  </Step>
</Steps>

The style choices on this page aren't saved: they only build the snippet. To change the bubble later, choose the new style and replace the code on your site. The name, greeting, and colors inside the chat come from [**Appearance**](/docs/agents/appearance) and update without changing the code.

<Frame>
  <img src="https://mintcdn.com/easy-peasyai/9Brw5At2juy5r5tl/images/agents/website-snippet.webp?fit=max&auto=format&n=9Brw5At2juy5r5tl&q=85&s=3eafaa086089933ecfd5735b59281c0d" alt="Install snippet with a Copy button, Shareable link with the agent's hosted chat URL, and Iframe embed with an iframe code" width="1400" height="907" data-path="images/agents/website-snippet.webp" />
</Frame>

## Shareable link

**Shareable link** is a chat page hosted by Easy-Peasy.AI, at `https://bots.easy-peasy.ai/bot/YOUR_AGENT_ID`. Open it or copy it with the buttons next to it. Share it anywhere you'd share a link, or turn it into a QR code.

## Iframe embed

**Iframe embed** puts the chat inside a page instead of floating over it. Copy the code and paste it where the chat should appear. To make it fill its space on every screen size, set the width to 100%:

```html theme={null}
<iframe
  src="https://bots.easy-peasy.ai/bot/YOUR_AGENT_ID?mode=embedded"
  width="100%"
  height="600"
  allow="microphone">
</iframe>
```

Keep `allow="microphone"` so visitors can use voice input and voice calls.

## Your Agent ID

**Your Agent ID** identifies your agent in embed codes, the [WordPress plugin](/docs/agents/website-platforms#wordpress), [Zapier](/docs/agents/integrations#zapier), and the [REST API](/docs/agents/integrations#rest-api).

## Control the chat from your website's code

Developers can open, close, and hide the chat from their own code, and pass the signed-in visitor's name and email to the agent. See [Chat widget for developers](/docs/developers/chat-widget).

<AccordionGroup>
  <Accordion title="The chat bubble doesn't appear">
    * Check that the code is before `</body>` and that you published your site.
    * In [**Settings**](/docs/agents/settings), **Is agent publicly available?** must be on.
    * If you set **Allowed Domains**, your website's domain must be in the list.
    * If your site uses a Content Security Policy, allow `https://bots.easy-peasy.ai` for scripts and frames.
  </Accordion>

  <Accordion title="The chat opens but says it can't answer">
    The agent may be paused because your plan's allowance ran out. See [Limits and usage](/docs/agents/limits-and-usage#when-an-allowance-runs-out).
  </Accordion>

  <Accordion title="The greeting pop-up stopped showing">
    After a visitor closes the pop-up or opens the chat, it stays hidden for that visitor for 24 hours. To change when it shows, or turn it off, use **Auto show initial messages pop-ups after (in seconds)** on [**Appearance**](/docs/agents/appearance).
  </Accordion>
</AccordionGroup>

<Columns cols={2}>
  <Card title="Website platforms" icon="wordpress" href="/docs/agents/website-platforms">
    Steps for WordPress, Wix, Squarespace, and Webflow.
  </Card>

  <Card title="Appearance" icon="palette" href="/docs/agents/appearance">
    Name, greeting, and colors inside the chat.
  </Card>
</Columns>