Configure Steps
After creating a product tour and adding steps in the visual editor, you configure each step's content and options from the Told app.
Open your product tour and go to Content > Steps. The editor has three areas:
- Left sidebar — lists all steps. Click a step to select it.
- Center area — the step's content (title, message, media, target)
- Right sidebar — step options (target, position, button, shape)
Step types
Each step has a type, chosen when you add it in the visual editor:
| Type | Description |
|---|---|
| Pin | A tooltip attached to a specific HTML element on the page |
| Modal | A centered overlay, not attached to any element |
The type is shown in the center area header (e.g., "Pin Standard").
Step content
Title and Message
Each step has a Title and a Message field. If you chose AI generation when saving in the visual editor, these are pre-filled with AI-generated content. Otherwise, they contain placeholder text.
The Message field is a rich text editor with Bold, Italic, Underline, and Add Link formatting options.
Click Improve in the step header to ask Cerebro (Told's AI) to refine the current title and message.
Multiple messages
Each step can have multiple messages. Messages appear as tabs (e.g., "Message 1"). Click the + next to the last tab to add another message. Users will see a paginated experience within the step.
Media
Click Add media below the message to attach an image or video to the step.
Shapes
The shape defines the visual layout of a step. Click Select next to "Shape" in the right sidebar to open the shape picker.
| Shape | Description |
|---|---|
| Standard | Guide your users by highlighting key elements of your interface. Simple, clear, and ideal for your product tours. |
| Showcase | Perfect for your ads and your product's key moments. Minimum suitable format: 470x470 |
| Compact | Ideal for quick tips and simple steps. Minimum suitable format: 240x240 |
| Video | Perfect for onboarding and product discovery. Minimum suitable format: 650x366. Tag: Youtube |
| Demo | Use rich, interactive layouts to fully showcase your product. Suitable format: 366x768. Tag: Arcade |
The shape picker shows a preview of the selected shape on the right side.
Position
For Pin steps, the right sidebar has a Position section with a 3x3 grid of dots. Click a dot to set where the tooltip appears relative to the target element:
- Top-left, Top-center, Top-right
- Middle-left, Middle-right (center is not available for pins)
- Bottom-left, Bottom-center, Bottom-right
The selected position is highlighted in blue.
Button
The Button section in the right sidebar controls what happens when the user clicks the step's action button.
Action
A dropdown with three options:
| Action | Description |
|---|---|
| Next step | Proceeds to the next step in the tour (default) |
| Close | Closes the product tour |
| Link | Redirects to a URL |
When Link is selected, additional fields appear:
| Field | Description |
|---|---|
| Link URL | The target URL |
| Open in new tab | Toggle to open the link in a new tab (on by default) |
| Redirect countdown | Delay before auto-redirect: 0, 1, 2, 3, 4, or 5 seconds |
Label
A text field to customize the button text (placeholder: "Enter next button text..."). If left empty, the default label is used.
Target
The Target section appears in the center area below the step content. It has an Important badge and contains two verification steps.
1. Verify your URL
The URL where the step appears. By default, this is the exact URL captured when you created the step.
The URL field has an operator dropdown with four options:
| Operator | Description |
|---|---|
| Is equal to | Exact match (default) |
| Contains | URL contains the specified string |
| Does not contain | URL does not contain the specified string |
| Is not equal | URL does not match exactly |
For dynamic URLs, use the Contains operator with the stable part of the URL instead of matching the full URL. You can also use * as a wildcard in the URL field.
2. Verify your CSS target
For Pin steps, this section shows the CSS selector used to find the target element. Two fields are available:
| Field | Description |
|---|---|
| ID | The HTML id attribute of the target element |
| Class Name | The CSS class(es) of the target element |
Below these fields, a Told reference identifier is displayed (format: told-{productTourID}-{stepID}). You can copy it and add it to your HTML elements for stable targeting:
<button id="told-abc123-def456">My Feature</button>
Some CSS classes are generated dynamically by frameworks (e.g., CSS Modules, Tailwind JIT) and may change between builds. Use stable IDs or the Told reference identifier for reliable targeting.
Dynamic variables
You can personalize step content using dynamic variables. Insert a variable using the {{variable_name}} syntax anywhere in a step's title or message.
When the product tour is displayed to a user, each {{variable_name}} placeholder is replaced with the matching value from the user's properties (set via the SDK's identify function). If the variable doesn't exist for that user, the placeholder is removed (replaced with nothing).
Example:
If your step title is:
Welcome {{name}}, let us show you around!
And the user has a name property set to Toto, they will see:
Welcome Toto, let us show you around!
This works in both step titles and messages. Use it together with the SDK's identify function to create personalized onboarding experiences.
Cerebro — AI assistant
At the bottom right of the editor, a Suggest by Cerebro badge appears. Cerebro is Told's AI assistant. It powers the Improve button in the step header and the AI content generation option when saving in the visual editor.