Widget

What is the widget?#

The HyperHelp widget is a lightweight chat interface that you embed on your website. Visitors click a floating button, a chat panel opens, and they can ask questions about your content. Answers are sourced directly from your crawled pages and Q&A entries, with optional source citations.

The widget runs in a Shadow DOM — it won't interfere with your site's styles, and your styles won't affect it.

Installing the widget#

Add the following snippet to your website:

<script
  src="https://app.hyperhelp.ai/widget/chat.js"
  async
  onload='window.HyperhelpWidget.init({ "chatbotKey": "YOUR_WIDGET_KEY" })'
></script>
  1. Go to your chatbot's Settings > Install tab.
  2. Copy the embed snippet — your widget key is already filled in.
  3. Paste it before the closing </body> tag on every page where you want the widget.
  4. That's it — the widget loads asynchronously and won't slow down your page.

Tip: You can also paste the snippet into your site's template or layout file so it appears on every page automatically.

Finding your widget key#

Your widget key is shown in Settings > Install. It uniquely identifies your chatbot. Keep it in your embed snippet — the widget won't load without it.

Allowed websites (domain allowlist)#

By default, the widget only works on domains you've explicitly allowed.

Go to Settings > Install > Allowed websites and add one domain per line, including the protocol:

https://example.com
https://docs.example.com
http://localhost:3000

If a domain isn't on the list, the widget won't load on that site.

Warning: Don't forget to add your production domain to the allowlist before going live. Without it, the widget will show an error to visitors.

Regenerating your widget key#

If your widget key is compromised, you can regenerate it from Settings > Install. After regenerating, update the embed snippet on your website with the new key. The old key stops working immediately.

What's next?#