> 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.md).

# Builders

## Introduction to Builders

All experiences in Jimo share a similar builder structure but with specific variations based on their type:

* **Flow Builder**: For managing sequential steps in experiences like Tours and Surveys.
* **Content Builder**: For editing the content, design, and behavior of individual steps.
* **Legacy Builder**: Serves as a simplified content editor for non-sequential experiences.
* **In-App Builder**: An overlay that lets you design directly in the context of your website.
* **AI Builder**: Acts as a smart starting point before continuing customization with other builders.

Each builder adapts to the needs of the experience type, ensuring flexibility and consistency in creating tailored user journeys.

***

## **When to Use Each Builder**

### [**Flow Builder**](/docs/build/builders/flow-builder.md)

* **Purpose**: To manage sequential logic and the progression between steps.
* **Applicable For**: Tours and Surveys.

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

* **Key Features**:
  * Add, reorder, and connect steps to create a logical flow.
  * Preview the entire user journey within a centralized view.

### [**Content Builder**](/docs/build/builders/content-builder.md)

* **Purpose**: To customize the design, style, and behavior of each step.
* **Applicable For**: All experiences, with varying access modes:
  * **Sequential Experiences (Tours & Surveys)**: Open via the **Content** tab in the Flow Builder.
  * **Non-Sequential Experiences (Banners, Hints, Checklists)**: Directly accessible as a standalone **Legacy Builder**.

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

* **Key Features**:
  * Edit individual step content and parameters.
  * Add elements like text, media, and buttons.
  * Configure behaviors, styles, and positioning.

### **Legacy Builder**

* **Purpose**: A streamlined content builder for non-sequential or single-step experiences.
* **Applicable For**: Banners, Hints, Checklists, and Changelog posts.

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

* **Key Features**:
  * Manage and design one step at a time.
  * Accessible top bar for step selection and management.

### [**In-App Builder**](/docs/build/builders/in-app-builder.md)

* **Purpose**: To design experiences directly on your website for real-world context and precision.
* **Applicable For**: Tours, Surveys, Banners & Hints.

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

* **Key Features**:
  * Attach steps to UI elements on your site.
  * Visualize how content will appear in context.

### [**AI Builder**](/docs/build/builders/ai-builder.md)

* **Purpose**: To instantly generate an initial product tour draft using AI, either by capturing a flow of user actions or by highlighting selected interface elements.
* **Applicable For**: Tours only.

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

* **Key Features**:
  * Record real user interactions to generate a step-by-step guide.
  * Highlight specific UI elements to create contextual tooltips or messages.
  * Seamlessly transition to Flow or In-App Builder for fine-tuning and customization.

***

## **Accessing Builders**

<details>

<summary><strong>Sequential Experiences (Tours &#x26; Surveys)</strong></summary>

Access the Flow Builder first, then transition to the Content tab to refine each step.

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

</details>

<details>

<summary><strong>Non-Sequential Experiences (Banners, Hints, Checklists)</strong></summary>

Directly access the Legacy Builder to manage and edit individual steps.

<img src="/files/4ZlbEn9Lk1K6oDO8YyvZ" alt="" data-size="original">

</details>

<details>

<summary><strong>In-App Builder (Tours, Surveys, Banners, Hints)</strong></summary>

Check the option on creation or click the **Edit in App** button from the builder interface to switch to the overlay view.

<img src="/files/gATF69uLbHHP3cMD39OX" alt="" data-size="original">   <img src="/files/WeCrTtFDKV5KoRkGJF5w" alt="" data-size="original">

</details>

<details>

<summary><strong>AI Builder (Tours)</strong></summary>

To access the AI Builder, click **New Tour** from your dashboard and select the **Start with AI** option. You'll be prompted to enter a starting URL before launching into one of two smart creation modes: flow recording or element highlighting.

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

</details>

***

## **Builder Structure**

All builder types share a consistent structure for ease of use, designed to simplify creating, editing, and managing Jimo experiences. \
\
Each part of the builder has distinct roles to streamline the process, whether you’re working on sequential flows, single-step experiences, or unordered steps.

### **Top Bar**

The **Top Bar** provides key navigation and action tools, tailored to the current builder type.

<figure><img src="/files/cu3E76sQjTlF222Wh3hd" alt=""><figcaption><p>Content</p></figcaption></figure>

<figure><img src="/files/UquBHCVEGW61Iwsw4aVQ" alt=""><figcaption><p>Flow</p></figcaption></figure>

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

<figure><img src="/files/V2R2ckTrcE19h9n7zyRZ" alt=""><figcaption><p>Legacy</p></figcaption></figure>

<figure><img src="/files/CEZDOpJ4L93tsx31tyGw" alt=""><figcaption><p>In-app</p></figcaption></figure>

<figure><img src="/files/TK8xrYfrcuBqh7wYNdHO" alt=""><figcaption><p>A/B test</p></figcaption></figure>

**⇒ From left to right:**

{% tabs %}
{% tab title="Arrow Button" %}

<figure><img src="/files/LvfLmcaCvSIHjzekPDqP" alt="" width="375"><figcaption></figcaption></figure>

Go back to the Dashboard.
{% endtab %}

{% tab title="Name & Type" %}

<figure><img src="/files/okutGzLJWP5f3B86ot63" alt="" width="375"><figcaption></figcaption></figure>

* Displays the type of the current experience (e.g., Tour, Survey, Hint, etc.).

<figure><img src="/files/G44HwERTlKnnim6iosyK" alt="" width="347"><figcaption></figcaption></figure>

* Edit the name of your experience.&#x20;
  {% endtab %}

{% tab title="Variant Switch" %}
The **Variant Switch** is available when an **A/B Test** is running on a **Tour**.\
It allows you to toggle between the **Original** and alternative variants (A, B) directly in the builder top bar.

* **Select a variant** from the switch to load its flow in the builder.
* Any edits you make will apply **only to the active variant**.
* The **Original variant** cannot be deleted, but you can freely edit or delete Variant A/B.

This feature ensures you can design, test, and refine each version independently while keeping them all under the same tour.

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

📖 For more details on creating and managing A/B Tests, see the [detailed documentation](/docs/analyze/a-b-test.md).
{% endtab %}

{% tab title="Builder-Specific Controls" %}

<figure><img src="/files/r0jXLH2tUbEV5vwv7OUv" alt="" width="260"><figcaption></figcaption></figure>

* **Flow/Content Tab Switcher** for sequential experiences (Tours, Surveys).

<figure><img src="/files/JIlNGycUWEPofLBORilJ" alt="" width="242"><figcaption></figcaption></figure>

* **Fixed/Editable Steps List** for non-sequential types (Hints, Checklists, Banners).
  {% endtab %}

{% tab title="Status Info" %}

<figure><img src="/files/7GB8MYBLqE7uqlOTkvKD" alt=""><figcaption></figcaption></figure>

* **Save Alert**: Green Checkmark confirms that changes have been saved successfully.

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

* **Missing Alert**: Indicates if the [Chrome extension](/docs/getting-started/extension.md) is missing and what that implies, with a link to the Extension Page.

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

* **Live Edit Alert:** Notify that you're editing an already published experience and tell what does it [implies in the builder and analytics](#user-content-fn-1)[^1].
  {% endtab %}

{% tab title="Action Buttons" %}

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

* **Save**: Save progress.
* **Edit In-App**: Launch the In-App Builder for direct editing on the target site.

  * Replaced by **Interact with App** when already in the in-app mode.

  Learn more on the [In-app Builder page](/docs/build/builders/in-app-builder.md).
* **Preview**: Simulate the experience to see how it looks and behaves.

  Learn more on the [Preview page](/docs/build/preview.md).
* **Target & Publish**: Manage targeting and publish the experience.&#x20;

  ⇒ Replaced by **Publish Changes** for edits.

  * Disabled when the experience flow is invalid, with hoverable tooltips listing missing or invalid configurations.

  Learn more on the [Target & Publish page](/docs/publish/target-and-publish.md).
  {% endtab %}
  {% endtabs %}

***

### **Menu Sidebar**

The **Menu Sidebar** serves as the central navigation within the builder, displayed differently based on the mode:

{% tabs %}
{% tab title="Vertical Sidebar (Content Builder)" %}
Visible in Flow, Content, and Legacy Builders.

<figure><img src="/files/kQjWp3NQs6JXxWaa8gyD" alt=""><figcaption><p>Content</p></figcaption></figure>
{% endtab %}

{% tab title="Horizontal Menu (In-app builder)" %}
Shown in the movable menu within the In-App Builder.

<figure><img src="/files/yioC4b175xQqjrpA4lxR" alt=""><figcaption><p>In-app</p></figcaption></figure>
{% endtab %}
{% endtabs %}

**⇒ Key tools in the menu:**

{% tabs %}
{% tab title="(Optional) Add Icon" %}
Opens the [Flow Builder](/docs/build/builders/flow-builder.md) to add more steps (only for sequential flows).
{% endtab %}

{% tab title="Navigator" %}
Manage all elements in the current step, add new ones, and configure their parameters. Learn more on the [Navigator page](/docs/build/navigator.md).
{% endtab %}

{% tab title="(Optional) Triggers & Conditions" %}
Define logic to progress steps, including triggers for Tours and conditions for Surveys. Visit the [Triggers & Conditions page](/docs/build/triggers-and-conditions.md).
{% endtab %}

{% tab title="Theme" %}
Save and apply visual designs for a consistent style across the experience. Learn more on the [Theme page](/docs/build/theme.md).
{% endtab %}

{% tab title="Translations" %}
Manage text alternatives for multiple languages. See the [Multiple Languages page](/docs/build/multiple-languages.md) for details.
{% endtab %}
{% endtabs %}

***

### **Center View**

&#x20;The **Center View** is the main preview area for designing and reviewing step content.

{% tabs %}
{% tab title="Flow Builder" %}
Displays a preview of all steps and their connections within a structured flow. \
Easily manage step order, rename them, and access quick controls for triggers, conditions, and positioning.

<figure><img src="/files/ksLCHS0hnljkHYVyfjJf" alt=""><figcaption><p>Flow</p></figcaption></figure>

* **Sequential Flows (Tours & Surveys)**:
  * Reorder, rename, and manage steps directly in the central view.
  * Quick access to triggers, conditions, and positioning options for targeted steps.
  * Preview targeted elements directly on the steps.
    {% endtab %}

{% tab title="Content Builder" %}
Focuses on a single step, highlighting the currently selected element in the [Content Builder](/docs/build/builders/content-builder.md).\
The right sidebar updates dynamically based on the selected element.&#x20;

<figure><img src="/files/C2Sy3dmeY7sc62dGWwtA" alt=""><figcaption><p>Content</p></figcaption></figure>

* **Element Interaction**: Click on any element in the preview to open its parameter settings, similar to accessing them through the navigator.
  {% endtab %}

{% tab title="In-app Builder" %}
Overlays the selected website in the background, allowing you to build experiences directly in context. See real-time positioning and interactions within the live environment.

<figure><img src="/files/Onj5U2gI4CjHXFB0yr7K" alt=""><figcaption><p>In-app</p></figcaption></figure>
{% endtab %}
{% endtabs %}

***

### **Parameters Sidebar**

The **Parameters Sidebar** allows detailed configuration of steps, tailoring behaviors, styles, and positioning.

{% tabs %}
{% tab title="Right Sidebar (Content Builder)" %}

<figure><img src="/files/VQMxmzUgigYMtyoirQrX" alt=""><figcaption><p>Content</p></figcaption></figure>
{% endtab %}

{% tab title="Movable Sidebar (In-App Builder)" %}

<figure><img src="/files/rcQ0UD3VBrMGtcMck5IX" alt=""><figcaption><p>In-app</p></figcaption></figure>
{% endtab %}
{% endtabs %}

|                       Dynamic Content                       | Core Sections                                                                  | Options                                                                                |
| :---------------------------------------------------------: | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- |
| **Updates based on the selected element in the Navigator.** | **Parameters are grouped into categories like Behavior, Content, Style, etc.** | **Each parameter is detailed within the Components section for each experience type.** |
|                            Tours                            | [Main features](/docs/experiences/tours-and-modals.md#main-features)           | [Components](/docs/experiences/tours-and-modals/components.md)                         |
|                           Surveys                           | [Main features](/docs/experiences/surveys.md#main-features)                    | [Components](/docs/experiences/surveys/components.md)                                  |
|                           Banners                           | [Main features](/docs/experiences/banners.md#main-features)                    | [Components](/docs/experiences/banners/components.md)                                  |
|                            Hints                            | [Main features](/docs/experiences/hints.md#main-features)                      | [Components](/docs/experiences/hints/components.md)                                    |
|                          Checklists                         | [Main features](/docs/experiences/checklists.md#main-features)                 | [Components](/docs/experiences/checklists/components.md)                               |

[^1]: ![](/files/sD2XXbIcnINArfYTrNpw)