# Add the chat widget to your website

> Create a widget deployment and paste one script tag into your site.

The chat widget puts your AI agent on any website with one script tag. You need an enabled AI agent before you start.

## 1. Create a widget deployment

1. Open **Deployments** and select **Create Deployment**.
2. Under **Channel**, pick **Website widget**. The channel can't be changed later.
3. Under **Basics**, enter a **Name**, such as "Website chat". The **Link** fills in from the name. It's the address of the deployment's own page, such as `website-chat.help.chat`, where you can preview the widget.
4. Choose the **AI Agent** that should answer. It can't be changed later: to switch agents, create a new deployment.
5. Keep **Live** on under **Availability** and select **Create Deployment**.

The deployment opens on its **Settings** tab. It has three tabs: **Settings** for placement, tabs, allowed websites and limits, **Chat widget** for how the chat looks and behaves, and **Install** for the code.

## 2. Copy the snippet

Open the deployment's **Install** tab, or choose **Installation guide** from its row menu in **Deployments**. The **Quick install (auto-mount)** snippet looks like this, with your own values filled in:

```html
<script
  src="https://cdn.help.ai/sdk/js/elements/1.12.0/elements.js"
  data-public-key="agent_pk_..."
  data-ai-agent-deployment-id="..."
  defer
></script>
```

Always copy it from the **Install** tab, so the key, the ID and the widget version are exact.

## 3. Paste it into your site

Add the snippet inside `<head>` or just before `</body>` on every page where the widget should appear.

| Platform | Where to paste |
| --- | --- |
| Shopify | **Online Store** → **Themes** → **Edit code** → `theme.liquid`, before `</head>` |
| WordPress | A header-and-footer scripts plugin, or your theme's `header.php` |
| Webflow | **Site settings** → **Custom code** → **Head code**, then publish |
| Squarespace | **Settings** → **Advanced** → **Code Injection** → **Header** |
| Wix | **Settings** → **Custom Code**, placed in the head on all pages |

Reload your site and the chat bubble appears in the corner.

## Other ways to install

The **Install** tab has three more snippets:

| Snippet | Use it when |
| --- | --- |
| **ES module with custom attributes** | You want a `<web-ai-chat>` element, with some options set as attributes |
| **Programmatic install** | Your own JavaScript adds the script, for example only after a visitor accepts cookies |
| **NPM (React / build pipeline)** | You bundle the widget with your app. See [Add the widget to a React app](https://docs.help.ai/customize-and-extend-the-widget/add-the-widget-to-a-react-app) |

With **Embed in an iframe** turned on (**Settings** → **Placement**), the **Install** tab shows **Embed with an iframe** code for the deployment's hosted page instead. It needs the deployment's **Link**.

## Keep your keys straight

The **Install** tab's **Parameters** card lists the **Deployment ID**, **Public key**, **Link**, **Secret key** and **Hosted page** address, each with a copy button.

| Value | Where it goes |
| --- | --- |
| Public key | In the snippet on your website |
| Deployment ID | In the snippet on your website |
| Secret key (masked until you select the eye icon) | Only on your own server, never in website code |

## If your site has a Content Security Policy

A strict Content Security Policy blocks the widget until you allow it. Add these sources to your policy:

```text
script-src https://cdn.help.ai;
connect-src https://help.ai;
style-src 'unsafe-inline';
img-src data: blob: https:;
font-src https:;
media-src blob:;
```

| Directive | Why the widget needs it |
| --- | --- |
| `script-src` | The widget's script, from `cdn.help.ai` |
| `connect-src` | Messages and replies, to and from `help.ai` |
| `style-src` | The widget's own styles, which stay inside the widget |
| `img-src` | Icons, file previews and other images |
| `font-src` | A web font you set under **Theme** |
| `media-src` | Voice input |

- If your policy uses nonces, add your page's nonce to the widget's `<script>` tag as `nonce="..."`.
- To test first, send the policy as `Content-Security-Policy-Report-Only`. The browser reports what it would block, without blocking it.

## Not showing up?

- Check that the deployment is **Live** and that its AI agent is enabled.
- If the deployment lists **Allowed websites**, your site's exact address must be one of them, such as `https://www.example.com`.
- In your browser's developer tools, a `404` on the `handshake` request means one of the above, or a key or ID that doesn't match. The answer is the same for each, so check them all.
- Ad blockers and some company networks block `help.ai`. Try another browser or network.
- If your site sets a Content Security Policy, look for blocked requests in the browser console. See the section above.
- Site builders often need you to publish before code changes go live.

<Tip>
Changes you make to the deployment, like colors or welcome messages, reach the widget the next time it loads. You don't need to change the snippet.
</Tip>

## Next steps

- [Customize how the widget looks and behaves](https://support.help.ai/deployments-and-the-widget/customize-the-widget)
- [Secure a deployment: websites, limits and history](https://support.help.ai/deployments-and-the-widget/secure-your-deployment)
- [Verify signed-in users](https://docs.help.ai/customize-and-extend-the-widget/verify-signed-in-users), so signed-in customers keep their chats on every device. The **Install** tab's card of the same name has the code.