Inizia
Toutour Pro — Ready-to-Run Onboarding Modules

Toutour Pro — Ready-to-Run Onboarding Modules

Sixteen guidance modules and one assembler on top of the free Toutour skill: two-tier tours, action-gated steps, event-driven checklists, ambient nudges, commerce patterns, a GA4 funnel adapter, and a parameterized Playwright harness. 106 end-to-end checks included.
#Ingegneria#Design#Immagine
Valutazione
Servono altre valutazioni
Venduti
0
Come si usa
Scarica

What it is

Toutour Pro is the production layer around a spotlight onboarding tour. The free Toutour skill teaches an agent to author and verify a tour, and ships a zero-dependency engine. Pro is everything a tour needs around it — sixteen guidance modules, one assembler, 106 end-to-end checks.

Every pattern below is live and clickable in the pattern gallery, tagged free vs Pro, so you can see the line before you buy.

One config wires all of it

generators/assemble.js resolves the module graph — the checklist/tours cycle, the event-chain order, per-module storage keys — because hand-wiring is where generated integrations break.

const app = ToutourPro.assemble({
  lang: 'en', storageKey: 'app', ga4: { tourId: 'app' },
  tour:       { welcome, help, main, minis },
  checklist:  { items },
  competency: { events },
  /* …one key per pattern you selected… */
});

Omit a section and it is simply not created. Name a module you did not load and it lands in app.missing with a warning instead of throwing.

The tour layer

  • two-tier — first-visit welcome card (with optional audience segmentation), condensed main tour, persistent "?" replay, per-panel mini-tours. Plus action-gated steps: Next stays locked until the user actually performs the action.
  • checklist — a getting-started list that survives sessions, launches tours as item payloads, and completes items from the tour event stream.
  • competency — completion proven by real app events (DOM, GTM dataLayer, predicates, or emit()), persisted and order-independent, so a step done yesterday in another tab still counts.
  • celebrate — milestone moments: once ever, non-blocking, reduced-motion safe.

The ambient layer

The guidance moments that are not a sequence: nudge (one-target salience, never blocks a click), beacon (persistent hotspots for shipped-but-unnoticed features, capped at two per page), jit (offer a panel's mini the first time it becomes visible), stall (help triggered by hesitation, frozen while the user types), announce (a polite queued slideout), and scroll-hint (false-bottom repair, also in the free engine).

The commerce layer

  • quiz — personalization finder shipping quiz.walk(), a pure path enumerator that fails your build if any answer path lands on zero results
  • size-finder — chart-based fit assistant with a pure, unit-tested recommend()
  • recovery — zero-results and empty-cart merchandising with merchant-side query logging
  • offer — honest welcome offer whose guardrails are not options: a 6 s delay floor, one popup page-wide, neutral decline copy with no slot for confirmshaming
  • permission — priming where the real browser API is unreachable before the affirmative click

Analytics and verification

One line turns the event stream into a GA4 funnel — including the exact step users abandon on and time-to-value. Auto-detects gtag or GTM; never breaks the tour when neither exists.

verify/tour-verify.mjs is a parameterized Playwright harness: describe your tour in one config, get the full verification pass — spotlight covers target, tooltip never overlaps it, tab activation, both viewports, both themes, reduced-motion, network and console errors. CI-ready exit codes.

What it refuses to build

references/anti-patterns.md carries four forms this skill will not generate and six it guards, each with its published number. A generator that declines to ship harm — with the study attached — is the part competitors do not have.

Requires

The free Toutour engine and playbook, both vendored in this bundle so it is self-contained. Node and Playwright for the verification harness.

Licence

Commercial. One purchase covers unlimited sites you build or maintain; redistribution of the Pro source is not permitted. The free Toutour engine and skill remain MIT and are unaffected.

Links


繁體中文

Toutour Pro 是導覽的生產層。免費版 Toutour 教 agent 怎麼撰寫並驗證導覽、附一個零相依引擎;Pro 提供的是導覽周邊需要的一切——十六個模組、一個組裝器、106 項端對端檢查。

assemble.js 用單一設定解析模組相依圖(checklist 與 tours 的循環相依、事件鏈順序、各模組的儲存鍵),因為手工接線正是生成式整合最容易壞掉的地方。

導覽層:兩層式產生器(歡迎卡+分眾問卷、主導覽、常駐「?」重播、各面板迷你導覽)、闖關步驟(使用者真的做了動作 Next 才解鎖)、跨 session 的入門清單、以真實應用事件判定完成的能力追蹤。

環境層:單點提示、常駐光點、首次進入的即時提議、以停頓(而非載入)觸發的求助、有禮貌的排隊滑出通知。

電商層:會在任何答題路徑走到零結果時讓你的建置失敗的問卷、經單元測試的尺寸推薦、零結果與空購物車救援(含店主端查詢記錄)、護欄不可關閉的誠實優惠彈窗、以及在使用者明確同意前無法碰到瀏覽器 API 的權限預先說明。

分析與驗證:一行接上 GA4 漏斗(含使用者確切在哪一步放棄與 time-to-value);參數化的 Playwright 驗證工具,一份設定跑完雙視窗、雙主題、reduced-motion 與網路/主控台錯誤。

它拒絕生成什麼:四種明確拒絕、六種加上護欄,每一條都附已發表的數據。附授權為商業授權,一次購買可用於你建置或維護的所有網站;免費版引擎與 skill 維持 MIT 不受影響。