HyperHelp gives you full control over how the chat widget looks on your site. Start with a theme preset and fine-tune from there, or style everything from scratch.
Theme presets#
HyperHelp includes built-in theme presets to get you started quickly:
- Default — Clean and neutral
- Ocean — Cool blue tones
- Forest — Natural green palette
- Sunset — Warm orange hues
- Lagoon — Teal and aqua
- Aurora — Purple and violet
Select a preset from Settings > Design. You can further customize any preset — it's just a starting point.
Core styling#
These settings cover the most common customizations:
| Setting | Description |
|---|---|
| Brand color | The primary color used for buttons, the chat bubble, and accents. |
| Corner roundness | Controls border radius across the widget (from sharp to fully rounded). |
| Attention pulse | An animated dot on the floating button that draws attention. Toggle on/off and set the pulse color. |
Advanced styling#
For fine-grained control, expand the Advanced section in Settings > Design.
Backgrounds:
- Panel background
- Header background
- Footer background
- Bot message bubbles
- User message bubbles
- Input field
Text colors:
- Title
- Subtitle
- Bot message text
- User message text
- Input text
- Footer text
Text sizes:
- Title, subtitle, and message text
Buttons and interactions:
- Suggestion chip style
- Hover state colors
- Send button color
Lead form styling:
- Form background, headline, description, labels, input fields, and submit button
Tip: Use your brand's primary color as the starting point, then adjust backgrounds and text colors for contrast. The widget enforces WCAG accessibility standards automatically.
Intro message and suggestions#
Set an intro message in Settings > General. This is the first message visitors see when they open the widget.
Add suggested questions (one per line). They appear as clickable chips below the intro message, giving visitors an easy starting point.
Style overrides via embed code#
For per-page or per-site overrides without changing the dashboard settings, pass styleOverrides in your embed snippet. This is useful when you host the widget on multiple sites with different branding.
See the Developer reference for the full list of override keys and usage examples.