# No-Code Product Tour Builder for SaaS Apps

> StepsKit's visual tour builder is a no-code editor for building interactive product tours that run inside a live SaaS app. Steps are anchored to real UI elements with a point-and-click picker, copy is written in the dashboard, and publishing pushes changes to every embedded site without a redeploy.

*Source: https://stepskit.com/features/visual-tour-builder*

## Definition

A product tour builder is a no-code tool that lets non-engineers create interactive walkthroughs inside a SaaS application. It provides a visual editor — a point-and-click element picker plus a canvas — for anchoring steps to live UI elements, writing the popover copy, arranging the sequence, and publishing to production. The output is an in-app overlay that highlights one element at a time and explains it.

The alternative is hand-coding: an engineer wires up selectors, writes step copy in JSX, and ships a new build for every edit. With a builder, the dashboard handles authoring, the embed handles runtime, and changes go live without a redeploy.

## Capabilities

| Capability | What it does |
| --- | --- |
| Point-and-click element picker | Open your live app from the dashboard and click any element to anchor a step. Generates a CSS selector that survives SPA route changes. |
| Visual canvas | Steps are cards on a horizontal drag-and-drop canvas rather than a numbered list. Reorder, branch, and preview transitions. |
| Live preview | Step copy renders in the popover as you type — matching the published output down to theme colors and stage padding. |
| Audience targeting | Rules engine matching on plan, role, company, URL pattern, or any custom attribute passed via the embed. Combine with AND/OR. |
| Frequency capping | Cap a tour to once per identified visitor. Anonymous visitors are handled separately. |
| Per-tour and per-step theming | Popover background, text, button colors, overlay opacity, stage padding, border radius. Step-level styles override tour-level. |
| Per-step analytics | Every step emits viewed, next-clicked, prev-clicked, dismissed, and completed events. The dashboard reports drop-off and completion. |

## How it works

1. **Connect your live app.** Install StepsKit — one npm package if you have a bundler, one async script tag if you don't — and create a project in the dashboard. No framework lock-in: React, Next.js, Vue, Angular, or plain HTML. See [installation docs](/docs/install.md).
2. **Build on the canvas.** Click an element in your live app to anchor a step, write the title and body inline, arrange the sequence. Each step is a card you can reorder, branch, or delete.
3. **Theme and target.** Set brand colors in the theme panel. Pick audiences by plan, role, custom attribute, or URL pattern. Set frequency capping.
4. **Publish.** The tour goes live for visitors matching your rules — no redeploy, no rebuild. Edits republish instantly to every embedded site.

## Choosing between surfaces

| Surface | Sequential? | Anchored? | Use when |
| --- | --- | --- | --- |
| Tour builder | Yes | Per-step | Walking a user through a multi-step workflow in order |
| [Tooltip builder](/features/tooltips.md) | No | Per-element | Persistent contextual help that waits for a click |
| Announcement | No | Banner / modal | Broadcasting a launch to every user at once |

Pick a **tour builder** when there is a workflow to learn — a setup wizard, a multi-step feature, a guided first-run flow. Pick a **tooltip builder** when the help should wait on the page until the user is ready to ask. Pick an **announcement** when reach matters more than persistence and the message is identical for every user.

## Use cases

- **First-run onboarding without a modal wall.** A four-step tour anchored to the real UI, so users see their actual data and click through at their own pace.
- **Announce a feature where it lives.** Target the tour to users matching the buyer persona; start it on the page containing the new control; finish in one or two steps.
- **Recover an under-adopted workflow.** Pull the drop-off list from analytics, find the step losing the most users, edit the copy, republish — no PR review.

## FAQ

**How does this differ from coding tours by hand?**
A coded tour means an engineer wires up selectors, writes copy in JSX or YAML, ships a build, and redeploys for every edit. A builder replaces that with a visual editor: the picker runs on your live app, copy lives in a dashboard, publishing pushes to every embedded site without a rebuild. The trade-off is committing to a hosted runtime; in exchange you get same-day iteration, analytics, targeting, and frequency capping.

**Does it work in single-page apps?**
Yes. The runtime uses a `MutationObserver` to re-resolve anchors when the DOM changes, so steps keep tracking the right element across React, Vue, or Angular route transitions. No re-initialization on navigation, no framework-specific glue.

**Can I match popover styling to my brand?**
Yes — background color, text color, button colors, overlay color and opacity, stage padding, and border radius, at both tour and step level. Step-level styles take precedence. The base CSS matches the dashboard preview exactly.

**How do I install it?**
Install once, your way: `npm install stepskit` in a bundled app, or one async script tag on a site with no build step. Under 15 KB gzipped, and the engine updates itself from the CDN. The same embed serves tours, [in-app tooltips](/features/tooltips.md), and the analytics tracker — adding surfaces later doesn't add a request.

**"Product tour builder" vs "product tour software" — is there a difference?**
Used interchangeably. "Builder" emphasizes the authoring surface; "software" emphasizes the broader platform (editor plus runtime, analytics, targeting, frequency capping). Most modern tools, StepsKit included, ship both in one product.

**Will it work with my analytics stack?**
Yes. Tour, step, and audience engagement are reported in the built-in dashboard. Tour events also fire as DOM `CustomEvent`s (`tour_started`, `step_viewed`, `tour_completed`, etc.), so you can pipe them into Segment, PostHog, Mixpanel, or any existing handler — no separate SDK.

## Related

- [All features](/features.md)
- [In-app tooltips](/features/tooltips.md)
- [Product tours guide](/features/product-tours.md)
- [User onboarding](/solutions/user-onboarding.md) · [Feature adoption](/solutions/feature-adoption.md)
- [Pricing](/pricing.md)