In-app Builder
Design, customize, and preview Jimo experiences directly within your website. This ensures that all elements are positioned accurately and the overall experience aligns with your live UI.
Last updated
Was this helpful?
Design, customize, and preview Jimo experiences directly within your website. This ensures that all elements are positioned accurately and the overall experience aligns with your live UI.
Last updated
Was this helpful?
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.
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.
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 to UI elements immediately after selection.
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.
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 , delete , or reorder them .
To duplicate steps just add a new step and select
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 or .
📝 This structure makes the In-App Builder especially effective for designing targeted experiences that rely on elements in the interface.
One of the key features of the In-App Builder is the ability to freely navigate and interact with your application while editing.
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 an element by maintaining Shift or Q in the CSS selector.
The In-App Builder retains the full feature set of the Content Builder, but with a streamlined interface designed for on-page editing.
The editing menu appears as a movable overlay within the application, consolidating all customization options in a single location. It includes:
Navigator & Properties Sidebar: Lists step elements and provides direct access to customization parameters. The scroll in the properties section to access more options.
Triggers (if applicable): Configures conditional progression.
Theme: Applies styling presets.
Translations: Manages multilingual content.
You can reposition this menu by dragging the placement icon in the top right corner.
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.
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.
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.
For the In-App Builder to function, the Jimo snippet must be installed 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 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.
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.
⇒
