What is a product tour? Definition, types, and examples
Every SaaS app reaches the same inflection point: users sign up, stare at the dashboard, and leave. Product tours exist to close that gap between "I signed up" and "I get it." But most definitions you'll find are written by marketing teams selling no-code tour builders. This one is written for developers who need to understand the concept, pick the right pattern, and actually build the thing.
npm install @tourkit/core @tourkit/reactDefinition
A product tour is a sequence of in-context UI elements that guide users through an application's interface by overlaying tooltips, modals, hotspots, or highlighted regions anchored to specific DOM elements. Tours advance based on user actions or passive triggers and track state so returning users don't repeat the same sequence.
Unlike documentation or help centers, product tours appear inside the app, pointing at real interface elements, at the moment the user needs guidance. Contextual, interactive, stateful.
For developers, a product tour is a UI state machine. It manages step sequencing, element positioning, focus trapping for keyboard accessibility, overlay rendering, and progress persistence. The hard parts aren't the tooltips. They're the positioning engine, the focus management, and the state transitions.
How product tours work
Every product tour runs through four stages on each step transition, from finding the target element to trapping keyboard focus within the active tooltip. Most libraries handle the first three stages well but diverge sharply on the fourth, which is where accessibility breaks down.
- Target resolution: find the DOM element using a CSS selector or ref
- Positioning: calculate tooltip placement relative to the target, accounting for viewport edges and scroll
- Overlay rendering: draw the spotlight cutout highlighting the target while dimming everything else
- Focus management: trap keyboard focus within the tour step so screen reader users stay oriented
Libraries that skip stage 4 produce tours unusable with keyboards and screen readers, violating WCAG 2.1 SC 2.4.3 (focus order) and 4.1.2 (name, role, value).
A minimal tour in React looks like this:
// src/components/WelcomeTour.tsx
import { TourProvider, useTour } from '@tourkit/react';
const steps = [
{ id: 'inbox', target: '#inbox-btn', title: 'Your inbox', content: 'Messages from your team land here.' },
{ id: 'search', target: '#search-bar', title: 'Search anything', content: 'Press / to search across all projects.' },
{ id: 'settings', target: '#settings-link', title: 'Customize', content: 'Set your notification preferences.' },
];
function WelcomeTour() {
const { currentStep, nextStep, isActive } = useTour();
if (!isActive) return null;
return (
<div role="dialog" aria-label={currentStep.title}>
<h2>{currentStep.title}</h2>
<p>{currentStep.content}</p>
<button onClick={nextStep}>Next</button>
</div>
);
}
export default function App() {
return (
<TourProvider tourId="welcome" steps={steps}>
<WelcomeTour />
{/* rest of your app */}
</TourProvider>
);
}Three steps. Three DOM targets. The library handles positioning and state; you render whatever UI you want.
Types of product tours
Product tours follow four distinct UI patterns as of April 2026, each with different levels of user effort and invasiveness. Picking the wrong pattern for the context is the single most common reason tours get dismissed, according to Appcues' UI patterns research.
| Type | Mechanism | Best for | Completion rate |
|---|---|---|---|
| Action-driven tooltips | User completes a task to advance | Critical setup flows | ~72% (3 steps) |
| Passive walkthroughs | User clicks "Next" through a sequence | Feature overviews | ~61% average |
| Hotspots / beacons | Pulsating dot the user clicks to reveal a tip | Feature discovery, non-blocking hints | User-initiated, no forced sequence |
| Announcement modals | Single overlay with a message or changelog | New feature releases, version updates | Varies by dismissal rules |
Action-driven tooltips require users to perform the actual task before advancing. Most effective for onboarding flows where skipping a step leaves the user stuck, but they feel controlling on non-critical features.
Passive walkthroughs are the "classic" product tour: tooltip, read, click Next. Chameleon analyzed 15 million tour interactions and found 61% average completion, dropping to 16% for tours longer than seven steps (Chameleon Product Tour Benchmarks).
Hotspots are non-blocking. A pulsating dot on a UI element that reveals a tip on click. Good for progressive disclosure in complex dashboards where a linear tour would overwhelm.
Announcement modals aren't sequential tours, but they belong to the same toolkit. A modal with a screenshot, changelog, or video. One-shot, dismissible.
Why product tours matter
Guided users activate faster, and the data is consistent across multiple sources. Flagsmith reported a 1.7x increase in signups and 1.5x increase in-app activation after adding interactive tours (as of March 2026), while Appcues' 2024 Benchmark Report found tour completers convert to paid at 2.5x the rate of non-completers.
But the research also shows when tours backfire. Tours longer than five steps drop to 34% completion. Delay-triggered tours complete at just 31%, while user-initiated tours hit 67%. Progress indicators improve completion by 12%.
The implication for developers: build short tours (three to five steps), let users opt in, show progress. The architecture should make this the default path.
Product tours in Tour Kit
Tour Kit is a headless React library for building product tours that handles state, positioning, and focus management without prescribing any visual design. The core package ships under 8KB gzipped with zero runtime dependencies, and the architecture splits across 10 composable packages you install individually.
Tour Kit requires React 18+ and is TypeScript-first. It doesn't include a visual builder. If your team needs no-code, a SaaS tool like Appcues or Userpilot is a better fit. Tour Kit is for teams that want full control within their existing component library.
Read the complete product tours guide for implementation details, or follow the React 19 quickstart to build your first tour in five minutes.
FAQ
What is the difference between a product tour and a walkthrough?
A product tour is any in-context UI guidance sequence. A walkthrough is a specific subtype that guides users through a multi-step process in order. All walkthroughs are product tours, but hotspots, announcement modals, and single-step tooltips are product tours that aren't walkthroughs.
What is a good product tour completion rate?
Chameleon's analysis of 15 million interactions puts the average at 61%. Three-step tours reach 72%, seven-step tours drop to 16%. Above 60% for short tours is good. Above 75% is strong. Below 40% usually means the tour is too long or triggers at the wrong time.
Do product tours hurt performance?
It depends on the library. Styled libraries like React Joyride ship at 37KB gzipped, adding measurably to Time to Interactive on mobile. Headless libraries like Tour Kit target under 8KB with zero dependencies. The real performance concern is the positioning engine: poorly implemented positioning causes layout thrashing during scroll events.
Are product tours accessible?
Most implementations are not accessible by default. Accessible product tours require ARIA role="dialog" on each step, focus trapping, keyboard navigation (Escape to dismiss, Tab to cycle), and screen reader announcements. WCAG 2.1 AA requires all of these. Tour Kit builds focus management and ARIA attributes into its core hooks automatically.
Related articles
What is a hotspot? In-app guidance element explained
Learn what a hotspot is in onboarding UX. Covers definition, accessibility, code examples, and when to use hotspots vs tooltips in your React app.
Read article
What is a slideout? In-app messaging element explained
Learn what a slideout is, how it differs from modals and drawers, and when to use slideout panels for in-app messaging and onboarding.
Read article
What is a tooltip? (and when to use tooltips in product tours)
A developer's definition of tooltips covering ARIA patterns, WCAG 1.4.13, the four tooltip types, and how tooltips work inside product tours.
Read article
What is AGPL? Why license choice matters for open-source libraries
Learn what the AGPL license requires, how it differs from MIT, and why it matters when picking open-source JavaScript libraries. Includes real examples.
Read article