Product tours / 14 primitives + composition

Product-tour primitives

The in-app onboarding stack — Appcues/Pendo-style tour builder, audience and trigger rules, tooltip composer, announcement cards, NPS prompt, survey prompt, library, analytics, end-user progress dots, and feature hint spotlight. Realistic Mufflermen tours teaching the quote-instant-pricing flow, ADR cheatsheet, and bay-availability widget. Distinct from auth onboarding and help-docs tour-controller.

Production answer

Product-tour primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Product-tour primitives states
Generative search brief

Product-tour primitives: The in-app onboarding stack — Appcues/Pendo-style tour builder, audience and trigger rules, tooltip composer, announcement cards, NPS prompt, survey prompt, library, analytics, end-user progress dots, and feature hint spotlight. Realistic Mufflermen tours teaching the quote-instant-pricing flow, ADR cheatsheet, and bay-availability widget. Distinct from auth onboarding and help-docs tour-controller.

Visual reference only — no live in-app messaging wired
Primitive 01

Tour builder canvas

Visual flow editor — drag-ready nodes with animated dashed connectors and step glyphs.

Stateful · selectOpen
Primitive 02

Step config pane

Right inspector — target selector, copy fields, direction/align, skip toggle, delay presets.

Stateful · formOpen
Primitive 03

Tour step thumbnail

Step card for the builder list — index, shape glyph, target selector code, delay tag.

Stateful · selectOpen
Primitive 04

Audience targeting rules

Who sees the tour — URL / segment / role / first-time / device chips with match-all toggle.

Stateful · rulesOpen
Primitive 05

Trigger condition

When the tour fires — page visit, time delay, scroll depth, element seen, custom event, exit intent.

Stateful · kindOpen
Primitive 06

Tour analytics card

Starts / completions / drop-off step + completion rate radial gauge and step funnel.

StatelessOpen
Primitive 07

Inline tooltip builder

Tooltip composer — position picker, alignment chips, close-CTA toggle, CTA copy.

Stateful · formOpen
Primitive 08

Announcement card

In-app announcement — image + title + body + dismiss + CTA, plus compact bar variant.

StatelessOpen
Primitive 09

NPS prompt trigger

NPS configurator — timing rule, segment, question, sampling slider, cool-down presets.

Stateful · formOpen
Primitive 10

Tooltip preview overlay

Preview frame — anchored CoachMark on a sample target with direction + align modifiers.

StatelessOpen
Primitive 11

Tour library grid

Library — status dot, last-run, engagement chip, recent-completion sparkline per tour.

StatelessOpen
Primitive 12

Step progress dots

End-user progress — dots, bars, or counter variants showing tour position.

StatelessOpen
Primitive 13

Survey prompt card

One-question embedded survey — multi-choice toggles + send CTA; multi-select supported.

Stateful · choicesOpen
Primitive 14

Feature hint spotlight

Larger-than-coach-mark hint — animated halo + 'what's new' badge + CTA.

Stateless · motionOpen
Composition

Full tour console

Composes every primitive — builder canvas, step inspector, audience rules, triggers, analytics, library.

CompositionOpen