Steps

Steps live on the Step 3: Tour Steps tab. Each tile is a live preview of the tooltip card, styled like your site.

#Anatomy of a step

While a step is showing, visitors see the target spotlighted, a beacon on it, and the card with “Step 2 of 5”, progress dots, ← Prev and Next → (Finish ✓ on the last step).

#Add, reorder and remove

• + Add step adds a tile at the end.
• Drag the ⠿ handle on a tile to reorder.
• ✕ removes a step (only shown when there’s more than one).

#Setting targets

#Web

Type a selector, or build steps by clicking elements with the Visual Editor. Prefer [data-tour="…"] attributes — see Choosing selectors.

#Apps

Type the identifier you gave the view in code, or click 📱 Capture from device and tap the element in your running app. See Visual Inspector.

#How steps behave for visitors

• Targets off-screen are scrolled into view first (on iOS/Android, add the scroll helpers described in each SDK guide).
• A step whose target can’t be found is skipped.
• Finishing the last step records a completion; closing early records where they stopped. See Analytics.
• On the web, ← / → move between steps and Esc closes the tour.

#Writing good steps

• Keep tours short — 3 to 6 steps. Make several focused tours rather than one long one.
• Lead with the action: “Click New project to start” beats “This is the new project button”.
• Point at things that are always visible on the page when the tour runs.