Guided tours
A tour is a multi-step walkthrough that guides users through your product, one step at a time, with a spotlight that follows the action.
Tours are the ideal fit for the builder extension: open your live app, click each element you want a step to point at, and the extension captures a robust selector for it - no CSS. Save the draft, then theme and publish it in the dashboard.
When to use a tour
Use a tour for a first-run welcome, to introduce a multi-step workflow, or to walk users to their aha moment. If you only need to explain one thing, a tooltip is lighter.
Building a tour
- Create a flow of type Tour and open the editor.
- Add steps in the Content tab. Each step has a title, a body, and a target element.
- Point each step at an element - type a CSS selector, or capture it with the browser extension.
- Choose how each step advances: a Next button, the user clicking the target, or your app calling the API.
Options
| Option | What it does |
|---|---|
| Placement | Where the step card sits relative to its target (auto, top, bottom, left, right). |
| Advance on | Next button, clicking the target, or a manual call from your app. |
| Page dim | Dim the rest of the page to focus attention on the step. |
| Welcome modal | An optional intro card shown before step one. |
| Back / skip / progress | Built-in navigation so users can move through the tour. |
Robust targeting of elements
Tours anchor to elements on your page. Onbixo resolves each target from ranked selectors with a bounded retry, so a step keeps working even as your app re-renders. If an element cannot be found, the step is skipped rather than breaking the tour.
Keep tours short. A focused three-to-five step tour that ends at first value beats a long one people abandon. Use analytics to find the step where people drop off.
Next: style it in Appearance & theming, choose who sees it in Targeting, and set when it shows in Frequency & triggers.
Last updated: Aug 5, 2026