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.

What it is

At the app's real breakpoint (1024px) the engine switches modes. Guide mode drops the dim and the cutout and shows a branded sheet above the mobile nav with the same step content, a progress bar and a Next button; it collapses to a slim chip so you can see the screen. Click steps still auto-advance when their target resolves.

Also called: tour on my phone · mobile tutorial · bottom sheet guide

See it
Phone-friendly guide mode
CustomerBuildingAmountStatus
Delia Yoder30×40 Garage$3,290Sent
Ronan Petsch40×64 Shop$12,600Open
Ivy BrubakerHobby Shop$16,020Draft
Sutter Kline40×64 Shop$7,660Open
Gideon AltHobby Shop$5,760Open
Phone frame: the guide sheet above the bottom nav, then collapsed to the slim chip showing '4/9'. Sample data — no customer information appears here.
How it works
  1. 1A matchMedia listener at (min-width: 1024px) drives the switch; crossing the seam mid-tour re-runs the current step in the other mode
  2. 2The sheet renders whether or not the target resolves, so a slow screen never blocks the lesson (target wait is capped at 4s in this mode)
  3. 3The sheet sits above the mobile nav using the shared clearance constant (safe area + 92px), and the nav stays usable — guide mode expects you to navigate
  4. 4Every step offers a manual Next in guide mode: it can never wedge
Why we built it

Half the people in a builder's account are in a truck, on a phone, with one hand free. The first version parked a floating tutorial button directly on top of the Send button in the message composer, so anyone trying to text a customer back hit the tutorial instead. On a phone the walkthrough is now a bottom sheet you can collapse and read while you work, rather than a dimmed screen with a hole cut in it — at phone width, a dimmed screen with a hole cut in it is mostly just a dimmed screen. The launcher sits up in the top bar, where it covers nothing.

The problem
  • Desktop-only training in a product used from a job site
  • Floating helpers colliding with the app's own bottom-right controls on phones
Sound familiar?
What you get
The same 49 tutorials work on a phone
You can collapse the guide to a chip, look at the screen, and open it again

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 →