StepprTooltip, modal, hotspot - anchored to anything.
The bread and butter. Tours are sequences of steps, each anchored to a CSS selector or rendered modally. Pick visually with the click-to-build picker; Steppr generates the sturdiest selector available.
- Three step types: tooltip (anchored), modal (centred), hotspot (passive, click-to-reveal)
- Click-to-build picker via ?steppr_edit=true - no Chrome extension required
- Markdown body fields with a built-in toolbar (bold, italic, code, link)
- Two advance modes: Next button or anchor-click (advance the tour as the user clicks the highlighted element itself)
- Require-to-advance gates: the next button only enables when the anchor input has a value, or when a steppr.track() event fires
- MutationObserver retries for SPA elements that mount async; resume across full page navigations
- Spotlight backdrop, scroll-aware positioning, smart placement above/below
Product tours, in detail.
Authoring happens on your site, not in a sandbox.
Open any page of your own app with ?steppr_edit=true and the Steppr snippet boots the builder overlay instead of the normal runtime. Click the element you want to explain, write the copy, pick the next one. The dashboard handles auth through a postMessage handshake, so only people already signed in to your workspace can author.
- Selector priority: data-testid, then a stable id, then a stable class chain, then an nth-of-type fallback
- Preview the whole tour in edit mode before you publish anything
- Drafts stay editable while the published snapshot keeps serving end users
Three step types cover almost every explanation.
Tooltips point at a specific control and follow it as the page scrolls. Modals sit in the centre with a backdrop for moments that deserve full attention. Hotspots are passive: a pulsing marker the user can click when they are curious, so you can annotate a dense screen without forcing a sequence.
Advance rules that match how people actually use the app.
A Next button is the default. Switch a step to anchor-click and the tour advances when the user clicks the highlighted element itself, so the tour walks them through a real action instead of narrating one. Require-to-advance gates hold the button until the anchored input has a value or a named steppr.track() event fires.
Built for single-page apps.
The SDK patches history.pushState and listens for popstate, so route changes inside React, Vue or any SPA are detected without a full reload. If a target element has not mounted yet, a MutationObserver retries until it appears. Tours also resume across full page navigations, so a step that lands on a new page keeps its place.
Product tours FAQ.
Straight answers. If yours isn't here, email hello@steppr.io and a founder replies.
No. Append ?steppr_edit=true to any URL on your own site and the snippet you already installed switches into the builder overlay. Authoring works in any modern browser.
Steppr picks the most stable selector available when you click, preferring data-testid and ids over class chains. If a selector stops matching, the step is skipped gracefully rather than breaking the page, and the analytics drop-off view shows you which step lost its anchor.
Yes. Tour state is kept per end user, so a step whose target lives on another route resumes once that route loads. SPA navigations are detected automatically.
Five on Starter, twenty on Growth, unlimited on Scale and Enterprise. Limits apply to tours in your workspace, not to how many times they are shown.
Try product tours free for 7 days.
No card to start. The trial unlocks Growth-tier features so you can evaluate the whole product, not a stripped-down preview.