Flows are multi-step in-app experiences — onboarding tours, feature announcements, walkthroughs, and contextual prompts. Each step is either a Modal (centered 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 adds new features that customers have suggested. If you're used to using legacy Flows, you can explore these improvements:

• Flexible size controls

The size and relative positioning of step containers and individual content blocks can now be handled with simple drag-and-drop controls. No more wrestling with custom CSS to get the layout you want.

• Improved localization

Add localized content (including images) directly in the builder, upload a standard XLIFF file, or use AI translation. RTL is now supported as well.

• Advanced CSS styling

Simpler UX for pasting in CSS from an external source, as well as new fine-tuned controls to make Flows match the exact look and feel you want.

• Build with AI

Tell Captain AI what you're trying to build and let our agents do most of the work for you to get started. Or, chat side-by-side in the Builder to make agentic edits.

• Undo/redo

Styles changes, text updates, theme changes... you name it, you can undo it.

• Improved themes 

Create and edit themes directly in the Builder, set theme variants for specific styles, and know right away when style changes in your Flow are overriding your brand theme.

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 your Flow in the Chrome extension, the builder uses this URL to load your site.
• 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 that point users to specific parts of the UI. Tooltips include an arrow pointing to the target element. Tooltips automatically scroll the page to bring the target element into view when the step appears.

Pick the type that matches your first step. 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.

Working in the Studio Builder versus the Chrome Extension

You can build Flows in two different tools:

• The Studio Builder: build out content within Appcues on a blank canvas. If you're looking to quickly lay out the basics of your content and don't yet need to check how the Flow looks in the context of your app, Studio Builder is a good option.

• The Chrome Extension: if you want to make sure your Flow content interacts well with your app, or need to choose CSS selectors for your tooltip steps, you can fine-tune your designs in the Chrome Extension.

By default you edit in Studio Builder. To go to the Chrome Extension, click the Open in Extension button in Step Settings.

Work with steps

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

Add steps

Click the + button in the step bar at the bottom of the Builder. Choose Modal or Tooltip for the new step. You can mix both types in a single Flow.

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

A step can be cloned by clicking the clone icon in the step settings panel.

Step settings

Select a Modal step and open the step settings panel to configure its appearance and behavior. The Modal step settings panel has three tabs:

• Settings — Define the position on the screen where the Modal shows up and add or remove a close option.
• Design — Set corner radius, background color, spacing (margin and padding) and backdrop options. 
• Advanced (see the Advanced Styling section in this doc to learn more about applying custom CSS styles to your Flow content)

Tooltip steps anchor to a specific element on your page. They require additional configuration beyond what Modals need.

Set the target element

Tooltips need to anchor themselves to a specific CSS. You can type in a selector in Studio Builder manually, but if you want to choose a selector by clicking in your app, or need to confirm if your selector is valid and unique, click Open in Extension to go to the Chrome Extension. Fine-tune position using Pixel or % values.

Refine the selector in the extension

When the extension opens, you can refine your CSS selector with additional precision:

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 applied to the element (e.g., .card-container).
• Href — Match by the URL in a link element'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 message. Click Adjust placement to re-select the target element.

Backdrop

Tooltip steps have three backdrop modes:

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

Advance on target click

Toggle this on to let users advance to the next step by clicking the target element itself — useful for guided walkthroughs where the user needs to interact with the UI element the Tooltip is pointing to.

Presentation delay

You can set a time delay (in milliseconds) before a Flow's step (including the first step) loads. Scenarios for a time delay include:

• Waiting just a moment to make sure the app's page has fully loaded before resenting the user with the Flow.
• Waiting for, say, 30 seconds and then presenting the user with a contextual Flow asking them if they're stuck on the page and need help.

Navigation

If the Flow is intended to guide a user across multiple pages in your app, you can set navigation actions on a step before it is displayed. You can automatically Redirect the user to that URL, or Let them navigate themselves before displaying the next Flow step.

Build your step content

Arrange cells

The builder uses a cell-based layout system. Each step consists of a grid of cells — you split cells, resize them, and then drop content blocks inside. If you'd like, you can arrange and size all of the step's cells first before adding content. The overall size of the step can also be changed using the drag-and-drop control.

Add content blocks

Click the + icon inside a column to add a block. Available block types:

• Text — Rich text including headings, body copy, and inline formatting. Choose Auto to have Appcues detect and apply the font from the page where the Flow appears — use Preview to confirm the inherited font. You can also choose a specific font to override the theme default for that block.
• Button — A clickable CTA with multiple action options: Next step, Previous step, Go to step, Snooze, Dismiss, Go to URL, or Trigger Flow. Buttons also support Track event and Update user properties toggles to fire analytics events or update user data when clicked. See Buttons for more details.
• Image — Upload an image with alt text. Optionally configure an Action on click to make the image interactive. Open the Design tab to set the fill mode (Fit or Fill)
• IFrame — Embed external content by entering a URL or pasting a Code snippet. Use this for videos, forms, or third-party widgets.

Block actions

You can configure actions when a user clicks on certain block elements. 

Buttons and Images:

• Next step — Advance to the next step in the Flow.
• Previous step — Go back one step.
• Go to step — Jump to a specific step by number.
• Snooze — Temporarily hide the Flow.
• Dismiss — Close the Flow (the user can see it again based on frequency settings).
• Trigger Flow — Launch a different Flow. Optionally specify a URL to navigate to before triggering it.
• Go to URL — Navigate to a URL (opens in the same tab or a new tab).

Optionally you can also do the following on a click:

• Track event — Fire a custom event (useful for analytics integrations).
• Update user properties – Change or set an attribute on the user's Appcues profile.

Rich text:

• Rich text only allows a Go to URL action.

Style the Flow's theme

In Experience Settings, click Edit theme to open the theme editor.

Configure the theme to match your product's look and feel:

• 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 they can share the same theme for a consistent look. See New themes and advanced styling.

Localize Flows 2.0

Flows 2.0 support localization so you can serve your content in multiple languages. You can translate content manually in the builder, upload XLIFF files for bulk translation, or use AI translation to auto-translate into your configured languages.

To set up localization, click the language dropdown in the builder to enable your target languages and start translating.

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

Preview and publish

Preview

Click 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.

Publish

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

After publishing, editing the Flow in the builder 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. This includes both legacy and v2 versions of all integrations, Zapier, custom webhooks, and all client-side analytics integrations.

Coming soon

• Extend Flows with custom Javascript

Embed third party content in a Flow, trigger other widgets to open on a Flow click, or force an interaction with your page to progress a Flow.

FAQ

Q: Can I publish legacy Flows and Flows 2.0 Experiences at the same time?
A: Yes! We will continue to only display one Flow at a time, even if you have published experiences across both types. The Priority setting on the Flow settings will include both types.

Q: Can I trigger Flows 2.0 experiences from other experiences? 
A: Yes, you can trigger from the following experiences:

• Legacy Flows
• Other Flows 2.0 Experiences
• Pin buttons
• Banner buttons
• Launchpad link items
• Checklist items

Support for including Flows 2.0 Experiences in a Launchpad's dynamic Flow List is in progress.

Q: Can I target and segment based on user exposure to Flows 2.0 Experiences?
A: Not currently, but that feature is coming soon.

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