Flows are multi-step in-app experiences — onboarding tours, feature announcements, walkthroughs, and contextual prompts. Each step is either a Modal (flexible overlay) or a Tooltip (anchored to a specific element on the page). You build them visually in the Flows builder using a drag-and-drop cell layout system.

What's new?

The new builder makes designing Flows faster and more intuitive, and keeps adding capabilities customers have asked for. If you're used to legacy Flows, here's what you can now do:

• Flexible layouts without CSS — size and position step containers and content blocks with drag-and-drop controls.
• Delay start of a flow or step — set the time to wait before a step is displayed
• Skip a step if element isn't found — If a selector can't be found, this setting lets the Flow move on instead of erroring out
• Copy and paste blocks — duplicate content within or across steps.
• Personalization and emoji shortcuts — type {{ to insert a user property or : to add an emoji.
• Richer content actions — make text, buttons, and images trigger navigation, events, or property updates on click.
• Backgrounds with gradients and images
• Responsive steps — content grows to fit instead of clipping on narrow screens.
• Improved themes, localization, undo/redo, and AI-assisted building.

Prerequisites

• The Appcues SDK is installed on your site.
• The Appcues Chrome extension is installed (required for previewing on your live site and for Tooltip element targeting).

Create a new Flow

1. Go to Experiences > Flows 2.0 and click Create a Flow.
2. The creation dialog asks for three things:

• Flow name — An internal name to identify this Flow. Not visible to users.
• Preview URL (optional) — The URL of the page in your app where you want to preview the Flow. When editing in the Chrome extension, the builder loads this URL.
• Theme (optional) — Select an existing theme or create a new one. You can edit the theme later from the builder.

3. Click Create.
4. Choose the type of the first step in your Flow:

• Modal — For floating content. Best for announcements, onboarding steps, and any content that should command attention. Modals appear in the center of the screen by default, but can also be set to hug the sides of your page.
• Tooltip — Anchored to a specific element on your page via a CSS selector. Best for feature callouts, contextual help, and guided walkthroughs. Tooltips include an arrow pointing to the target element and automatically scroll the page to bring it into view.

You can mix Modal and Tooltip steps in the same Flow — add more steps later from the step bar at the bottom of the builder.

Where to build

Tip: The builder opens in the Chrome extension by default so you can design against your real app. This matters most for Tooltips, which anchor to real page elements. Building in context lets you catch layout and interaction issues you'd miss on a blank canvas.

You can build Flows in two places:

• Studio Builder — Build content within Appcues on a blank canvas. Good for quickly laying out the basics before you need to see the Flow in the context of your app.
• Chrome extension — Build on top of your live app. Use this when you want to confirm your content works well against your real UI, or when you need to choose CSS selectors for Tooltip steps.

Work with steps

Flow content is divided into steps that a user progresses through in sequence.

Add steps

Click the + button in the step bar at the bottom of the builder. Choose Modal or Tooltip for the new step. When you add a step, you can start from scratch or from a saved template (see Use step templates).

Reorder steps

Drag steps in the step bar to change the order.

Delete steps

Select a step in the step bar and delete it. If you delete all steps, the step type picker reappears.

Clone a step

Click the clone icon in the step settings panel to duplicate the selected step.

Step templates

Save any Modal or Tooltip step as a reusable template, then drop it into future experiences — templates keep their styling, so they look right even in a differently-themed Flow. See Use step templates to save, add, rename, and delete them.

Step settings

Select a step and open the step settings panel to configure its appearance and behavior.

For a Modal step, the panel has three tabs:

• Settings — Set the on-screen position and add or remove a close button.
• Design — Set corner radius, background, spacing (margin and padding), and backdrop options.
• Advanced — Apply custom CSS to the step.

Set the step background

On the Design tab, the background control supports three fill types. Switch between them with the segmented control:

• Color — A solid color.
• Gradient — A color gradient with adjustable stops.
• Image — An uploaded background image.

Responsive height

Steps use a minimum height. The step is at least the height you set, but grows taller when the content needs more room — so nothing gets cut off on narrow or mobile screens.

Set step animations

In Step Settings, the Animation section controls how a step enters and leaves the page. Set an Entrance and, optionally, an Exit animation, then click the play icon next to each to preview it.

• Entrance options: None, Fade in, Scale in, Spring scale, and Slide in or Drawer in from the top, bottom, left, or right.
• Exit options mirror these: None (the default), Fade out, Scale out, and Slide out or Drawer out to the top, bottom, left, or right.

Set a presentation delay

In Step Settings, set a Presentation delay (in milliseconds) — the time to wait before a step is displayed, including the first step. Use it to let the page finish loading before the step appears, or to hold a contextual step until, say, 30 seconds in. This applies to any step type.

Set a navigation action

If a Flow guides users across multiple pages, set a navigation action on the step you want them to land on. Choose Redirect to send the user to a URL automatically, or Let them navigate to wait for them to get there themselves before the step shows. See Build a Flows across pages for more details. 

Tooltip-specific settings

Tooltip steps anchor to a specific element on your page, so they need extra configuration beyond what Modals need.

Set the target element

Tooltips anchor to a CSS selector. You can type a selector in Studio Builder, but to pick one by clicking in your app — or to confirm a selector is valid and unique — click Open in Extension. Fine-tune position using pixel or percentage values.

Refine the selector in the extension

When the extension opens, toggle Refine selection on to narrow the selector. Refinement options include:

• Tag — Match by HTML tag (e.g., H1, DIV).
• ID — Match by the element's unique identifier (e.g., #sidebar).
• Class — Match by a CSS class (e.g., .card-container).
• Href — Match by a link's destination (e.g., /settings).
• By order — Match by the element's position among siblings (e.g., 2nd of 3 matching elements).
• By text — Match by the text content inside the element.

If the CSS selector doesn't match any element on the current page, the Tooltip floats in the center of the builder with a warning. Click Adjust placement to re-select the target.

Backdrop

Tooltip steps have three backdrop modes:

• None — No backdrop. The Tooltip appears without dimming anything.
• Soft — A subtle spotlight around the target element; the rest of the page dims slightly.
• Hard — A full backdrop with a cutout spotlight around the target. Everything outside the cutout is dimmed and non-interactive.

Advance on click of element

Toggle Advance on click of element on to let users advance by clicking the target element itself — useful for guided walkthroughs where the user needs to interact with the element the Tooltip points to. When this is enabled alongside a next-step button, both work: the user can advance by clicking the target or the button.

Advance if selector can't be found

Tooltips depend on their target element being present. If Appcues can't find the selector in time, this setting lets the Flow move on instead of erroring out — a more resilient experience for end users.

1. On a Tooltip step, turn on Advance if selector can't be found.
2. Choose an Action:

• Next step — Advance in the direction the user is traveling (forward normally, or back if they arrived via a previous-step action).
• Go to step — Jump to a specific step you pick. This option is unavailable when the current step is the only step.

3. Set Wait time before advancing — how long Appcues keeps trying to find the selector before it gives up and advances. Enter a value in milliseconds. The default is 500 ms; the builder accepts up to 30000 ms (30 seconds).

This setting requires Chrome extension version 9.31.7 or later.

Build your step content

Flows 2.0 uses the shared experience builder to lay out and fill each step — the same builder Embeds use. Rather than repeat it here:

• Arrange the layout — split cells into rows and columns, then size them. See Design step layouts.
• Add and style content — text, images, buttons, and iFrames, with click actions, personalization, borders, and copy/paste. See Design content in the experience builder.
• Reuse a step — save it as a template. See Use step templates.

Edit the close button

When a step shows a close (X) button, you can restyle it. Turn on Show close button in Step Settings, then click the edit (pen) icon next to it — or click the X on the canvas — to open its design panel. You can set the close button's color, background, hover color, corner radius, size, spacing, and position (top-left or top-right).

Style the Flow's theme

In Experience Settings, click Edit theme to open the theme editor. Configure it to match your product:

• Theme settings — Name the theme and optionally enable dark mode.
• Colors — Set foreground (text), background, and primary (buttons/accents) colors.
• Interface — Choose a font family (System Sans-serif, System Serif, System Monospaced, or System Rounded), font size (S/M/L), corner radius, and spacing (S/M/L). This sets the default font for all text blocks in the Flow.

Click Save to apply the theme.

Themes are reusable across Flows 2.0 and Embeds, so both can share a theme for a consistent look. See New themes and advanced styling.

Localize Flows 2.0

Flows 2.0 support localization so you can serve content in multiple languages. Translate content manually in the builder, upload XLIFF files for bulk translation, or use AI translation to auto-translate into your configured languages. Click the language dropdown in the builder to enable target languages and start translating.

For full setup — configuring languages, working with XLIFF files, and AI translation — see Localize experiences.

Preview and publish

Preview

Click the Preview icon in the top bar. If the Chrome extension is installed and connected, it opens a preview on your site. If not, you're prompted to enter a preview URL.

Share a link to a specific step

The builder URL includes a ?step= parameter that updates as you move between steps. Copy the URL to share a link that opens a teammate directly on the step you're viewing.

Publish

Click Target & Publish in the top bar to open the Flow's Settings page in Studio, where you configure targeting, frequency, and page rules before publishing.

After publishing, editing the Flow creates a new draft version. Your published version stays live until you explicitly publish the updated draft.

V1 → V2 event mapping

Flows 2.0 uses a different event model than legacy Flows.

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.

Using legacy Flows? All integrations that support legacy Flow events (flow_started, flow_completed, flow_skipped, etc.) continue to work — legacy and v2 integration cards, Zapier, custom webhooks, and all client-side analytics integrations.

FAQ

Can I publish legacy Flows and Flows 2.0 Experiences at the same time? Yes. Only one Flow displays at a time, even across both types. The Priority setting includes both types.

Can I trigger Flows 2.0 Experiences from other experiences? Yes — from legacy Flows, other Flows 2.0 Experiences, Pin buttons, Banner buttons, Launchpad link items, and Checklist items. Support for including Flows 2.0 Experiences in a Launchpad's dynamic Flow List is in progress.

Can I target and segment based on user exposure to Flows 2.0 Experiences? Yes, this is now available.

What if I want to include survey questions in my Flow? Survey block support is on the roadmap. For now, include external surveys (Typeform, SurveyMonkey, etc.) using the IFrame content block.