EXTENDED UI

Tour

Step-by-step product tours and onboarding hints. Every one is real — try them.
THEME
01

Playground

Placement, backdrop, progress and click-to-continue
avava
⌕Search clients, projects…⌘K
REVENUE€38.6k+12 % vs Sep
UNPAID€15.4k2 invoices
HOURS126 hthis month
NTSpring 27 campaign62 %
5 steps · Esc to close · ← → to move
const tour = new Tour({ placement: "auto", backdrop: "strong", progress: "dots", showSkip: true, keyboard: true, scrollIntoView: true, steps: [ { target: "#search", title: "Find anything" }, { target: "#new-invoice", title: "Create an invoice", advanceOn: "click" }, … ], onFinish: () => saveSeen("product-tour") }); tour.start();
Settings
PLACEMENT
BACKDROP
PROGRESS
02

Patterns

Onboarding, hotspots, checklist, what’s new, help menu
Onboardingwelcome → 4 steps → done
aWelcome to AvavaFirst-run tour for new accounts.
Hotspotsone tip per new feature
3 new features — click a dot
Get startedchecklist · each task a mini tour
0 of 4 done0%
What’s new3 slides · after updates
v1.2 · OCT 17Client portal, star ratings and a new timeline view.
Help menu“?” in the corner
A quiet entry point to every tour — nothing pops up uninvited.
03

Behaviour

Follows scroll, off-screen targets, resume, don’t show again
Follows scrollscroll the box during the step
Frame 003Frame 010Frame 017Frame 024Frame 031Frame 038Frame 045Frame 052★ Hero 04 · selectedFrame 066Frame 073Frame 080Frame 087Frame 094
Off-screen targetscrolls first, then points
Step 2 points at the Do / Don’t block at the very bottom of the page.
Resumeremembers where you stopped
Close it on step 2 or 3, then come back.
Don’t show againcheckbox in the step
Tick the box in the tour — it won’t start again.
04

Rules & a11y

Checklist and Do / Don’t
Checklist
✓Opt-in or onceauto-start only on first run; always restartable from “?”
✓3–5 stepslonger tours become a checklist
✓Focus moves into the tipTab stays inside, Esc closes, focus returns
✓aria-describedby on the targetscreen readers read the tip with the element
✓Never block the targetclick-to-continue steps keep it interactive
✓Scroll before pointingoff-screen targets come into view first
✓Remember progressresume, don’t restart; respect “don’t show again”
DO✓One idea per step, with a verb✓Point at the real UI, not a screenshot✓Let people skip and come back✓End with a clear next action
DON’T✕Start a tour on every visit✕Explain obvious buttons✕Chain more than 5 steps✕Trap people with no way out