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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.usejimo.com/docs/build/builders/flow-builder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.