What is a Flow?
Learn what Flows do, which steps and content blocks they use, and how they track progress.
Table of Contents
Flows are multi-step experiences in your product that guide users through it. Use them to onboard new users, announce features, collect feedback and drive adoption, without writing code.
Also known as: product tours, walkthroughs, in-app guides, onboarding Flows.
This article covers Flows built in the Flows 2.0 builder, which every new Flow uses. Flows created before Flows 2.0 use the legacy builder. See Legacy Flows at the end.
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: ask survey questions inside a step, in context.
- Announcements: share important updates with a Modal when users log in.
- Conversion nudges: prompt trial users to upgrade at the right moment.
For an element that stays on the page, use a Pin. For a resource center users open on demand, use a Launchpad. For a list of tasks with progress, use a Checklist.
To build one, see Create a Flow.
Step types
Every step is a Modal or a Tooltip. You can mix both in one Flow.
Modals
Modals float over your app. They appear in the center of the screen by default, and can also sit against the sides of the page. Use them to open a Flow, make an announcement or show rich content. You set the backdrop, entrance and exit animations, and background (a color, a gradient or an image).
Tooltips
Tooltips point at an element in your app, found with a CSS selector. Use them for guided walkthroughs: "click here, then here." The page scrolls the element into view automatically.
- Backdrop: None, Soft (dims the page around the element) or Hard (blocks everything outside the element).
- Advance on click of element: the user moves on by clicking the element itself. It's on by default for new Tooltips.
- Advance if the element can't be found: the Flow skips the step instead of stopping.
See Build Flows 2.0 Experiences for every step setting.
What you can put in a step
Each step is a layout of cells, and each cell holds one block. You split and size cells yourself. See Design step layouts.
| Block | Use it for |
|---|---|
| Text | Headings, paragraphs, lists and links. Type {{ to insert a user property, or : to add an emoji. |
| Image | A picture or GIF. |
| Button | A click that moves the user on, opens a link or runs another action. |
| Icon | A single emoji, or your own SVG. |
| iFrame | Content from another site, such as a video or a form. |
| JavaScript | Content your own code renders, such as a scheduler or live data from your API. Available when JavaScript snippets are turned on for your account. See Add JavaScript snippets. |
| Survey | Text input, Single Select, Multi Select and Rating questions. See Create surveys in Flows 2.0 and Embeds. |
See Design content in the experience builder for how to add and style each block.
Make something happen on click
Buttons, images and text links can each run an action: Next step, Previous step, Go to step, Go to URL, Trigger Flow, Snooze, Dismiss or Run JavaScript. Under Additional options, the same click can also track an event, update a user property, run a JavaScript snippet or mark the Flow as complete.
To send different users different ways from one button, based on a survey answer or a user property, use conditional actions.
Reuse steps and styles
- Save any step as a template and add it to other Flows. See Use step templates.
- Themes set fonts, colors and styles for every block, and you can share one theme across Flows and Embeds. See New Themes and advanced styling and Use design tokens.
- Translate a Flow by hand, with XLIFF files or with AI translation. See Localize experiences.
How a Flow runs
Steps run in order. Buttons and Tooltip clicks move the user forward, and Go to step can jump to any step. If the next step is on a different page, set a navigation action on it. See Build a Flow across pages.
A Flow ends in one of three ways:
- Completed: the user finishes the last step, or clicks something set to mark the Flow as complete.
- Dismissed: the user closes it with the close button or a Dismiss action.
- Snoozed: the user clicks a Snooze action, and the Flow returns after the number of days you set.
Who sees a Flow, where, and how often, is set on its Settings tab. See Configure an experience's settings.
Target users based on a Flow
Other experiences can target users by what they did with a Flow. The conditions are has been seen, has been completed and has been dismissed, plus the has not been version of each.
Flow events and integrations
V1 → V2 event mapping
Flows 2.0 uses a different event model than legacy Flows.
| Legacy Flow event | Flows 2.0 equivalent |
|---|---|
flow_started |
appcues:v2:experience_started |
flow_completed |
appcues:v2:experience_completed |
flow_skipped |
appcues:v2:experience_dismissed |
| No equivalent | appcues:v2:experience_snoozed |
flow_error |
appcues:v2:experience_error |
step_started |
appcues:v2:step_seen |
step_completed |
appcues:v2:step_completed |
step_interacted |
appcues:v2:step_interaction |
form_submitted |
appcues:v2:step_interaction with interactionType: "Form Submitted"
|
step_error |
appcues:v2:step_error |
step_recovered |
appcues:v2:step_recovered |
Integration support for Flows 2.0
Flows 2.0 uses a new event model (appcues:v2:experience_* and appcues:v2:step_*). Not all integrations support these events yet.
| Integration | Flows 2.0 support | Notes |
|---|---|---|
| Salesforce (v2) | Supported | Requires the new Salesforce v2 integration card in Studio. The legacy Salesforce integration does not receive Flows 2.0 events. |
| HubSpot (v2) | Supported | Requires the new HubSpot v2 integration card in Studio. The legacy HubSpot integration does not receive Flows 2.0 events. |
| Slack (v2) | Supported | Requires the new Slack v2 integration card in Studio. The legacy Slack integration does not receive Flows 2.0 events. |
| Zapier | Supported | Select "Custom Event Received" as the trigger event and manually type the Flows 2.0 event name (e.g., appcues:v2:experience_started). The v2 events do not appear in the dropdown — you must type them. |
Using legacy Flows? All integrations that support legacy Flow events (flow_started, flow_completed, flow_skipped, etc.) continue to work. This includes both legacy and v2 versions of all integrations, Zapier, custom webhooks, and all client-side analytics integrations.
Legacy Flows
Flows created before Flows 2.0 use the legacy builder. They aren't migrated automatically, and they open in the Chrome extension with Edit in extension. You can still create one from the Chrome extension by choosing Legacy. For how to build them, see Build a legacy Flow.
| Flows 2.0 | Legacy | |
|---|---|---|
| Step types | Modals, Tooltips | Modals, Slideouts, Tooltips, Hotspots |
| Layout | Cells you split and size | Fixed component slots |
| Content | Text, Image, Button, Icon, iFrame, JavaScript, Survey | Text, Images, Video, Buttons, Forms, Custom HTML |
| Step groups | None. Steps run in order | Steps are grouped by pattern |
| Themes | Themes with variants per block | Basic Themes |
| Custom CSS | Per block and per step | One global CSS field |
| Font | Auto inherits your app's font | Chosen by hand |
| Linking Flows | Trigger Flow on a click | Start another flow when the Flow finishes |
Legacy step types
- Modals come in three layouts: Standard, Sidebar and Full screen.
- Slideouts are smaller overlays at the edge of the screen. Users can still see your app behind them.
- Hotspots are beacons on elements. All Hotspots in a group show at once, and users open them in any order.
- Tooltips advance with a Next step button, or by clicking the element when the step has no button.
Step groups
Legacy Flows organize steps into groups of one pattern. Groups decide how progress bars count, how far Previous step goes back, and which Theme applies. See How step groups work.
Completion in legacy Flows
Legacy patterns count as done at different moments:
| Pattern | Counts as | When |
|---|---|---|
| Modals, Slideouts | "has been seen" | The step appears. No interaction needed. |
| Tooltips | "has been completed" | The user clicks Next, clicks the element, or dismisses the Flow. |
| Hotspots | "has been completed" | The user opens the beacon. |
A Show once legacy Flow that starts with Tooltips or Hotspots keeps showing until the user completes every step in its first group.
Legacy components
- Text, images and GIFs. See Add text, images and GIFs.
- Video. See Embed a video in a Flow.
- Buttons. See Customize and configure buttons.
- Forms and surveys. See Create forms and surveys (legacy Flows).
- Custom HTML. See Work with custom HTML.