# Flow Builder
## **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](https://help.usejimo.com/docs/experiences/tours-and-modals/components).
Surveys
* Steps are primarily **interaction types** (e.g., MCQs, NPS, Open Questions).
More details in the [surveys components](https://help.usejimo.com/docs/experiences/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**
{% tabs %}
{% tab title="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**.)
{% endtab %}
{% tab title="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**.)
{% endtab %}
{% tab title="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.)
{% endtab %}
{% tab title="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**.)
{% endtab %}
{% endtabs %}
### **Flow Visualization & Step Progression**
The **Flow Builder** provides **visual indicators** for how users move between steps:
{% tabs %}
{% tab title="Progress Arrows (A)" %}
**Arrows** show **progression paths** from a step’s **CTA, trigger, or target** to the next step.
{% endtab %}
{% tab title="Behavior Quick Access (B)" %}
**Clicking on an arrow or its origin** grants **quick access** to the relevant Content Builder settings.
{% endtab %}
{% tab title="Targeted Elements Preview (C)" %}
**For targeted steps**, the **target element** is displayed **above the step box** for easy access.
{% endtab %}
{% endtabs %}
### **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.
