# Install the widget on any website

> Paste one script tag before the closing body tag to add the AgentMySite chat to any website.

Source: https://agentmysite.com/docs/guides/install/html/

Add the chat widget to any website by pasting one `<script>` tag. This works for static HTML, server-rendered pages, and site builders or CMSs that let you add custom code before `</body>`.

## Before you begin

- [Create your site](/docs/get-started/quickstart/#2-create-your-site) in the admin panel.
- Add every hostname your pages are served from under **Site Settings** > **Allowed domains**. The widget doesn't appear on any other domain.
- [Add some content](/docs/guides/content/upload-documents/), so the assistant has something to answer from.

## Copy your embed snippet

<Steps>

1. Sign in to [app.agentmysite.com](https://app.agentmysite.com).

2. Select **Site Settings** in the sidebar. Under **Site key & embed snippet**, select **Copy**.

   You can also copy the same snippet from the **Dashboard**.

</Steps>

![The Site key and embed snippet section showing the site key and the full script tag with a Copy button](../../../../assets/screenshots/embed-snippet.png)

The snippet looks like this, with your own site key in place of `YOUR_SITE_KEY`:

```html title="Embed snippet"
<script async src="https://widget.agentmysite.com/loader/widget.js" data-site-key="YOUR_SITE_KEY" data-api-base="https://api.agentmysite.com" data-iframe-origin="https://widget.agentmysite.com"></script>
```

Copy it from the admin panel rather than retyping it, so the site key is exact.

## Add the snippet to your pages

<Steps>

1. Open the HTML template that's shared by all your pages, such as a layout, footer include or theme file.

2. Paste the snippet just before the closing `</body>` tag:

   ```html title="index.html" ins={4}
   <body>
     <!-- your page content -->

     <script async src="https://widget.agentmysite.com/loader/widget.js" data-site-key="YOUR_SITE_KEY" data-api-base="https://api.agentmysite.com" data-iframe-origin="https://widget.agentmysite.com"></script>
   </body>
   ```

3. Publish your changes.

</Steps>

To show the widget on only some pages, paste the snippet on those pages only.

The script loads asynchronously, so it doesn't slow down your page.

## Check that it works

<Steps>

1. Open a page on one of your allowed domains. A chat button appears in the bottom-right corner.

2. Select it and ask a question your content answers.

3. In the admin panel, the **Dashboard** shows **Widget installed** after the widget starts on an allowed domain for the first time.

</Steps>

If the button doesn't appear, see [Troubleshooting](/docs/guides/troubleshooting/).

## Snippet attributes

The snippet from the admin panel already has the required values. You can add the optional attributes yourself.

<ApiTable
  caption="Embed attributes"
  rows={[
    { name: 'data-site-key', type: 'string', required: true, description: 'Your site key, from the admin panel. Without it the widget doesn\'t load.' },
    { name: 'data-api-base', type: 'URL', default: 'https://api.agentmysite.com', description: 'The AgentMySite API the widget talks to. Keep the value from your snippet.' },
    { name: 'data-iframe-origin', type: 'URL', default: 'the value of data-api-base', description: 'Where the chat window loads from. Keep `https://widget.agentmysite.com` from your snippet; if you remove it, the chat window can\'t load.' },
    { name: 'data-customer-id', type: 'string', description: 'Optional. Your own ID for a signed-in visitor, shown with their conversations in the admin panel.' },
    { name: 'data-customer-name', type: 'string', description: 'Optional. The signed-in visitor\'s name, shown in Conversations.' },
    { name: 'data-customer-email', type: 'string', description: 'Optional. The signed-in visitor\'s email address, for your reference in the admin panel.' },
    { name: 'data-single-conversation', type: '"true"', description: 'Optional. Shows only the conversation this browser holds and hides the list of past conversations.' },
  ]}
/>

<Aside type="caution">
The `data-customer-*` values come from the visitor's browser, so AgentMySite treats them as labels only. Never use them to grant access to anything, and don't put secrets in them.
</Aside>

If your site is a single-page app, see [Install in a single-page app](/docs/developers/javascript-api/#install-in-a-single-page-app).

## Content Security Policy

If your site sends a `Content-Security-Policy` header, allow the AgentMySite hosts:

```text title="Content-Security-Policy"
script-src  'self' https://widget.agentmysite.com;
connect-src 'self' https://api.agentmysite.com;
frame-src   https://widget.agentmysite.com;
```

Without `connect-src`, the widget fails silently because it can't reach the API.

## Next steps

- [Customise the widget](/docs/guides/customise/)
- [Install on Shopify](/docs/guides/install/shopify/)
