Chat widget
How do I add the chat widget to my website?
Section titled “How do I add the chat widget to my website?”Copy the snippet from your bot’s Embed tab in the dashboard and paste it into your site, just before the closing </body> tag:
<script src="https://YOUR-DEPLOYMENT/widget.js" data-widget-key="YOUR_WIDGET_KEY" async></script>Then add your site’s domain to the bot’s allowed domains on the Setup tab. The widget refuses to answer on any site that is not listed. See Security.
Options
Section titled “Options”| Attribute | Purpose |
|---|---|
data-widget-key |
Required. Identifies your bot. |
data-title |
Panel title. Defaults to the bot’s name. |
data-color |
Accent colour as a hex value, such as #ff6600. Defaults to your brand colour. |
data-turnstile-sitekey |
Turnstile site key. Defaults to the deployment’s TURNSTILE_SITE_KEY. |
Brand colours
Section titled “Brand colours”On the Embed tab, enter your site’s domain and choose Read my site. AnswerKit reads your logo, brand colour, and fonts from your home page, and the widget uses the colour automatically. If nothing can be read, it falls back to a neutral blue.
What visitors see
Section titled “What visitors see”- Answers stream in as they are written, with links to the pages they came from.
- Thumbs up and down on each answer. A thumbs down offers to pass the question to a person.
- When a person is needed, a short consent note and an email field. Nothing is sent until the visitor agrees.
Technical notes
Section titled “Technical notes”- The widget is about 5 KB gzipped and renders inside a Shadow DOM, so your site’s styles do not affect it and its styles do not leak into your site.
- It only talks to the AnswerKit deployment its script was loaded from.
- The widget is MIT licensed, so embedding it needs no legal review.
Rotating the widget key
Section titled “Rotating the widget key”If a key is being misused, choose Issue a new key on the Embed tab. The old key stops working immediately, so update the snippet on your site right after.