Flows are multi-step, in-app experiences that guide users through your product. Use them to onboard new users, announce features, collect feedback, and drive adoption — all without writing code.

Also known as: product tours, walkthroughs, in-app guides, onboarding flows.

Click here for a live example of a Flow 👀

Two Flow builders

Appcues has two Flow builders. Both create Flows that target, trigger, and analyze the same way — the difference is how you build the content.

New Flows default to the Flows 2.0 builder. Existing legacy Flows stay in the legacy builder — they are not migrated automatically.

• To build with Flows 2.0, see Flows 2.0 Builder.
• To build with the legacy builder, see Create a Flow (legacy).

The rest of this article covers concepts that apply to both builders unless noted otherwise.

When to use Flows

• Onboarding — walk new users through setup or key features step by step.
• Feature adoption — point users to a new feature with a Tooltip or announce it with a Modal.
• Feedback collection — add a survey form to a Slideout to gather responses in context.
• Announcements — use a Modal to share important updates when users log in.
• Conversion nudges — prompt trial users to upgrade at the right moment.

If you need a persistent, always-visible element instead of a guided sequence, consider Pins. For a resource center users can open on demand, see Launchpads. For task-based progress tracking, see Checklists.

Step types

Every step in a Flow uses a pattern type. Choose based on how much attention you want to capture and whether the step needs to point to a specific element.

Modals

Full-attention, screen-level experiences. Modals appear in the center of the screen with your app dimmed behind them. Use Modals at the start of a Flow to set context, deliver important announcements, or present rich content like images and videos.

In the legacy builder, Modals support three layout types:

• Standard — centered content with a dimmed backdrop.
• Sidebar — slides in from the side of the screen.
• Full screen — covers the entire viewport.

In the Flows 2.0 builder, Modals use the cell-based layout system with configurable backdrop, entrance/exit animations, and background styling. See Flows 2.0 Builder for details.

Tooltips

Pointers anchored to a specific element in your UI. Tooltips direct users through a sequence — "click here, then here." Use them for guided walkthroughs and step-by-step product tours. Each Tooltip attaches to an element using a CSS selector.

In the Flows 2.0 builder, Tooltip steps include three backdrop modes (None, Soft spotlight, Hard spotlight), an "Advance on target click" toggle, and automatic scroll-into-view. See Flows 2.0 Builder.

In the legacy builder, Tooltips progress in two ways:

• If the Tooltip has a Next step button, users click the button to advance.
• If the Tooltip has no button, users click the target element itself to advance.

Slideouts (legacy builder only)

Smaller overlays that appear at the edge of the screen. Slideouts are less intrusive than Modals — users can still see parts of your app behind them. Use Slideouts for feature announcements, quick feedback prompts, or upgrade nudges where you don't need full-screen attention.

Hotspots (legacy builder only)

Beacons anchored to elements in your UI. Unlike Tooltips, grouped Hotspots all appear on the page simultaneously, and users can expand them in any order. Use Hotspots for passive feature discovery — highlighting multiple areas of a page without forcing a specific sequence.

Hotspots in the same group display at the same time. All Hotspots in the group must be interacted with before the Flow moves to the next step group.

Step groups (legacy builder only)

In the legacy builder, steps are organized into step groups. A step group contains one or more steps of the same pattern type — for example, three Modals in a row, or two Tooltips pointing to related elements.

Step groups affect how your Flow behaves:

• Progress bars track progress within the step group, not across the entire Flow.
• "Previous step" buttons only navigate within the current step group. You can't go back to a previous group.
• Themes are applied per step group. You can use different themes in the same Flow by creating separate groups.
• Tooltips in a group must all be completed before the Flow advances to the next group.
• Hotspots in a group all display simultaneously. The group is complete once every Hotspot has been expanded.

When you add a step in the Builder, you choose whether to add it to the current group or start a new group. Steps within a group can be reordered but can't be moved between groups — to move a step to a different group, save it as a template, delete it, and re-add it to the target group.

Flows 2.0 does not use step groups. Steps are sequential — each step advances to the next in order, and you can mix Modal and Tooltip steps freely.

Step completion tracking

Step tracking works differently in the two builders. This matters for targeting conditions (e.g., "user has been seen step 2") and analytics.

Flows 2.0

All step types — Modal and Tooltip — track the same set of events. Every step can be targeted with any of these conditions:

• has been seen / has not been seen — The step rendered on screen.
• has been completed / has not been completed — The user advanced past the step (clicked a button, clicked the target element, or reached the next step).
• has been dismissed / has not been dismissed — The user closed the Flow without completing it (clicked the X or clicked outside the Modal).

Legacy builder

In legacy Flows, different pattern types track completion differently:

"Show once" Flows that start with Tooltips or Hotspots keep appearing until the user interacts with all steps in the first group. The Flow isn't marked as "seen" until that first group is completed.

Components and content blocks

Flows 2.0 builder

Content is organized in a cell-based layout. Each cell holds one block:

• Text — Rich text with typography controls (font, size, color, alignment, lists, links).
• Image — Upload or gallery images with fill mode options.
• Button — Configurable actions including next/previous step, go to URL, close, dismiss, trigger another Flow, track event, and snooze.

For layout details, see Build layouts in Embeds — Flows 2.0 uses the same cell system.

Legacy builder

Components are added from the component menu in the Builder:

• Text — headings, paragraphs, and rich text. See Add text, images, and GIFs.
• Images and GIFs — upload visuals or paste a URL.
• Videos — embed from YouTube, Wistia, or other hosts. See Embed a video.
• Buttons — navigate users, trigger actions, or track events. See Add and configure buttons.
• Forms and surveys — collect structured responses. See Surveys and forms.
• Custom HTML — embed any HTML for advanced use cases. See Work with custom HTML.