Tours & Modals

Craft and customize engaging tours & modals with Jimo's Builder, featuring easy navigation, live previews, and a full suite of editing tools.

What Are Tours & Modals?

Tours and Modals are the cornerstone experiences within Jimo, designed to guide, inform, and engage your users seamlessly. Whether you're onboarding new users or making important announcements, Tours and Modals provide versatile solutions to enhance user interaction directly within your product.

  • Tours: Sequential groups of steps that guide users through your product's features and workflows. Ideal for onboarding, overviews, and user guides.

  • Modals: Single-step experiences perfect for simple announcements and contextual pop-ups that capture user attention.

Overview

📺 Tutorial: First Tour

First Tour

Tours

  • Sequential Guidance: Lead users through a series of steps, each highlighting different features or actions.

  • Contextual Placement: Attach steps to specific website elements or display them in fixed screen positions.

  • Interactive Flows: Incorporate CTAs and triggers to create dynamic user journeys, guiding users toward specific actions or pages.

📺 Tutorial: First Modal

First Modal

Modals

  • Single-Step Focus: Deliver concise messages or prompts without the need for a multi-step process.

  • Immediate Attention: Perfect for announcements, alerts, or quick feedback requests that require user interaction.

Use Cases

Explore our demo website to see examples of Tours and Modals in action. Choose between different experience examples to see how a tour or a modal can be effectively implemented in context.

Tours

  • Onboarding New Users: Help newcomers understand and navigate your product efficiently.

  • Feature Overviews: Showcase new or existing features to ensure users are aware and can utilize them effectively.

  • User Guides: Provide step-by-step instructions for complex workflows or tasks within your app.

Modals

  • Announcements: Inform users about important updates, new features, or promotions.

  • Quick Actions: Encourage users to take immediate actions, such as subscribing to a newsletter or downloading a resource.

How to Access

  1. Navigate to Experiences:

  2. Create or Select an Experience:

    • First-Time Users: Click on "Create Your First Tour".

    • Returning Users: Click the + New Tour button in the top-right corner.

  3. Choose a Template or Start from Scratch:

    • Templates: Select from a variety of prebuilt experiences tailored for different use cases.

    • From Scratch: Build your tour step-by-step for complete customization.

Main Features

Jimo's Tours & Modals come with a robust set of features designed to give you full control over your user experiences. Below is an overview of the overall process. For a detailed breakdown of each component specificities, visit our Components Page.

Builder

The Builder is your central hub for creating and customizing Tours and Modals. It features two main tabs, Flow Builder and Content Builder, allowing you to manage the structure and content of your experiences seamlessly.

Name and Back Button (A)

  • Edit Tour Name: At the very top, you can edit the name of your tour for easy identification.

  • Back to Dashboard: Use the arrow next to the name to quickly return to the Dashboard overview of all your tours.

Switch Tabs (B)

  • Switch Between Builders: Easily toggle between the Flow Builder and Content Builder tabs to manage different aspects of your experience.

Action Buttons (C)

  • Save: Secure your progress with the 'Save' button, which also .

  • In-App Editor: Visualize and edit the tour within the context of your actual website by indicating the starting point URL.

  • Preview: Simulate a full tour to see how it appears and behaves.

  • Target & Publish: Set the criteria for who will see the tour and when it will be displayed.

Flow Builder

The Flow Builder tab allows you to design the sequence and structure of your Tour or Modal. Here, you can add, arrange, and connect steps to create a seamless user journey.

Adding and Managing Steps (A)

  • Select Step Type: Choose the type of step you want from the sidebar (e.g., modal, tooltip, snippet).

  • Drag & Drop: Place and reorder the selected step into your flow effortlessly.

Preview Flow (B)

  • Flow Overview: Arrows indicate the progression between steps, while the central view displays each step.

  • Target Element Access: Quick access to target elements for positioning and trigger settings.

Step Management Options (C)

  • Rename Step: Click on the step name to rename it.

  • Reorder Steps: Use the double arrow icon to move steps up or down in the flow.

  • Duplicate or Delete: Easily duplicate steps or remove them using the respective icons.

Content Builder

The Content Builder tab is where you fine-tune the content and behavior of each step in your Tour or Modal. Customize elements, set behaviors, and ensure everything aligns with your brand and objectives.

Properties Sidebar: Elements Editor (A)

  • Modify Attributes: Adjust positioning, styling, and animations for the currently selected element in the navigator.

Builder Menu (B)

  • Navigator: Manage and edit elements within the step.

  • Triggers: Add condition-based actions (if/else logic).

  • Themes: Apply consistent styling across your tour.

Navigator (C)

  • Element List: See all elements in the current step, with the selected element highlighted.

  • Element Selection: Click to edit specific elements via the Properties Sidebar.

Live Step Preview (D)

  • Real-Time Editing: View and edit elements in the central preview.

  • Element Interaction: Click on elements to modify content directly.

CSS Selector for Targeted Steps (E)

  • Positioning: Use the quick access pop-up to apply CSS selectors to steps needing specific placement. Adjust the position from the step parameters in the sidebar.

Steps Triggers (F)

  • Advanced Behavior: Add triggers to define how steps behave based on user interactions or conditions.

If the in-app builder reloads each time you change steps or if the next button doesn't work, it may be caused by the initial URL where the builder was opened.

To avoid this issue, open the builder out-app and build each step individually by opening the builder in-app on the exact URL where the steps need to appear.

The "Powered by Jimo" footnote is part of the Essential plan, upgrade your plan in the billing settings to remove it.

Best Practices

1

Keep It Concise

Design tours with 2 to 5 focused steps targeting specific aspects or features.

2

Start Small

Begin with simple, targeted experiences to address key user pain points.

3

Iterate and Expand

Gradually build a library of experiences, interconnecting them to create comprehensive user journeys.

4

Maintain Consistency

Use themes to ensure all experiences are visually aligned and reflect your brand.

5

Leverage Segmentation

Utilize custom attributes to target the right users with the right messages at the right time.

PreviousDesigning Your First ExperienceNextComponents

Last updated