Flow Builder

The central hub for structuring sequential experiences like tours and surveys. It helps you organize, manage, and connect steps with ease, offering a clear visual of the user journey.

Understanding the Flow Builder

The Flow Builder is designed to simplify how you create and manage multi-step that follow a sequential logic, like Tours & Surveys.

It provides a visual representation of the step progression, allowing you to easily add, reorder, and connect steps. Instead of navigating through individual steps via a top bar, you now have a global view of the entire journey.

• Tours: Focus on guiding users through a multi-step journey based on conditions.

• Surveys: Collect responses step by step, with logic-driven flows based on the answers.

Easily switch between steps, visualize progress, and manage the flow in one centralized interface.

📝 For single-step or unordered experiences (e.g., Banners, Hints, Checklists), the Flow Builder isn’t needed, and the Content Builder is used instead.

---

First Time in the Flow Builder

To access the Flow Builder, follow these steps:

1. Creating a New Experience:

   • After clicking Enter Builder when creating a new Tour or Survey, you land directly in the Flow Builder.

   • This is where you add your first step before moving to customization.

   
2. Returning to the Flow Builder:

   • From the Content Builder, click the Flow tab in the Top Bar.

   • Alternatively, use the “+” menu icon in the left sidebar to return to the Flow Builder and add new steps.

   

📝 If you're working on Banners, Checklists, or Hints, there’s no Flow tab, as these experiences don't require step sequences.

---

Adding Steps

In the Flow Builder, the right sidebar provides a list of step types available for the selected experience type.

How to Add a Step

• Drag & Drop a step from the sidebar into the flow preview.

• After placing a step, you’ll be redirected to the Content Builder to customize its content.

Step Types by Experience

Tours

Steps differ mainly in style and placement:

• Fixed Steps: Positioned relative to the screen (e.g., Snippets, Modals).

• Targeted Steps: Attach to a specific UI element (e.g., Tooltips, Badges).

More details in the tours components.

Surveys

• Steps are primarily interaction types (e.g., MCQs, NPS, Open Questions).

More details in the surveys components.

• You choose one style (from Tour step types) for the entire survey.

---

Steps Management

The Flow Builder allows you to organize steps efficiently, rename them, and overview how users progress between them.

Quick Actions in the Flow View

Rename a Step (A)

Double-click the step name at the top of each step.

(In Legacy or In-App Builder, this can be done from the Navigator main section.)

Rearrange Steps (B)

Use the double arrow icon to drag and drop a step within the flow.

(In Legacy or In-App Builder, this can be done from the Top Bar.)

Duplicate a Step (C)

Click the copy icon to make an exact duplicate.

(In Legacy or In-App Builder, this can be done from the Top Bar, just add a step and select the copy preset.)

Delete a Step (D)

Click the trash icon to remove it.

(In Legacy or In-App Builder, this can also be done from the Top Bar.)

Flow Visualization & Step Progression

The Flow Builder provides visual indicators for how users move between steps:

Progress Arrows (A)

Arrows show progression paths from a step’s CTA, trigger, or target to the next step.

Behavior Quick Access (B)

Clicking on an arrow or its origin grants quick access to the relevant Content Builder settings.

Targeted Elements Preview (C)

For targeted steps, the target element is displayed above the step box for easy access.

Quick Access Controls

Even while in the Flow Builder, you still can:

• Click any step to open its parameters in the Content Builder.

• Modify triggers/conditions directly from the quick access bar below each step.

• Adjust targeting for UI-attached steps using the quick-access icon above them.