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

• Purpose: To manage sequential logic and the progression between steps.

• Applicable For: Tours and Surveys.

• Key Features:

  • Add, reorder, and connect steps to create a logical flow.

  • Preview the entire user journey within a centralized view.

Content Builder

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

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

• Key Features:

  • Manage and design one step at a time.

  • Accessible top bar for step selection and management.

In-App Builder

• Purpose: To design experiences directly on your website for real-world context and precision.

• Applicable For: Tours, Surveys, Banners & Hints.

• Key Features:

  • Attach steps to UI elements on your site.

  • Visualize how content will appear in context.

AI Builder

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

• 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

AI Builder (Tours)

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.

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.

⇒ From left to right:

Arrow Button

Name & Type

Builder-Specific Controls

Status Info

Action Buttons

Go back to the Dashboard.

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

• Edit the name of your experience.

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

• Fixed/Editable Steps List for non-sequential types (Hints, Checklists, Banners).

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

• Missing Alert: Indicates if the Chrome extension is missing and what that implies, with a link to the Extension Page.

• Live Edit Alert: Notify that you're editing an already published experience and tell what does it implies in the builder and analytics.

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

• Preview: Simulate the experience to see how it looks and behaves.

  Learn more on the Preview page.

• Target & Publish: Manage targeting and publish the experience.

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

Menu Sidebar

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

Vertical Sidebar (Content Builder)

Horizontal Menu (In-app builder)

Visible in Flow, Content, and Legacy Builders.

Shown in the movable menu within the In-App Builder.

⇒ Key tools in the menu:

Center View

The Center View is the main preview area for designing and reviewing step content.

Flow Builder

Content Builder

In-app 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.

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

Focuses on a single step, highlighting the currently selected element in the Content Builder. The right sidebar updates dynamically based on the selected element.

• Element Interaction: Click on any element in the preview to open its parameter settings, similar to accessing them through the navigator.

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.

Parameters Sidebar

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

Right Sidebar (Content Builder)

Movable Sidebar (In-App Builder)