# Product Tours: In-App Walkthroughs for SaaS Apps

> Guided in-app walkthroughs: the five types, what they are, what makes one work, and how to ship one.

*Source: https://stepskit.com/features/product-tours*

## Types of product tours

| Type | Trigger | Typical length | Purpose |
| --- | --- | --- | --- |
| Welcome tours | First sign-in | 3–5 steps | Get a new user from sign-up to the first action that delivers value. |
| Feature announcements | You ship something new | 1–2 steps | Tell existing users about a feature they'd otherwise miss. Frequency-cap so power users don't see it repeatedly. |
| Secondary onboarding | Post-activation, on user state | Varies | Introduce depth — advanced settings, integrations, team features. |
| Training tours | Role or plan | 5–10 steps | Deeper paths for admins, power users, or new hires in a customer account. |
| Activation nudges | A single moment | 1 step | Tooltip, contextual hint, or empty-state CTA. Most platforms ship them under the same SKU as full tours. |

## What is a product tour?

A product tour is a guided in-app walkthrough that highlights features or onboards new users to a SaaS product. Tours appear as overlays, tooltips, or modals anchored to UI elements, stepping users through a path. They're triggered by user state — first sign-in, feature release, plan upgrade — and dismissed once completed.

Done well, a tour helps a new user reach their first meaningful action faster. Done poorly, it's a forced sequence of blue dots people dismiss without reading.

### The parts of a product tour UI

| Part | What it does |
| --- | --- |
| Overlay | Dims the rest of the page so one element is obviously the subject. |
| Spotlight | The cut-out around the target element, positioned from a CSS selector at runtime. |
| Popover | Copy, step counter, and controls — anchored to the target and repositioned when it moves. |

## Tour vs. walkthrough vs. demo vs. tooltip

| Surface | Sequenced? | Trigger | Lifespan | Best for |
| --- | --- | --- | --- | --- |
| Product tour | Yes — ordered steps | User state (sign-in, upgrade, release) | Dismissed once completed | Walking someone through a workflow in order |
| Walkthrough | Yes — often used interchangeably | Same as a tour | Same as a tour | The same thing. In practice the two words name one pattern; pick one and stay consistent |
| Interactive demo | Yes | A link you send | Lives outside the product | Prospects who have not signed up — a clickable replica, not your live app |
| [Tooltip](/features/tooltips.md) | No — one element | Hover, click, or first encounter | Stays available indefinitely | Contextual help that should still be there in six months |

## When to use a product tour (and when not to)

**Use one when:** your product has non-obvious workflows, onboarding drop-off is measurably high, or you ship features users keep missing. The signal isn't "new feature shipped" — it's "new feature shipped that nobody clicked."

**Skip it when:** the product is self-evident, your audience is technical and resents hand-holding, or — most often — better empty states would do the same job for less. A welcome screen with one good CTA usually beats a five-step walkthrough explaining what the buttons do.

The hardest case to call is the tour as a crutch. If you're reaching for one because users keep getting stuck somewhere, it may be papering over UX you should fix instead. Ask whether you'd still need the tour if the screen made the next step obvious. If the answer is no, fix the screen first.

## What makes a good product tour

| What most teams ship | What actually gets completed |
| --- | --- |
| Plays on every page load until the user rage-quits | Runs once per user, or once per meaningful state change |
| Nine steps explaining what every button does | Three to five steps ending at the first real action |
| Skip hidden, or only on the first step | Skip visible on every step — it raises completion, not lowers it |
| Anchored to a CSS class the next redesign renames | Anchored to a stable `data-tour-target` attribute |
| The same tour for admins, end users, and free plans | Targeted by role, plan, and page before it ever plays |
| Shipped, then never looked at again | Per-step views and drop-off tracked, so step 3 gets rewritten |

1. **Brevity.** First-run tours work best at 3–5 steps. Past five, completion falls off sharply. A sixth step usually belongs in a separate secondary-onboarding tour.
2. **Skippable, always.** Make Skip visible on every step. Counter-intuitively, an obvious skip button increases completion — it removes the "is this thing going to end?" anxiety.
3. **Triggered by state.** Once per user, or once per state change. Implement frequency capping at the platform level so tour authors never have to think about it.
4. **Targeted.** A tour aimed at admins shouldn't play for end users. A Pro-plan feature tour shouldn't play for free users — that's a paywall, not onboarding.
5. **Anchored to stable selectors.** The biggest cause of tour breakage in production is anchoring to elements whose CSS classes or DOM position change during a redesign.
6. **Measured.** Without analytics you only know a tour exists, not whether it works.

## What StepsKit ships with every tour

- **Point-and-click builder** — build tours visually in the dashboard; non-engineers ship and edit without filing a ticket.
- **Targeting** — role, plan, page URL, custom attributes, combined with AND.
- **Page-level visibility** — URL pattern rules decide where a tour is eligible to play.
- **Frequency capping** — show-once per visitor, enforced at the platform level.
- **Theming** — a theme editor with per-step overrides, instead of CSS override fights.
- **One install** — a single async script tag, or the typed npm package.

## How to measure a product tour

- **Drop-off by step** — the shape that tells you which step to rewrite. A cliff at step 3 of 5 means step 3 is the problem, not step 5.
- **Completion rate** — what share of the people who started reached the final step. Useful only next to the drop-off step that explains it.
- **Time to first action** — the one that actually decides it. Compare how long people who finished the tour took to reach your activation event against people who skipped it. A tour with 80% completion and no downstream lift is decorative.

## How to build a product tour

1. **Install the embed** — one async script tag, or the typed npm package if you already have a build step.
2. **Anchor steps to your live UI** — build the tour in a point-and-click builder against your real app; each step anchors to an element by its CSS selector.
3. **Set targeting and frequency** — decide who sees it (plan, role, URL pattern) and cap it to once per visitor.
4. **Publish — no deploy** — the tour goes live on the domains you choose, straight from the dashboard.

### Hand-coded with a JavaScript library

Open-source rendering libraries such as [Shepherd.js](https://shepherdjs.dev) or [react-joyride](https://docs.react-joyride.com) handle the overlay, popover, and keyboard navigation. Around them you still need to build:

- targeting (which user sees which tour)
- frequency capping (so the same tour doesn't replay)
- analytics (per-step engagement)
- a content surface (so non-engineers can edit copy)

Fine for one or two tours with a spare engineer. It stops being fine the moment a marketer wants to ship a tour without filing a ticket.

### No-code platform

Platforms including StepsKit, Appcues, Pendo, ProductFruits, and Userpilot ship rendering, targeting, frequency capping, a content editor, and analytics as one product. You do a one-line install and build tours visually in a [point-and-click tour builder](/features/visual-tour-builder.md). The trade-off is a recurring subscription instead of one-time engineering time. Break-even is usually around three or four tours.

```html
<script
  src="https://cdn.stepskit.com/stepskit.latest.js"
  data-api-key="YOUR_API_KEY"
  async
></script>
```

Comparisons: [StepsKit vs Pendo](/alternatives/pendo.md), [StepsKit vs UserGuiding](/alternatives/userguiding.md), [StepsKit vs WalkMe](/alternatives/walkme.md), and the full roundup of the [best product tour software](/blog/best-product-tour-software.md).

## Built for real apps

- **Under 15 KB, loaded async** — no impact on page load or Core Web Vitals.
- **Works in single-page apps** — steps are positioned from CSS selectors at runtime and repositioned when the target moves; React, Next.js, Vue, Angular, or plain HTML.
- **Show-once, enforced server-side** — an identified visitor who completed or dismissed a show-once tour has it filtered out before the payload reaches the page.
- **Published, not deployed** — authoring, edits, and rollout happen in the dashboard, scoped to allowed domains; the app never redeploys for a copy change.

## How to choose product tour software

| Criterion | What to check | StepsKit |
| --- | --- | --- |
| Pricing model | Most platforms price per MAU — the number you're trying to grow is the number that grows the bill. | [$19/mo flat](/pricing.md), no per-user fee |
| No-code authoring | Can a non-engineer build a tour without filing a ticket? | Point-and-click visual builder |
| Targeting | Role, plan, page URL, custom attributes. "Only admins on Pro" should be a checkbox, not a custom JS function. | Attribute rules, combined with AND |
| Frequency capping | Show-once-per-user is the floor. Better: show-once-per-state-change. | Show-once per visitor |
| Analytics depth | Minimum: per-step views, completion rate, drop-off step. | Per-step funnel + drop-off |
| Theming | Can you match your brand without writing CSS overrides? | Full theme editor, per-step overrides |
| Web vs. mobile | Most product tour software is web-only. | Web (including SPAs) |

## AI agents

StepsKit ships an MCP server, so an agent like Claude Code or Cursor can create, list, update, and delete tours — picking real selectors out of your own JSX instead of guessing at them. Agents create tours unpublished; nothing reaches users until you publish it in the dashboard. See [AI agents (MCP)](/features/ai-agents.md).

## FAQ

**What is a product tour?**
A guided in-app walkthrough that highlights features or onboards new users to a SaaS product. Tours appear as overlays, tooltips, or modals anchored to UI elements, triggered by user state (first sign-in, feature release, plan upgrade), and dismissed once completed.

**What are the types of product tours?**
Welcome tours (first-run onboarding), feature announcement tours (post-release), secondary onboarding tours (depth, after activation), training tours (admin or power-user paths), and single-step activation nudges.

**What's the difference between a product tour and a walkthrough?**
Nothing meaningful — the two words name the same pattern and are used interchangeably. What is genuinely different is an interactive demo: a clickable replica hosted outside your product, aimed at prospects who haven't signed up.

**What's the difference between a product tour and a tooltip?**
A tour is a sequenced walkthrough stepping a user through multiple UI elements; a tooltip is a single contextual element anchored to one place. Tours are triggered by state and end when completed; tooltips appear on hover or first encounter and stay available indefinitely.

**What are the parts of a product tour UI?**
Three: a dimmed overlay that isolates the subject, a spotlight cut-out around the target element (positioned from a CSS selector at runtime), and a popover anchored to that target carrying the copy, a step counter, and the controls.

**Should product tours be skippable?**
Yes, always — with a visible skip button on every step. Users who feel trapped dismiss the tour and form a negative association with the product.

**How long should a product tour be?**
First-run tours work best at 3–5 steps. If you have more to teach, split it across separate tours triggered by different user states rather than one long sequence.

**How do you create a product tour without code?**
Do a one-line install, then build tours visually in a no-code platform's dashboard. The platform handles overlay rendering, anchoring, frequency capping, and analytics.

**What JavaScript libraries can build a product tour?**
Shepherd.js and react-joyride are the common open-source choices. What they don't give you is targeting, frequency capping, per-step analytics, or a content surface non-engineers can edit.

**How do I measure a product tour's effectiveness?**
Completion rate, drop-off step, and time-to-first-action after completion. A tour with 80% completion but no measurable downstream activation lift is decorative, not effective.

**What's the best free product tour software?**
StepsKit has a free tier that covers most small SaaS apps with no time limit and no per-user fee. Open-source rendering libraries also exist for teams that want to hand-code, but targeting, frequency capping, and analytics have to be built on top.

## Related

- [Visual tour builder](/features/visual-tour-builder.md) · [In-app tooltips](/features/tooltips.md) · [AI agents (MCP)](/features/ai-agents.md)
- [User onboarding](/solutions/user-onboarding.md) · [Feature adoption](/solutions/feature-adoption.md)
- [User activation guide](/user-activation.md) · [Signup forms vs onboarding](/onboarding-vs-signup-forms.md)
- [Pricing](/pricing.md)