Configuration

Configuration reference

These are the fields that change how the deployed widget looks and behaves.

Field	Effect
`api.baseUrl`	Origin the widget calls for chat, catalog data, streaming, and telemetry.
`api.tenantId`	Identifies your organization on every request. Sent as a request header, and as a query parameter on the streaming connection.
`brand.name`	Used to build the default button label when `assistantName` is not set.
`brand.aiName`	The assistant’s display name inside the panel.
`assistantName`	Text on the pill button and the panel header, and the panel’s accessible label. Defaults to `Ask <brand.name>`.
`brand.markSVG`	Logo markup shown on the pill button and in the panel header.
`brand.color`	Primary accent. Drives the pill border, logo tint, and the theme’s primary color.
`brand.colorDark`, `brand.accent`, `brand.sand`	Supporting palette colors for the panel’s theme.
`brand.faviconUrl`	Logo shown on the chat’s welcome screen.
`brand.fontFamily`	Optional font override. When omitted, the widget inherits the font of your page’s `body`.
`autoOpen`	Set to `false` to stop the panel opening by itself. When omitted or `true`, the panel opens automatically shortly after load.

api.tenantId is an identifier, not a secret. See Security and data.

Panel behavior

A pill button is fixed to the top right of the viewport. On narrow viewports it moves closer to the corner.
Clicking it slides in a panel anchored to the right edge, roughly 680px wide, and full width on screens under 700px.
A fullscreen toggle in the panel header expands the panel to the full viewport width; the same button collapses it back.
Pressing Escape exits fullscreen if the panel is expanded, and otherwise closes the panel.
Clicking the dimmed backdrop, or the close button, closes the panel.
While the panel is open, scrolling on the underlying page is locked, and the visitor’s scroll position is restored on close.

Closing the panel does not discard the conversation. Reopening returns the visitor to where they left off.

The button position, the panel width, and the BETA badge on the button are fixed and cannot be configured. Only one widget instance runs at a time; initialising again tears down the previous instance first.

Isolation from your page

The widget mounts into a shadow DOM root attached to a single container element appended to your page. All of its styles are injected inside that shadow root. This means the widget cannot inherit or leak CSS from your site, with the deliberate exception of the font family, which it inherits so the button blends with your typography. The container is positioned with the maximum stacking order so it renders above your own fixed headers and overlays. Once the script has loaded, a small API is available on window:

window.__askWidget.open();   // open the panel
window.__askWidget.close();  // close the panel
window.__askWidget.config;   // the configuration currently in use

You can also reset the conversation and return the panel to the chat view by posting a message to the page:

window.postMessage({ type: "ASK_WIDGET_CLOSE" }, "*");

For hosts that want to place the assistant inside their own container rather than use the built-in pill and panel, the bundle also exposes window.HermanWidget.mount(element, config) and window.HermanWidget.unmount().

Get Started

Merchant Portal

Support

Configuration reference

Panel behavior

Isolation from your page

Controlling the widget from your own code

​Configuration reference

​Panel behavior

​Isolation from your page

​Controlling the widget from your own code

Configuration reference

Panel behavior

Isolation from your page

Controlling the widget from your own code