Website widget

The website widget is Harriet's embedded chat for pages you control: your marketing site, product docs, or a public help center. Visitors ask questions without signing into Harriet, and you decide what Harriet knows and can do on that page.

How the widget works

The widget is a small chat panel, typically in the bottom corner of the page. Your site loads Harriet's embed script and calls HarrietChat.init with your customer id. Each widget you create in the console has a widget id; when your page sends a signed widgetId, Harriet merges in the defaults you saved for it: title, colors, position, initial message, instructions, and escalation routing.

Traffic is treated as a public session. Answers come only from the knowledge and skills you allow for that widget, not from the full private employee experience. If the visitor needs a person, Harriet can raise a ticket routed to the widget's escalation groups.

Create and configure a widget

1. Add the widget. Open Channels & embed → Surfaces and select Add website widget. Name it (for example "Marketing site") and select Create and configure. You land on the Public widget configuration page.
2. Scope its knowledge. On the Data and skills tab, tick Data groups (knowledge / documents). Checking a group adds this widget's public document id to the group's specialist channel list, which controls which knowledge Harriet can use for this widget. Publish only what is safe and useful on the open web.
3. Choose which skills answer. In the Skills (this widget) table, turn on only skills appropriate for unauthenticated visitors: product Q&A yes, "show my payslip" no.
4. Route escalations. On the Escalations tab, tick Escalation groups. Only groups with Ticket inbox enabled are listed. Point tickets at the right inbox: sales, support, or a partner desk.
5. Set instructions and the New case button. On the Customization tab, an optional Base prompt replaces Harriet's usual identity and instructions for this widget channel only. You can also show a "New case" button, a floating action above the chat panel, with an optional label and message prefix. The prefix is sent to Harriet but not shown to the visitor in the thread.
6. Style it. On the Appearance tab, set the Preview title, Position (Bottom right or Bottom left), an optional Initial message (supports {userFirstName}), and the Primary and Secondary colors. Match the page context so visitors know what the widget can answer.
7. Save and copy the embed. Select Save, then open the Embed snippet tab to copy your Widget ID and an example init for your pages.

Install the embed on your site

Load the CSS and JS from your Harriet host, then initialize. The Embed documentation page in the console shows this snippet with your real customer id and host filled in:

<link rel="stylesheet" href="https://YOUR_HARRIET_HOST/bots/embed/css/">
<script src="https://YOUR_HARRIET_HOST/bots/embed/js/"></script>
<script>
  HarrietChat.init({
    customerId: "YOUR_CUSTOMER_ID",
    apiUrl: "https://YOUR_HARRIET_HOST/bots/api/chat/",
    title: "Ask Harriet",
    position: "bottom-right",
    primaryColor: "#2622F7",
    secondaryColor: "#FFF2E2"
  });
</script>

To pin the page to a specific widget configuration, pass widgetId, timestamp, and a signature computed on your server. If you send widgetId, you must sign it; unsigned requests with widgetId are rejected. See Embed security for the canonical string and code examples.

You can also pass browserContext: up to 5 short strings (page title, product id, section name) sent with each message so Harriet knows where the visitor is. If the widget row in Harriet has non-empty browser context strings saved, those replace what the page sends.

Allow your site's origins

The widget only works on HTTPS pages whose hostnames you explicitly allow. Open Channels & embed → Browser origins and list the hosts, comma-separated: exact hosts such as www.example.com, or *.example.com for any subdomain. Apex domains must be listed explicitly; the wildcard does not include example.com. This stops other sites from loading your widget. Details in Embed security.

Test before launch

On the widget's configuration page, select Load preview to try the widget with your saved settings before touching your site. Once embedded, if the widget does not appear, confirm the page's hostname is on the origin allowlist and check the browser console for load errors. If answers cite no documents, check that your groups include the widget's public-… specialist entry. Signature errors usually mean the signed field set does not exactly match what the page sends.