Everything about how the widget looks and every word it says lives in Settings > Design & copy. Changes appear instantly in the live preview beside the controls, and you can click any part of the preview to jump straight to the controls for it.
The approach is deliberate: you set a brand color, and the rest of the widget derives from it. You only reach for individual controls when you want something specific.
1. Start with a look#
Presets are complete starting points — Basic, HyperHelp, HyperHelp Neon, Ocean, Forest, Sunset, Lagoon and Aurora. Pick one and change anything you like afterwards. Shuffle picks a random combination if you would rather explore than decide.
Basic is the plain starting point. HyperHelp is the palette you see on our own homepage, and HyperHelp Neon is the same lime green with the whole panel washed in it.
2. Make it yours#
Brand color is the setting that drives everything else. Buttons, message bubbles, accents and the citation chips and tiles are all derived from it.
Surface style decides how much of your brand color the panel background carries:
| Style | Result |
|---|---|
| Light | A clean white panel with a barely-there tint of your brand |
| Tinted | Every surface visibly washed with your brand |
| Dark | Near-black surfaces nudged toward your brand |
| Ink | Neutral near-black surfaces, with your brand kept for buttons and accents |
The same step covers corner roundness (Sharp, Soft, Round or Pill), panel width (360–420 px works well), the launcher icon, the pulse indicator — the attention dot on the launcher button — and the status badge shown in the header, such as "Online".
3. Fine-tune#
Every zone follows your brand automatically, so this step is optional. Open a zone only when you want to override something specific:
Launcher button, Header, Status badge, Messages, Sources, Suggested replies, Composer, Empty state, and Errors & status messages.
Each zone holds two kinds of control:
- Wording — the exact text the widget shows. Leave a field untouched to keep the shipped default, shown greyed out as the placeholder. ✕ clears a field to nothing, which is how you get an icon-only launcher or a header with no subtitle. ↺ restores the default.
- Colors and sizes — marked AUTO while they follow your brand, and SET once you override them. The ↺ beside a SET control returns it to AUTO.
Reset all to auto returns every override in the section at once.
Tip: The launcher's font size scales its icon too, so one control makes an icon-only launcher larger or smaller. The icon always takes the label color.
Note: Changing your brand color or surface style resets the lead capture form's colors to match the new design. That is deliberate — the form is meant to look like the rest of your widget.
Source citations#
When Show sources in answers is on (Settings > General), citations appear in two places at once.
Inside the answer, a small numbered chip sits at the end of each sentence the chatbot backed with a source. Visitors hover or tab to a chip to see which page it points at, and click it to open that page in a new tab.
Below the answer, the full reference list still appears as its own section: a heading such as "Sources (2)", then one row per page. Each row is led by a tile showing its reference number, so the chip marked 1 and the first row are the same page. The chip and the tile wear the same design — a soft wash of your brand color carrying the number — so a visitor recognises the pair at a glance.
Numbering follows the order the sources are first mentioned in the answer, so the list reads top to bottom in the same order a visitor meets the citations. Numbers appear as the answer is written and never change afterwards.
The chips arrive live, sentence by sentence, but the reference list below waits until the answer is finished before it appears. That way the text a visitor is reading stays where it is instead of being pushed up the panel each time another page is cited.
The heading is yours to change under the Sources zone. Writing :count in it inserts the number of cited pages — the default is Sources (:count). A heading without :count is shown exactly as written.
Opening and closing the list#
The heading doubles as a toggle. The newest answer shows its sources open, so a visitor sees where the reply came from without doing anything. Clicking the heading — or reaching it by keyboard and pressing Enter or Space — folds the list away and back.
When the visitor asks their next question, earlier lists fold up on their own, leaving only the newest answer's sources open. A visitor who re-opens an older list keeps it open until they send their next message.
The copy button sits directly under each answer, above its sources, so copying a reply is one click away no matter how many pages it cites. Like the reference list, it appears once the answer is finished rather than while it is still being written.
How citations pick up your design#
Citations are not styled separately — they follow the choices you already made.
Color follows your brand color. The numbered chips in an answer and the number tiles on the reference rows are both a soft wash of it with the number itself in full strength. Pointing at a chip or reaching it by keyboard deepens the wash and switches the number to your text color, so it stays readable whatever brand you picked.
Tip: A very pale brand on a light widget — or a very dark one on the Ink surface — leaves the numbers faint at rest, since they are your brand color shown against a wash of itself. If the numbers are hard to make out, a brand color with more contrast against your panel fixes both the chips and the tiles at once.
Corners follow your corner roundness setting. Set the widget to Pill and the reference rows, their number tiles and the numbered chips all round with it; set it to Sharp and they square off together. Each keeps its own proportion, so a full-width row and a chip the size of a word never look like two different designs.
Hover highlights are worked out from the colors underneath them. A row on a light background darkens slightly when a visitor points at it; on a dark background it lightens instead. The same applies to the sources heading and to the chips inside the answer, and each one is measured against its own background — so if you set a Sources background of your own in the Fine-tune step, the highlight adjusts to it rather than staying a fixed grey.
Keyboard visitors get the same highlight plus a focus ring, so nothing that shows on hover is hidden from them.
If you need a different highlight, you can set one from the embed code — see the developer reference.
Intro message and suggested questions#
The opening message and the tappable suggestion chips beneath it are set in Settings > General > First impression, not here — they are what the chatbot says, rather than how it looks.
Three short suggested questions work best; more starts to look like a menu. You can have up to five.
Style overrides in the embed code#
For per-page or per-site overrides without touching the dashboard, pass styleOverrides in your embed snippet. This is useful when the same chatbot serves several sites with different branding.
See the developer reference for the full list of override keys, and for customCss if you need to go further.