Product Tour Page

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

// 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 (
    <ProductTourPage
      linkComponent={Link}
      onStepChange={({ chapter, step }) => console.log("tour", chapter, step)}
      onComplete={() => console.log("tour complete")}
    />
  )
}

Props

• designdefault "classic"
  "classic" | "bold" | "minimal"

  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.

• chaptersdefault "PRODUCT_TOUR_CHAPTERS"
  ProductTourChapter[]

  { 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).

• testimonialsdefault "PRODUCT_TOUR_TESTIMONIALS"
  Testimonial[]

  Quotes for the testimonials section.

• faqdefault "PRODUCT_TOUR_FAQ"
  FaqItem[]

  Questions of the FAQ.

• hrefsdefault "DEFAULT_PRODUCT_TOUR_PAGE_HREFS"
  Partial<ProductTourPageHrefs>

  { start, demo, sales }: Start free, Book a demo and Talk to sales.

• labelsdefault "DEFAULT_PRODUCT_TOUR_PAGE_LABELS"
  Partial<ProductTourPageLabels>

  Every visible string; stepOf is a function.

• chapter
  string

  The current chapter id, controlled. Pair with step and onStepChange.

• defaultChapterdefault "plan"
  string

  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.

• defaultStepdefault 0
  number

  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.

• defaultFullscreendefault false
  boolean

  Opens the tour in the fullscreen dialog on load.

• onFullscreenChange
  (open: boolean) => void

  The fullscreen dialog opened or closed.

• autoPlaydefault false
  boolean

  Steps forward on its own while the tour is on screen; stops on the first click, while hovered and under reduced motion.

• autoPlayIntervaldefault 4000
  number

  Milliseconds per step while autoplaying (1500 minimum).

• testimonialsLayoutdefault "quote"
  "quote" | "grid" | "featured"

  The testimonials layout, classic design.

• ctaVariantdefault "inverted"
  "inverted" | "soft" | "split"

  The closing band, classic design.

• glowdefault true
  boolean

  The soft light behind the hero, classic design.

• alternatedefault true
  boolean

  Gray bands on every other section.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Hotspots, Next buttons, progress, the glow and accents in the drawn app.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Start the tour, Start free on the completion card, the header's Get started and the closing band.

• showChaptersdefault true
  boolean

  The What you'll see chapter cards.

• showHumandefault true
  boolean

  The Prefer a human? band.

• showTestimonialsdefault true
  boolean

  The testimonials.

• showFaqdefault true
  boolean

  The FAQ.

• showCtadefault true
  boolean

  The closing band.

• headerdefault true
  boolean

  The marketing header; off inside a site layout.

• footerdefault true
  boolean

  The marketing footer.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• testimonialsProps
  Partial<TestimonialsSectionProps>

  Passed to TestimonialsSection, spread last.

• faqProps
  Partial<FaqSectionProps>

  Passed to FaqSection, spread last.

• ctaProps
  Partial<CtaSectionProps>

  Passed to CtaSection, spread last.

• animateIndefault true
  boolean

  The hero rises in on a client mount and the hotspots pulse; off in thumbnails and under reduced motion.

• localedefault "en-US"
  string

  Intl locale for the dates and numbers in the drawn app.

• linkComponentdefault "<a>"
  (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<Record<ProductTourPageSlot, string>>

  Classes for header, hero, title, tour, rail, app, hotspot, coachmark, completion, chapters, chapter, human, testimonials, faq, cta and footer.

Parts