Guide · Product tours
Onboarding tours that show users the way, then get out of it
Build step-by-step coachmark tours in the dashboard and anchor each step to your real UI. Macaw starts the right tour on the right page, shows it once per user, and tells you who finished.
macaw.autoStartTours([
{ trigger: 'welcome_tour', match: '/dashboard' },
{ trigger: 'reports_tour', match: /^\/reports/ },
]);
macaw.startTourOnce('billing_tour', { version: 2 });
// 'done' | 'skipped' | null
macaw.getTourStatus('welcome_tour');What you get
Authored in the dashboard
Write steps in markdown per space. Change copy or order without a release.
Anchored to your UI
Point a step at a CSS selector, a data-tour attribute or an element id. Steps whose target is missing are skipped.
Smart placement
Cards sit below, above, left or right of the target, flip when there is no room and turn into a bottom sheet on mobile.
Spotlight and keyboard
A spotlight follows the target through scroll and resize. Esc skips, arrow keys and Enter move through steps.
Once per user, by route
autoStartTours starts first-visit tours by path in single-page apps; startTourOnce never repeats a finished tour.
Re-arm after a redesign
Bump a tour's version and every user sees it again. resetTours powers a "Take the tour again" link.
How teams use it
First-run onboarding
Walk every new sign-up through the three actions that make them stick.
Feature launches
Point existing users at a new screen the first time they open it.
Redesigns
Re-show the tour once, at a new version, so nobody gets lost.
All in the same SDK
- Contextual help: Answers exactly where users get stuck
- FAQs & content: An in-app FAQ your team can keep up to date
- Achievements & streaks: Reward the habits that keep users coming back
- Interaction events: See exactly how users interact with your guidance
- Cookie consent: Cookie consent you can prove, not just collect
- Spaces & teams: Built for companies with more than one product