# Product Tour Page > An interactive product tour page: visitors click through a drawn Acme app in six chapters with hotspots and coachmarks, then start free. - Type: React template (Templates) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add product-tour-page` - Docs: https://wingo-ui.com/templates/product-tour-page ## Interaction The hero's Start the tour scrolls to the drawn Acme app and focuses it. A chapter rail above the app (Plan a project, Write the spec, Automate the handoff, Ship with the timeline, Ask Acme AI, Report to stakeholders) shows each chapter's progress; click one to skip to it, or use the sidebar (the bottom tab bar on phones). Every step puts a pulsing hotspot on the exact element with a coachmark beside it (title, one line, step x/y, Back and Next). Clicking the hotspot or Next performs the action in the app: a card is added, gets an owner and slides to In progress, the team avatars pop in, a doc title types itself, a checklist, a mention with a reply and a synced task embed appear, automation nodes connect and the rule switches to Live, a timeline bar stretches and the dependent bar moves, a launch milestone drops in, Acme AI answers and creates tasks, chart bars grow, a target line and a share card appear. Each chapter ends on an Up next card; the last one opens a completion card with Start free, Book a demo and Take the tour again. Keys while the app has focus: Right and Left arrows step, Enter performs. Fullscreen tour opens the same tour in a full-viewport dialog; Escape or Exit fullscreen closes it. Restart goes back to the start. On phones the app shows one panel at a time with 44px hotspots, and the coachmark docks as a card under the app. The chapter cards jump into the tour, the FAQ opens one answer at a time. With autoPlay the tour steps forward on its own while on screen until the first click; reduced motion keeps everything still. ## Installation ```bash npx wingo-ui@latest add product-tour-page ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/product-tour-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/templates/product-tour-page.tsx` - `components/templates/product-tour-page-data.ts` npm dependencies: `npm i @radix-ui/react-dialog motion lucide-react` Wingo UI dependencies (installed automatically): - [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md)) - [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md)) - [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md)) - [FAQ Section](https://wingo-ui.com/components/faq-section) ([Markdown](https://wingo-ui.com/components/faq-section.md)) - [CTA Section](https://wingo-ui.com/components/cta-section) ([Markdown](https://wingo-ui.com/components/cta-section.md)) - [Testimonials Section](https://wingo-ui.com/components/testimonials-section) ([Markdown](https://wingo-ui.com/components/testimonials-section.md)) - [Avatar](https://wingo-ui.com/components/avatar) ([Markdown](https://wingo-ui.com/components/avatar.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md)) - [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx // app/(marketing)/tour/page.tsx "use client" import Link from "next/link" import { ProductTourPage } from "@/components/templates/product-tour-page" export default function TourRoute() { return ( console.log("tour", chapter, step)} onComplete={() => console.log("tour complete")} /> ) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `design?` | `"classic" \| "bold" \| "minimal"` | `"classic"` | The whole page's look. classic: the knobs below, a soft glow behind a centered hero, raised cards, gray bands; bold: a pill header, huge start-aligned heavy type on a grid, a deeper app shadow, flat chapter tiles, an inverted human band, featured quotes, FAQ cards, a scene band and a wordmark footer; minimal: a transparent header, no glow, an outlined app and cards, no gray bands, a plain human band, a ghost FAQ, a plain closing band and a simple footer. The *Props overrides still win. | | `chapters?` | `ProductTourChapter[]` | `"PRODUCT_TOUR_CHAPTERS"` | { id, view, title, summary, duration, steps }: the tour. view picks the drawn screen (board, doc, automations, timeline, ai, report); each step { id, target, title, body, action, side? } performs the view's next action (PRODUCT_TOUR_TARGETS lists them in order). | | `testimonials?` | `Testimonial[]` | `"PRODUCT_TOUR_TESTIMONIALS"` | Quotes for the testimonials section. | | `faq?` | `FaqItem[]` | `"PRODUCT_TOUR_FAQ"` | Questions of the FAQ. | | `hrefs?` | `Partial` | `"DEFAULT_PRODUCT_TOUR_PAGE_HREFS"` | { start, demo, sales }: Start free, Book a demo and Talk to sales. | | `labels?` | `Partial` | `"DEFAULT_PRODUCT_TOUR_PAGE_LABELS"` | Every visible string; stepOf is a function. | | `chapter?` | `string` | | The current chapter id, controlled. Pair with step and onStepChange. | | `defaultChapter?` | `string` | `"plan"` | The chapter the tour opens on (the first chapter's id). | | `step?` | `number` | | The current step, controlled: 0 is the first step, steps.length the chapter's end card. | | `defaultStep?` | `number` | `0` | The step the tour opens on; the drawn app shows every earlier action done. | | `onStepChange?` | `(position: { chapter: string; step: number }) => void` | | Fires on every move: Next, Back, a hotspot, a chapter jump, Restart or autoplay. | | `onComplete?` | `() => void` | | The last step of the last chapter was performed. | | `fullscreen?` | `boolean` | | The fullscreen dialog, controlled. | | `defaultFullscreen?` | `boolean` | `false` | Opens the tour in the fullscreen dialog on load. | | `onFullscreenChange?` | `(open: boolean) => void` | | The fullscreen dialog opened or closed. | | `autoPlay?` | `boolean` | `false` | Steps forward on its own while the tour is on screen; stops on the first click, while hovered and under reduced motion. | | `autoPlayInterval?` | `number` | `4000` | Milliseconds per step while autoplaying (1500 minimum). | | `testimonialsLayout?` | `"quote" \| "grid" \| "featured"` | `"quote"` | The testimonials layout, classic design. | | `ctaVariant?` | `"inverted" \| "soft" \| "split"` | `"inverted"` | The closing band, classic design. | | `glow?` | `boolean` | `true` | The soft light behind the hero, classic design. | | `alternate?` | `boolean` | `true` | Gray bands on every other section. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Hotspots, Next buttons, progress, the glow and accents in the drawn app. | | `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Start the tour, Start free on the completion card, the header's Get started and the closing band. | | `showChapters?` | `boolean` | `true` | The What you'll see chapter cards. | | `showHuman?` | `boolean` | `true` | The Prefer a human? band. | | `showTestimonials?` | `boolean` | `true` | The testimonials. | | `showFaq?` | `boolean` | `true` | The FAQ. | | `showCta?` | `boolean` | `true` | The closing band. | | `header?` | `boolean` | `true` | The marketing header; off inside a site layout. | | `footer?` | `boolean` | `true` | The marketing footer. | | `headerProps?` | `Partial` | | Passed to MarketingHeader. | | `footerProps?` | `Partial` | | Passed to MarketingFooter. | | `testimonialsProps?` | `Partial` | | Passed to TestimonialsSection, spread last. | | `faqProps?` | `Partial` | | Passed to FaqSection, spread last. | | `ctaProps?` | `Partial` | | Passed to CtaSection, spread last. | | `animateIn?` | `boolean` | `true` | The hero rises in on a client mount and the hotspots pulse; off in thumbnails and under reduced motion. | | `locale?` | `string` | `"en-US"` | Intl locale for the dates and numbers in the drawn app. | | `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `""` | The router link for the header, footer and inner links (next/link in an app). | | `className?` | `string` | | Classes for the root. | | `classNames?` | `Partial>` | | Classes for header, hero, title, tour, rail, app, hotspot, coachmark, completion, chapters, chapter, human, testimonials, faq, cta and footer. | ## Parts ### PRODUCT_TOUR_CHAPTERS (constant) The six sample chapters with 21 steps. ### PRODUCT_TOUR_TARGETS (constant) Each view's targets in the order its steps perform them, e.g. board: add-task, assign, card, share. ### PRODUCT_TOUR_TESTIMONIALS (constant) Three customer quotes with a metric each. ### PRODUCT_TOUR_FAQ (constant) Six questions about the tour, setup, imports, AI and demos. ### DEFAULT_PRODUCT_TOUR_PAGE_LABELS (constant) The English strings. ### DEFAULT_PRODUCT_TOUR_PAGE_HREFS (constant) Where Start free, Book a demo and Talk to sales go. ### PRODUCT_TOUR_PAGE_DESIGNS (constant) The design names, classic first: ["classic", "bold", "minimal"]. ### ProductTourPageDesign (type) "classic" | "bold" | "minimal". ### ProductTourPageProps (type) Props of ProductTourPage. ### ProductTourPageLabels (type) Every visible string. ### ProductTourPageHrefs (type) { start, demo, sales }. ### ProductTourPageSlot (type) The classNames keys. ### ProductTourPosition (type) { chapter, step }: what onStepChange receives. ### ProductTourChapter (type) { id, view, title, summary, duration, steps }. ### ProductTourStep (type) { id, target, title, body, action, side? }. ### ProductTourView (type) "board" | "doc" | "automations" | "timeline" | "ai" | "report". ### ProductTourSide (type) "top" | "bottom" | "left" | "right": where the coachmark sits on wide screens. ## Examples - **Bold design**: design="bold": huge start-aligned type on a grid, a deeper app shadow, flat chapter tiles, an inverted human band and a wordmark footer. - **Minimal design**: design="minimal": a transparent header, no glow, an outlined app and cards, no gray bands and a simple footer. - **Brand accents, mid-tour**: tone and ctaTone brand: orange hotspots and buttons, opening on the third step of Automate the handoff. - **Autoplay inside a site layout**: No header or footer, only the tour and the FAQ; it steps forward every 3 seconds while on screen until you click. - **Finished tour**: Opens on the completion card with Start free, Book a demo and Take the tour again. ## See also - [Tour](https://wingo-ui.com/components/tour) ([Markdown](https://wingo-ui.com/components/tour.md)) - [Landing Page](https://wingo-ui.com/templates/landing-page) ([Markdown](https://wingo-ui.com/templates/landing-page.md)) - [Feature Page](https://wingo-ui.com/templates/feature-page) ([Markdown](https://wingo-ui.com/templates/feature-page.md)) - [Demo Booking Page](https://wingo-ui.com/templates/demo-booking-page) ([Markdown](https://wingo-ui.com/templates/demo-booking-page.md)) - [AI Product Page](https://wingo-ui.com/templates/ai-page) ([Markdown](https://wingo-ui.com/templates/ai-page.md)) --- Canonical: https://wingo-ui.com/templates/product-tour-page More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt