05 of 13
Installing the Widget
Add your AI Chat Agent to any website by pasting one snippet. No coding knowledge required.
Get your snippet
Open your site in the dashboard and go to the Installation tab. You'll see your exact snippet and your website ID. It looks like this:
Replace YOUR_WEBSITE_ID with the ID shown on the Installation tab. The copy button on that tab gives you the snippet with your real ID already filled in. That's the recommended way to grab it, so there's nothing to edit by hand.
The Installation tab hides itself once your widget has checked in from your live site. If you don't see it, your agent is already installed and reporting home.
Where to paste it
Paste the snippet just before the closing </body> tag on every page where you want the agent to appear. Don't put it in <head>. A chat button appears in the corner of the page; visitors click it to start a conversation.
That snippet is the only thing you install. You don't configure colors, position, or the welcome message in the code. All of that lives in the dashboard's appearance editor. See Customizing Your Agent.
Allowed origins (localhost, staging, extra domains)
For security, your agent only runs on origins you've approved. Your primary website (and all of its subdomains, e.g. www.yoursite.com, app.yoursite.com) is allowed automatically.
To run the widget anywhere else, add that origin under Settings → General → Allowed origins. This covers a staging environment, an alternate domain, or http://localhost:PORT while you test on your own computer:
- Open your site → Settings → General.
- Under Allowed origins, add the full origin, including the scheme, for example
https://staging.yoursite.comorhttp://localhost:3000. - You can add up to 10 additional origins.
This is what makes local and staging testing work: add http://localhost:PORT first, load your test page, and the widget runs there too.
Platform-specific instructions
WordPress
- Log in to WordPress admin.
- Go to Appearance → Theme File Editor (or use a plugin like Insert Headers and Footers).
- Paste the snippet just before
</body>in your theme'sfooter.php, or in the plugin's Footer Scripts field. - Save. The widget appears on all pages.
Squarespace
- Go to Settings → Advanced → Code Injection.
- Paste the snippet in the Footer field.
- Click Save. The widget appears site-wide.
Wix
- In the Wix Editor, click Add → Embed → Custom Code.
- Paste the snippet in the code field.
- Set placement to Body - End so it loads before
</body>. - Apply to All Pages and publish.
Shopify
- In Shopify admin, go to Online Store → Themes.
- Click Actions → Edit Code on your active theme.
- Open
Layout/theme.liquidand paste the snippet just before</body>. - Click Save.
Plain HTML sites
Paste the snippet just before </body> in every page. If you use a shared footer template or include file, adding it there once covers every page that uses it.
How the widget behaves
- It loads as a small floating button fixed to the corner. It does not affect your page layout.
- A visitor's conversation is saved in their browser, so if they close and return later their thread is still there.
- On narrow mobile screens the chat opens as a full-screen overlay instead of a floating panel.
Removing the widget
Delete or comment out the snippet on your site. The widget disappears immediately. Your conversations and knowledge base are preserved and return if you reinstall.
Troubleshooting
The widget isn't appearing.
- Confirm the snippet is before
</body>, not in<head>. - Confirm
YOUR_WEBSITE_IDwas replaced with your real ID (or that you copied the snippet from the Installation tab). - If you're on a staging or local URL, confirm that origin is added under Settings → General → Allowed origins.
The widget appears but clicking does nothing.
- Try a hard refresh (Ctrl+Shift+R / Cmd+Shift+R).
- Confirm the page's origin is allowed (see above).
- If it persists, check your browser console and contact us.