Appearance
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
- In the dashboard, open Tours and create one.
- Add steps. For a tooltip step, pick the element it points at.
- Set targeting (who sees it, on which pages).
- Publish.
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.
- If a step's element is not on the page, the SDK skips that step and logs a console warning.
- If no step in a tour can be found, the SDK skips the whole tour. It does not mark it as seen, because the visitor never saw it.
- Finishing or dismissing a tour marks it as seen. It is not shown again automatically.
Replay and launcher
Enable the persistent launcher on the tour's Launcher 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. 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.