Toutour — Onboarding Tour Generator
What it does
Toutour turns any website into a guided experience. Point it at your site and it:
- Analyzes the layout, tabs and UI components — no manual selector hunting
- Audits the site against ten onboarding anti-patterns, each carrying its published figure
- Interviews you about step granularity, mask style, languages, theming and trigger mode
- Picks a tour library, checking the licence before it commits
- Implements the tour and wires it into your app
- Verifies the result with Playwright against a battle-tested edge-case checklist
Step 6 is the one most tour generators skip. Toutour actually opens your site, runs the tour, and checks that every step's target exists, is visible and is reachable — then reports what it found.
Step 2 is the one nobody does. Sometimes what hurts onboarding is the onboarding: Google's own case study put a full-screen install interstitial at 69% abandonment, and an NN/g experiment (n=70) found users rated the same apps harder to use after sitting through a tutorial deck. Toutour reports every hit with its number, because fixing those beats adding any tour.
What ships with it
A zero-dependency reference engine (~13 KB, MIT): toutour.js + toutour.css. No framework, no build step, no runtime dependency. Use it as-is, or let Toutour wire in a library you already have.
It supports deep links (startAt) and mid-tour resume, so a docs link, a support reply or an empty-state button can point at the exact step that explains the thing.
Also included: scroll-hint.js (~6 KB, MIT) — the false-bottom repair for full-viewport heroes that read as the end of the page.
Typical use
"Add an onboarding tour to my dashboard."
Toutour reads your code, asks a handful of questions, writes the tour, runs it in a real browser, and tells you what passed.
Good fit for
- Sites that shipped without onboarding
- Dashboards and admin panels with non-obvious navigation
- Multi-tab interfaces where users never find half the product
- Anything where "where do I start?" is a recurring support ticket
Licence
MIT — the skill, the playbook and the reference engine are all free to use commercially.
Links
- Source: https://github.com/matt-ye/Toutour
- Pattern gallery (32 patterns + 10 anti-patterns, every one a live demo): https://matt-ye.github.io/Toutour/patterns.en.html
- Demo video: https://youtu.be/FVTpQvh6pBk
- Live demo: https://matt-ye.github.io/Toutour/
繁體中文
Toutour 把任何網站變成有人帶路的體驗。它會分析版面、分頁與 UI 元件；用十條各自附有已發表數據的反模式稽核網站；就步驟粒度、遮罩、語言、配色與觸發方式訪談你；挑選導覽函式庫（會先檢查授權條款）；完成實作；最後用 Playwright 開啟你的網站實際跑一遍，逐步檢查每個目標元素是否存在、可見、可觸及，並回報結果。
其中反模式稽核是同類工具沒有的一步：有時傷害新手引導的正是引導本身——Google 自家的案例研究顯示全螢幕安裝插頁造成 69% 使用者直接放棄，NN/g 的實驗（n=70）則發現看過教學卡的使用者把同一個 App 評為更難用。Toutour 會連同數據一起回報每一項命中，因為修掉這些比加任何導覽都有效。
內附零相依的 MIT 參考引擎（約 13 KB），支援深連結（startAt）與中途續跑；另有 scroll-hint.js（約 6 KB）修補整頁高度首屏造成的「假底部」。不需框架、不需建置流程。授權為 MIT，可商用。
