Jimo Help Center
Using Jimo
Using Jimo
  • Introduction to Jimo
    • Welcome!
    • What is Jimo?
  • Getting started
    • Installing Jimo
    • Extension
    • Initial Setup
    • Designing Your First Experience
  • Experiences
    • Tours & Modals
      • Components
    • Surveys
      • Components
    • Banners
      • Components
    • Hints
      • Components
    • Checklists
      • Components
      • Behavior
    • Resource Center
      • Components
    • Changelog
      • Dashboard
        • Overview
        • Analytics
      • Changelog
        • Changelog Builder
        • Changelog Components
        • Changelog Navigator
        • Positionning (Trigger)
        • Changelog Preview
      • Posts
        • Post Builder
        • Post Components
        • Post Navigation
        • Multiple Languages
        • Post Preview
  • Design and manage experiences
    • Dashboard
    • Spaces
    • Builders
      • Flow Builder
      • Content Builder
      • In-app Builder
    • Navigator
    • Triggers & Conditions
      • Steps Triggers
      • Conditions
    • Theme
    • Multiple Languages
    • Positioning
    • Preview
  • Target & publish experiences
    • Overview
    • Trigger on the right spot (Show on)
    • Target specific URLs/Domains (Where)
    • Target right people (Who)
    • Trigger at the right time (When)
      • Planning Your Experience
      • Rate Limiting - Prevent overwhelming users
    • Increase visibility (Boost)
    • Mesure outcomes (Goal)
  • Monitor and analyze user data
    • Analytics
    • Users & Segments
      • Users
      • Segments
      • Import
      • Survey responses segmentation
    • Success Tracker
      • Overview
      • Trackers
      • Events
  • Admin & Settings
    • Project management
    • General Settings
    • Installation
    • Team Management
    • Environments
    • Plan and Billing
    • Notifications and Account Settings
    • MAU (Monthly Active Users)
  • Integrations
    • Integration Setup
    • Events for Analytics Integrations
    • Segment.io
    • HubSpot
    • Salesforce
    • Maze
    • Amplitude
    • PostHog
    • Mixpanel
    • Heap
    • Figma
    • Calendly, Google Calendar, Zcal
    • Intercom
    • Invision
    • Zapier
    • Slack
    • Crisp
    • Server-Side Events
    • Webhooks
Powered by GitBook
On this page
  • Understanding the In-App Builder
  • First Time in the In-App Builder
  • Managing the Experience Flow
  • Interacting with Your Website
  • Managing Step Content
  • The In-App Builder Menu
  • Editing Step Elements
  • Previewing the Experience
  • In-App Builder Requirements

Was this helpful?

  1. Design and manage experiences
  2. Builders

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.

PreviousContent BuilderNextNavigator

Last updated 3 months ago

Was this helpful?

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.

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.

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

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.


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:

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.

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.


In-App Builder Requirements

If Jimo is not yet installed on your site, you can:

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

to UI elements immediately after selection.

⇒

You can also freely navigate while an element by maintaining Shift or Q in the CSS selector.

& : Lists step elements and provides direct access to customization parameters. The scroll in the properties section to access more options.

(if applicable): Configures conditional progression.

: Applies styling presets.

: Manages multilingual content.

For the In-App Builder to function, the on the page you are working on. If the snippet is missing, you won’t be able to load the builder properly.

Use the to load the snippet dynamically, allowing you to build experiences in context even before full implementation.

Position targeted steps
positioning
Triggers
Theme
Translations
Jimo snippet must be installed
Jimo Chrome Extension
Navigator
Properties Sidebar