Guided tours that drive your real screens

A step-by-step overlay that dims the page, spotlights the exact control to use next, and waits for you to actually use it.

What it is

Each tour step names a target on the page, navigates there if needed, dims everything else and highlights the one control that matters. Steps can advance on a click, on a real app event, or on a Next button, and can branch on an answer. If a target never appears the step is skipped rather than leaving the user stuck under a dim overlay.

Also called: coach marks · spotlight tour · product tour · show me how · interactive walkthrough · guided tours · walkthrough · tutorials · in-app training · how do I · onboarding tours

See it
Guided tours that drive your real screens
New lead 3
Marlin Hoover
$43k
Delia Yoder
$53k
Sutter Kline
$42k
Contacted 4
Sutter Kline
$51k
Ronan Petsch
$53k
Estimate 2
Ivy Brubaker
$37k
Gideon Alt
$43k
Marlin Hoover
$77k
Sold 3
Marlin Hoover
$77k
Delia Yoder
$70k
Sutter Kline
$18k
Dimmed page with a bright cut-out around one button and the coach card beside it — SpotlightOverlay.tsx + CoachCard.tsx. Sample data — no customer information appears here.
How it works
  1. 1The step declares navigation first: hash → view → settings tab → a richer action (expand the sidebar, expand a pipeline stage, open a card's modal, open a Gantt project)
  2. 2Target resolution runs querySelectorAll and picks the VISIBLE instance — never a first match
  3. 3Three visibility gates run per candidate: is it rendered, is it clipped by an overflow-hidden ancestor, is something painted on top of it
  4. 4A MutationObserver plus a rAF-throttled re-resolve waits for the target, bounded by an 8s timeout
  5. 5On timeout the engine skips the step instead of wedging
Why we built it

Bought-in tour tools kept pointing at nothing. This app keeps every screen loaded in the background and hides the ones you are not on, and a collapsed sidebar shrinks to no width at all while the buttons inside it keep their full size — so a naive highlighter finds a button that exists but cannot be seen, dims the page, and tells a new hire to click an empty rectangle in the corner. Tours here confirm the thing they are pointing at is genuinely on screen and genuinely visible, scroll it into view, and wait for the click. When a target never appears, the step is skipped rather than trapping the person halfway through a lesson.

The problem
  • Generic tour tools point at invisible or duplicated elements in a keep-mounted app
  • A stuck tutorial traps the user behind a dim overlay
  • Watching a video does not build the muscle memory of doing the task
Sound familiar?
What you get
The lesson happens on the real screen with the real buttons
A missing target is skipped silently instead of stranding the user
Mobile and desktop twins of the same button never confuse the highlight
What's inside
Tutorial library panel
A searchable, category-grouped list of every tutorial, with your progress on each one.
Spotlight and coach card
Everything dims except the one control you need, and a card next to it says what it does.
Phone-friendly guide mode
Below tablet width the tour becomes a bottom sheet you can collapse, instead of a spotlight that would swallow a small screen.
Tour anchors that find the real, visible control
194 named anchors across 57 screens, resolved to the one instance you can actually see and touch.
A tour that never gets stuck
If a button isn't there — brand-new account, wrong role, feature not switched on — the step teaches the same lesson on a plain card and moves on.
Progress, resume and replay
Each person's place in each tutorial is saved to their account, so a tour survives a refresh, a new device or a week off.
A practice lead on your real board
Tours that need a lead seed one clearly-badged demo lead onto your actual pipeline, then delete it when you're done.
'Show me how' icons on the hard screens
A small graduation-cap icon next to the heading of a complicated screen launches that screen's own walkthrough.
Send someone straight into a tutorial
A link with ?tutorial=<id> opens the app and starts that walkthrough — even if the recipient had the Academy hidden.
The tour drives the app for you
Steps can switch screens, open a Settings tab, expand a pipeline column, open a specific lead card or a project on the schedule — using the app's own controls.
Tours that ask you a question
A step can offer choices — 'where are your leads coming from?' — and send you down the matching path.
Tours that match what you're allowed to do
Tutorials and individual steps respect permissions — a crew lead never sees an admin-only tour, and an admin-only step explains itself instead of failing.
Turn guided tours on or off — per person
Each user can switch guided tours on or off for themselves; the account carries a default, and a tutorial link always brings it back.

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →