StepshotsRecord a demo. Get a guided tour.
The same recording that powers your screenshot demo can light the way inside your real product: a spotlight on the next element, a callout that explains it, and a user who performs the flow on their own account instead of watching someone else's.
Create your first project
Everything in Stepshots lives in a project. Click the highlighted button to make one — the tour advances when you do.
A walkthrough your users perform, not watch.
Every tour is played from a recording you already made. The player spotlights the next element on the live page, waits for the real click or keystroke, and reports how far each user gets.
Spotlights your real app
The page dims, the next element gets a ring, and the callout explains what to do — on the user's own account with their own data, not a video of yours.
One script tag
Copy the snippet from the demo's embed dialog and paste it into your app. No SDK, no framework dependency, no build step — it works on React, Vue, or server-rendered HTML alike.
Advances on real interaction
Clicks, typing, and dropdown changes advance the tour without being intercepted — the app still receives every event, so the flow really happens as the user follows along.
Survives reloads and navigation
A full page reload or a multi-page flow resumes at the current step. In SPAs the player waits for each target to mount after route changes and hydration.
Withstands UI drift
When a selector no longer matches because your UI changed, the player falls back to the element's recorded text and aria-label — and drift alerts flag the step so you can fix the selector in your tour file.
First-run auto-start
Gate the tour on an element that only exists in the state you care about — an empty "no projects yet" screen, say. It offers itself once per browser and stays quiet after that.
Funnel analytics
Starts, per-step reach, completions, skips, and drift warnings, per demo — so you can see exactly where new users stop following and fix that step.
Accessible by default
Escape dismisses the tour, the callout uses dialog semantics with polite live announcements, reduced-motion preferences are honored, and the page stays fully interactive.
On-brand, isolated
Set your accent color with a single attribute. The overlay renders in its own shadow DOM, so your CSS can't break the tour and the tour can't leak into your app.
Three steps from recording to guided onboarding.
Record the flow
Capture it with the browser extension or describe it to the AI-assisted CLI. Record against a fresh account so the tour sees what a new user sees, and keep it to the few steps that reach activation.
Make it a tour
Scaffold a tour file from the recording with the CLI — a plain tours/*.tour.json you keep in git, validate in CI, and push for hosting. Or publish the demo and convert it from its embed dialog in one click.
Embed the snippet
Paste the script tag into your app. It shows each visitor the tour once, resumes across reloads, and reports anonymous run analytics back to your dashboard. Append ?tour=1 to any URL to preview it.
Demos show. Tours do. One toolchain builds both.
A screenshot demo is the right thing to put in front of a prospect: it's safe, polished, and works anywhere — docs, landing pages, emails. But the moment someone signs up, watching stops being the goal. They need to do the thing.
A guided tour turns that flow into onboarding: the user clicks the real buttons, fills the real fields, and ends up with the task actually done in their account. The tour itself is a plain text file — versioned in your repo next to the UI it targets, validated in CI, recorded once with the same toolchain as your demos. Not a separate onboarding product to keep in sync.
One toolchain, two artifacts
Demos and tours share the recorder and the config format — one recording can scaffold a tour in a single command. When a flow suits both, record once; when it doesn't, a tour-specific config is minutes of work, not another tool.
Users learn by doing
The tour ends with the user's first project created, first teammate invited, first task done — real activation, not a completed video.
Versioned like code
A tour is a plain text file in your repo — diffable, reviewable in PRs, and validated in CI with stepshots tour check before your users ever see it.
Feedback when it breaks
If your UI drifts away from the tour, the player falls back to recorded text anchors and drift alerts warn you — so a stale tour never fails silently.
Your FAQ, but it shows.
Most help-center answers describe a flow the user then has to find on their own. With one attribute, any FAQ answer, help-menu entry, or empty state becomes a launcher that walks them through it — in their own account, with the task actually done at the end.
If the flow starts on a different page, add a jump URL and the tour begins on arrival. Every "Show me" click counts in the tour's analytics, so you learn which questions your users answer by doing. Best for task-shaped questions — conceptual answers can stay text.
<button data-stepshots-tour-trigger="invite-teammate" data-stepshots-tour-url="/settings/team" >Show me</button>
Acme — Team settings
How do I invite a teammate?
Open team settings, click Invite teammate, and enter their email. Easier shown than said:
Common questions about guided tours
What is a guided tour?
An interactive walkthrough that runs on your real product instead of screenshots. Stepshots replays a recorded flow as an overlay: it spotlights the next element, shows a callout explaining the step, and advances when the user actually clicks or types. The user finishes with the task genuinely done in their own account.
How is it different from an interactive demo?
A Stepshots demo is a click-through of captured screenshots — great for prospects and docs because it's safe and needs no access to your app. A guided tour guides a signed-in user through the real UI. Both come from the same recorder, and a recording can scaffold a tour in one command.
Should my sales demo and my onboarding tour be the same recording?
Often not, and that's fine. A sales demo shows your impressive path on a polished, populated account; onboarding needs the shortest path to activation on a brand-new, empty one — with copy that instructs rather than sells. Short task flows can genuinely serve as both. For anything bigger, record a small tour-specific flow against a fresh account: it's a few minutes with the extension or a small JSON config with the CLI, and the tour file lives in your repo, right next to the UI it targets.
Does it work with my framework?
Yes. The player is framework-agnostic and operates on the rendered DOM, so React, Vue, Svelte, Angular, WASM apps, and server-rendered HTML all work. It renders inside its own shadow DOM, so your CSS and the tour never interfere with each other.
How do I add a tour to my app?
Scaffold a tour from a recording (`stepshots tour init --from`), replay it against your app in CI (`stepshots tour check`), and push it (`stepshots tour push`) — then paste one script tag into your app. Or convert a published demo from its embed dialog. There's no SDK to install and no build-step integration.
Can guided tours power my FAQ or help center?
Yes. Any element can launch a tour: mark a button in your help center with the data-stepshots-tour-trigger attribute and that answer walks the user through the flow in their own account. If the flow starts on a different page, a companion jump attribute navigates there first and the tour begins on arrival. Every show-me click is counted in the tour's analytics, so you can see which questions users prefer to answer by doing.
What happens when my UI changes?
Each step carries fallback anchors — the target's recorded text and aria-label. If the CSS selector no longer matches, the player finds the element by those anchors instead. If nothing matches, the tour shows a recovery card rather than hanging, and drift alerts flag the step — run stepshots tour check --update-fallbacks to refresh the anchors without re-recording.
Do tours work across page reloads and multi-page apps?
Yes. The player persists the current step, so a full page reload — or a flow that spans several pages — resumes where the user left off instead of restarting from step one.
What analytics do I get?
Every tour counts starts and completions. Pro adds the per-step funnel — how far each step reached, where users skipped — and drift alerts for steps whose target could no longer be found. Your own previews via ?tour= links are excluded so they don't pollute the numbers.
Is it included in the free plan?
Yes — guided tours are free on every plan, with unlimited tours and run counts included. The per-step funnel and drift alerts are part of Pro. On the free plan the callout card carries a small "Powered by Stepshots" badge; Pro removes it.
Your next demo can onboard users too.
Record a flow once, push the tour file, and paste one script tag. Guided onboarding on your real app — free on every plan.
Share this page