Customization
The Customization sub-tab lets you style how your product tour widget looks. You'll find it next to Steps in the product tour editor (Content > Customization).
Layout
The Customization screen has two areas:
- Sidebar (left) — a list of customization sections. Click any section to open its settings in a popover.
- Live preview (right) — a mockup of your product tour widget that updates in real time as you change settings. It shows a card-style step with an avatar, progress bar, Previous/Next buttons, and Told branding.
Avatar
"Add a personal touch by displaying an avatar and name in your widget."
Toggle to show or hide an avatar in the widget header. On by default.
When enabled, two fields appear:
| Field | Description |
|---|---|
| Avatar image | A circular placeholder with an Edit button to upload a custom image (e.g., a photo or logo) |
| Name | A text field for the display name (default: "John Doe from Hello World"). This appears next to the avatar in the widget header. |
Color
"Customize the background color of your widget."
A full color picker to set the widget's background color:
- 2D color area — pick saturation and brightness
- Hue slider — pick the base hue across the color spectrum
- Opacity slider — adjust transparency
- Hex code — enter a precise color value (e.g.,
#1E266D) - Color swatch — shows the current color with an edit button
The preview updates in real time as you adjust the color.
Theme
"Choose between dark and light text theme for your widget."
Two options:
| Theme | Description |
|---|---|
| Dark | Dark text on light backgrounds |
| Light | Light text on dark backgrounds (default) |
There is no free color picker for the text — only these two themes.
Overlay
"Add a background overlay to focus attention on the widget."
A single toggle (off by default). When enabled, a semi-transparent overlay dims the rest of the page behind the widget, drawing the user's attention to the product tour step.
Block Closing
"Prevent users from closing the widget during the tour."
A single toggle (off by default). When enabled, the close (x) button is removed from the widget, preventing users from dismissing the tour before completing it.
Combine Block Closing with Overlay to create a mandatory tour experience where users must complete all steps before continuing.
Hide Branding
"Hide the Told branding from your widget for a white-label experience."
A single toggle (off by default). When enabled, the "told" logo at the bottom of the widget is removed.
This option may be plan-locked — it may require the Expert plan or higher. On lower plans, the toggle may be disabled and the Told badge always appears.
Coming soon
The following customization options are planned but not yet available:
| Option | Description |
|---|---|
| Action Buttons | Customize the style and behavior of your action buttons |
| Progress Bar | Configure the appearance of the step progress bar |
| Shadow | Add a drop shadow to the widget for depth and visual contrast |