> 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/in-app-builder.md).
# In-app Builder
## **Understanding the In-App Builder**
The **In-App Builder** is an **overlay-based editor** that integrates directly into your web application, allowing you to build experiences in a **real-world context**. Unlike the **Flow Builder**, which manages step sequences, and the **Content Builder**, which refines individual step content, the **In-App Builder** provides real-time, context-aware editing.
It inherits the interface from the **Legacy Builder**, meaning all steps and elements are managed from the top bar rather than distinct Flow/Content Builder tabs.
The **In-App Builder** is especially useful when:
* **Precise step placement** is required for targeted elements that must attach to UI components.
* **You need to see how experiences behave in real-time** within the actual application instead of using a standalone preview.
* **You want to streamline the positioning and styling of elements** without switching between Jimo and your website.
It is available for **Tours, Surveys, Banners, and Hints**, providing contextual editing within your live application. Other experiences, such as Checklists or Changelogs, have a fixed structure that does not require in-app building.
***
## **First Time in the In-App Builder**
How to Access the In-App Builder:
**At Start (On Experience Creation)**
* When creating a new experience, check the **Edit in-app** option before clicking "Enter Builder."
* The In-App Builder will open in a new tab, where you can immediately start configuring steps in the context of your website.
{% hint style="info" %}
If you start in the **In-App Builder**, you will first need to **add a step** using the top bar menu.
* Choose from preset step structures.
* [Position targeted steps](/docs/build/positioning.md) to UI elements immediately after selection.
โ 
{% endhint %}
#### **Open Later (From a Standalone Builder)**
* If an experience is already created, you can enter the In-App Builder by clicking **Edit in-app** from the top bar inside the **Content Builder.**
* This will launch the In-App Builder in a new tab, allowing you to make adjustments in context.
> ๐ The In-App Builder opens in a new tab, allowing you to work directly within your application.
>
> **โ To exit**, simply **save and close the tab** to return to the standard builder.
***
## **Managing the Experience Flow**
Since the **In-App Builder** follows the **Legacy Builder** UI structure, it does not feature separate Flow and Content Builder tabs. Instead:
* **All steps are managed from the top bar**, where you can add [(+ button)](#user-content-fn-1)[^1], delete [(cross button on hover)](#user-content-fn-2)[^2], or reorder them [(drag & drop)](#user-content-fn-3)[^3].
* **To duplicate steps** just add a new step and select [the copy preset.](#user-content-fn-4)[^4]
* If needed, once positioned **selected step appears directly within your website**.
* If a **targeted stepโs attached element isnโt found**, an alert will prompt you to [navigate to the appropriate page](#user-content-fn-5)[^5] or [reposition the step](#user-content-fn-6)[^6].
> ๐ This structure makes the **In-App Builder** especially effective for designing **targeted experiences** that rely on elements in the interface.
### **Interacting with Your Website**
One of the key features of the **In-App Builder** is the ability to **freely navigate and interact with your application** while editing.
#### **Using Interact Mode**
To enable **Interact Mode**, click the **arrow button** in the top bar (located between **Save** and **Preview**). This allows you to:
* Navigate your site freely without affecting the builder.
* Interact with dropdowns, modals, and other dynamic elements.
* Click "Stop" in the bottom pop-up to **return to editing mode** while maintaining the current state.
> ๐ Interact Mode is particularly useful for **placing elements that only appear on user interaction**, such as pop-ups or expandable menus.
>
> \
> You can also freely navigate while [positioning](/docs/build/positioning.md) an element by maintaining **Shift** or **Q** in the CSS selector.
>
> 
***
## **Managing Step Content**
The **In-App Builder** retains the full feature set of the **Content Builder**, but with a streamlined interface designed for on-page editing.
### **The In-App Builder Menu**
The **editing menu** appears as a **movable overlay** within the application, consolidating all customization options in a single location. It includes:
* [**Navigator**](/docs/build/navigator.md) **&** [**Properties Sidebar**](/docs/build/builders/content-builder.md#properties-sidebar): Lists step elements and provides direct access to customization parameters. The **scroll in the properties section** to access more options.
* [**Triggers**](/docs/build/triggers-and-conditions.md) **(if applicable)**: Configures conditional progression.
* [**Theme**](/docs/build/theme.md): Applies styling presets.
* [**Translations**](/docs/build/multiple-languages.md): Manages multilingual content.
You can reposition this menu by **dragging the placement icon** in the top right corner.
### **Editing Step Elements**
* Select a step from the **top bar**.
* Edit elements using the **Navigator tab**.
* Adjust **properties and behaviors** in the embedded sidebar.
* All **changes update live in your application**, ensuring precise positioning and styling.
### **Previewing the Experience**
The **In-App Builder** offers several preview options:
* **Start preview from here**: Runs the preview from the exact page where your In-App Builder is currently open.
* **Begin preview at origin URL**: Redirects you to the page where you first opened the In-App Builder before starting the preview.
* **Go to specific page**: Opens the interact mode where you can navigate to the exact URL from which you want the preview to start.
{% hint style="warning" %}
If the **preview or positioning** mode has **trouble loading** when opened from a standalone builder, **try going in-app first**.
โ This often improves loading performance, as the tab and in-app overlay will already be open and initialized.
{% endhint %}
***
## **In-App Builder Requirements**
For the **In-App Builder** to function, the [**Jimo snippet must be installed**](/docs/getting-started/installing-jimo.md) on the page you are working on. If the snippet is missing, you wonโt be able to load the builder properly.
If Jimo is not yet installed on your site, you can:
* Use the [**Jimo Chrome Extension**](/docs/getting-started/extension.md) to load the snippet dynamically, allowing you to build experiences in context even before full implementation.
* Ensure that Jimo is correctly installed in a test or staging environment where you can preview and configure experiences safely.
{% hint style="warning" %}
If the **In-App Builder fails to load**, confirm that the snippet is present on the page or activate the Chrome Extension. \
\
The first time you use the extension, you may be asked to **re-log into Jimo** for authentication before the builder can function correctly.
{% endhint %}
[^1]: 
[^2]: 
[^3]: 
[^4]: 
[^5]: 
[^6]: 