> For the complete documentation index, see [llms.txt](https://help.usejimo.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.usejimo.com/docs/build/builders/flow-builder.md).

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

<figure><img src="/files/20kuKmZtB2Y06I5XCON0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/XaXTk4XdusEcjYtxGmMg" alt=""><figcaption></figcaption></figure>

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.

   <figure><img src="/files/xSOIIujpQegQNSPAuRWY" alt="" width="563"><figcaption></figcaption></figure>
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.

   <figure><img src="/files/DgNpU9CMWSqpI7QIqq9k" alt="" width="563"><figcaption></figcaption></figure>

> 📝  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**

<figure><img src="/files/hiC01UJwsgpuvCPO70sW" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/IaLCOriq6xhBhkVvVj85" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/inc5Nc8pSneUsA1BT1k2" alt=""><figcaption></figcaption></figure>

### **Step Types by Experience**

<details>

<summary><strong>Tours</strong></summary>

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](/docs/experiences/tours-and-modals/components.md).

![](/files/5aiQhHteveygtB6aqQNt)![](/files/CBj90aKkbLkv2Zhc2rTe)![](/files/rZ9cCabpx8cQkUPcIbmm)

</details>

<details>

<summary><strong>Surveys</strong></summary>

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

More details in the [surveys components](/docs/experiences/surveys/components.md).

![](/files/HgB2smNPW5HAWepZWAnj)![](/files/r2En9hkR1DtlLTdUDDtC)

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

<img src="/files/0YT8w5B7bTjq9d6SB77I" alt="" data-size="original">

</details>

***

## **Steps Management**

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

<figure><img src="/files/lsnn03GltA5F9J8Mbpgd" alt=""><figcaption></figcaption></figure>

### **Quick Actions in the Flow View**

<figure><img src="/files/mdyot34WW9iN77gc62dQ" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Rename a Step (A)" %}
Double-click the **step name** at the top of each step.

<mark style="color:blue;">(In</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**Legacy or In-App Builder**</mark><mark style="color:blue;">, this can be done from the</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**Navigator main section**</mark><mark style="color:blue;">.)</mark>
{% endtab %}

{% tab title="Rearrange Steps (B)" %}
Use the **double arrow icon** to **drag and drop** a step within the flow.

<mark style="color:blue;">(In</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**Legacy or In-App Builder**</mark><mark style="color:blue;">, this can be done from the</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**Top Bar**</mark><mark style="color:blue;">.)</mark>
{% endtab %}

{% tab title="Duplicate a Step (C)" %}
Click the **copy icon** to make an exact duplicate.

<mark style="color:blue;">(In</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**Legacy or In-App Builder**</mark><mark style="color:blue;">, this can be done from the</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**Top Bar,**</mark> <mark style="color:blue;"></mark><mark style="color:blue;">just add a step and select the copy preset.)</mark>
{% endtab %}

{% tab title="Delete a Step (D)" %}
Click the **trash icon** to remove it.

<mark style="color:blue;">(In</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**Legacy or In-App Builder**</mark><mark style="color:blue;">, this can also be done from the</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**Top Bar**</mark><mark style="color:blue;">.)</mark>
{% endtab %}
{% endtabs %}

### **Flow Visualization & Step Progression**

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

<figure><img src="/files/KwOgvE3NIr2x8bEnOiD0" alt=""><figcaption></figcaption></figure>

{% 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**

<figure><img src="/files/VhRLBjkYEEL8UB1tFN2x" alt=""><figcaption></figcaption></figure>

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.