Customize the widget appearance
Preview changes live and style the Home tab hero to match your brand.
Your widget shouldn't look like a plugin bolted onto your site. Style it to match your product, and see every change reflected in a live preview before you save.
Live preview
The widget settings page embeds the real widget in a preview pane, so what you see is exactly what your users will get. Toggle between light and dark themes while you work to check both look right.
Note:
The preview reflects your saved settings. Save your changes to see them update in the preview pane.
Home tab hero backdrop
The Home tab can show a hero backdrop behind your greeting. Choose from four styles:
Style | Description |
|---|---|
Plain | A flat background color, no decoration |
Gradient | A smooth color gradient using your chosen colors |
Pattern | A subtle geometric pattern over your background color |
Image | A custom image you upload |
Pattern presets
When you choose Pattern, pick from four presets:
- Mesh
- Dots
- Grid
- Waves
Theme-aware colors
If you don't set a custom color, the backdrop automatically follows your site's light or dark theme. Custom colors you set (like a gradient's start and end) apply the same in both themes, so pick something that works in either.
Tip:
Leave colors on their defaults if you want the hero to always match your brand's primary color automatically, in both light and dark mode.
Position, tabs, and the launcher
Widget position, which tabs are enabled, and launcher behavior are configured alongside appearance in the same settings page. See Install the widget for the full configuration reference.
Next steps
- Install the widget - embed snippet and full configuration reference
- Add Messenger chat to the widget - enable the Messages tab
- Identify users - connect widget activity to real users
Was this helpful?
Your feedback shapes what we write next.