Add the chat widget to your website

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:

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

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

Other ways to install#

The Install tab has three more snippets:

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.

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:

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:;

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

Next steps#

• Customize how the widget looks and behaves
• Secure a deployment: websites, limits and history
• Verify signed-in users (opens another site), so signed-in customers keep their chats on every device. The Install tab's card of the same name has the code.