Product tours

A tour is a series of steps that point at elements on your page, or show a modal or banner. Visitors move through it with Next and Back.

Create a tour

1. In the dashboard, open Tours and create one, from scratch or from a template.
2. On the Builder tab, add steps. For a tooltip step, pick the element it points at.
3. On the Settings tab, set targeting (who sees it, on which pages). The same tab holds the launcher, the A/B test, voice narration and version history.
4. Publish.

The builder has three tabs: Builder (the steps), Settings (everything about the tour that is not one step) and Results. Save as template, Brand Kit, Unpublish and Delete are in the ⋯ menu next to Save.

The SDK fetches published tours on init() and plays the ones that match the visitor.

How steps are shown

• A tooltip step highlights the element found by the step's selector.
• The SDK scrolls the element to the middle of the screen before it places the tooltip. This also works inside scrollable panels and iframes, and it skips the animation when the visitor prefers reduced motion.
• If the element is not on the page yet, the SDK waits for it (5 seconds by default; set up to 30 seconds per step). If it never appears, the step is skipped, the skip is recorded, and the tour finishes as finished with skips instead of a clean completion. The builder marks such steps "never saw it".
• If no step in a tour can be shown, nothing is displayed and the tour is not marked as seen, because the visitor never saw it.
• Finishing or dismissing a tour marks it as seen. It is not shown again automatically.

See Multi-page tours for steps on different pages, text and role targets, event-completed steps and required steps.

Replay and launcher

Enable the persistent launcher in the Launcher section of the tour's Settings tab to show a "Replay tour" button. It stays available after the visitor finishes. You can set its screen corner. A visitor can dismiss it for good in their browser.

You can also build your own button with startTour.

The tour's frequency cap limits only automatic playback. A manual replay always works.

Checklists

A checklist step shows tasks in a progress widget that stays in the corner of the page. Add one with Add step → Checklist on the Builder tab; a tour can be a checklist alone. A visitor completes a task by clicking it. You can instead bind a task to an event name. When your code calls track("that_event"), the task completes. Whichever happens first wins.

Single-page apps

Set trackRouteChanges: true so page-based targeting re-runs on each navigation. See init.

Preview on your site

The tour builder has a Preview on your site action. It uses the JustOneCX browser extension to play your draft on your own live page.