Customization
The Customization sub-tab lets you style how your product tour widget looks and sounds. 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
Set the widget background color. Two modes via the Solid / Gradient tabs at the top of the popover.
Solid
A full color picker:
- 2D color area — pick saturation and brightness
- Hue slider — pick the base hue across the color spectrum
- Opacity slider — adjust transparency
- Hex code — shows the current hex value; the swatch and eyedropper button let you pick a color from anywhere on screen (browser support required)
Gradient
Switch to Gradient to render the widget background as a linear gradient between two color stops. The popover extends with gradient-specific controls:
- Gradient bar — a horizontal bar with two handles, one per color stop. Click a handle to edit that stop; the 2D area, hue and opacity controls below apply to the selected stop.
- Hex code — two rows (one per stop), each with a swatch, the hex value, and an eyedropper button.
- Gradient rotation — slider from
-180to+180degrees. Controls the angle of the gradient. - Animate gradient — toggle (off by default). When enabled, the two colors smoothly animate in a loop for a subtle motion effect.
When switching from Solid to Gradient for the first time, the gradient is pre-filled with the Told brand blue to white (#1E266D → #FFFFFF).
Radius
Set how rounded the widget corners are. Four options:
| Option | Description |
|---|---|
| Sharp | No rounding — square corners |
| Small curve | Slight rounding |
| Large curve | Noticeably rounded corners (default) |
| Round | Maximum rounding |
The selected option is applied to the widget container and propagates to inner elements (avatar, buttons, progress bar).
Theme
Two options for the text color:
| Theme | Description |
|---|---|
| Light (default) | Light text on dark backgrounds |
| Dark | Dark text on light backgrounds |
There is no free color picker for the text — only these two themes.
Overlay
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.
Sound design
Play short sounds at key moments in the tour. The popover has three rows — Intro, Buttons, Outro — each with a dropdown to pick a sound and a play button to preview it.
| Event | When it plays |
|---|---|
| Intro | Once, when the product tour first appears on screen |
| Buttons | Every time the user advances to the next step (Next or Previous) |
| Outro | Once, when the product tour closes |
Each dropdown offers a library of short sounds to pick from, plus a None option to disable the sound for that event. All three default to None.
Use the play button next to a dropdown to preview a sound before picking it. Set Intro only if the tour is meant to grab attention; Buttons works best with subtle sounds since it plays repeatedly.
Block Closing
A single toggle (off by default). When enabled, the close (×) 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
A single toggle (off by default). When enabled, the "told" logo at the bottom of the widget is removed.
This option is plan-locked — it requires the Expert plan or higher. On lower plans, the toggle is disabled and the Told badge always appears.
Coming soon
Three sections appear in the sidebar with a Soon badge — they are visible but not editable yet:
| 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 |