Getting started
Create a tour
Build steps in Tour Studio, set targeting, and publish.
1. Add a tour
Go to Product Tours → Add New. Give the tour a clear title (for example, “Dashboard onboarding”).
2. Add steps
In Tour Studio, add steps with:
| Field | Purpose |
|---|---|
| Title | Popover heading |
| Description | HTML-safe body copy |
| Element | CSS selector (#header, .btn-primary, [data-id]) |
| Side / align | Popover placement relative to the element |
| Require click | Wait for a click on the highlighted element before continuing |
| Missing behavior | skip the step or show a floating popover if the selector is missing |
Leave Element empty for a centered intro/outro popover with no highlight.
3. Process, brand, targeting
- Process — auto/manual start, audience, show-once + version, skip/close, restart button
- Brand — colors, radius, font, overlay, custom CSS (or inherit site defaults)
- Targeting — which pages/posts/URLs load this tour
See Targeting, Process, and Brand.
4. Publish and verify
- Publish the tour.
- Visit a matching page in a private window.
- Confirm the tour starts (or your trigger button works).
- Confirm DevTools Network shows Driver.js / loader assets only on matching pages.
Manual start without auto-run
Set process start to manual, then use a shortcode button, Gutenberg block, or LCProductTour.start(id).