> 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/experiences/tours-and-modals.md).

# Tours & Modals

## 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

{% embed url="<https://youtu.be/7b8Z2JA6hok>" %}
First Tour
{% endembed %}

#### **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

{% embed url="<https://youtu.be/8PGJ-V6T68M>" %}
First Modal
{% endembed %}

#### **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](https://explore.usejimo.com/dashboard) 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.

<figure><img src="/files/AHTGf31gdftEECnPWxGM" alt=""><figcaption></figcaption></figure>

#### **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.

<figure><img src="/files/uopA9YO9LoAa0Ml9LJVj" alt=""><figcaption></figcaption></figure>

#### **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&#x20;

1. **Navigate to Experiences:**

   * From your [Jimo dashboard](/docs/build/dashboard.md), go to [**Tours & Modals**](https://i.usejimo.com/tours).

   <figure><img src="/files/Zxr4tQ86wjmESRv8yBTY" alt=""><figcaption></figcaption></figure>

2. **Create or Select an Experience:**

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

   <figure><img src="/files/CE2bJ3SVMpnDul0SQa84" alt=""><figcaption></figcaption></figure>

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

   <figure><img src="/files/8T7QhT3uNyCfJoft02WU" alt=""><figcaption></figcaption></figure>

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.

   <figure><img src="/files/6gG1wkE4NpsgpoApLj1V" alt=""><figcaption></figcaption></figure>

***

## **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](https://help.usejimo.com/help-center/using-jimo/tours-and-modals/components).

### Builder

The [Builder](/docs/build/builders.md) 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.

<figure><img src="/files/6XeexxOPfG4Mn67twPIh" alt=""><figcaption><p>Builder</p></figcaption></figure>

<details>

<summary><strong>Name and Back Button (A)</strong></summary>

* **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](/docs/build/dashboard.md) overview of all your tours.

</details>

<details>

<summary><strong>Switch Tabs (B)</strong></summary>

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

</details>

<details>

<summary><strong>Action Buttons (C)</strong></summary>

* **Save:** Secure your progress with the 'Save' button, which also [automatically saves your work regularly](#user-content-fn-1)[^1].&#x20;
* [**In-App Editor:**](/docs/build/builders/in-app-builder.md) Visualize and edit the tour within the context of your actual website by indicating the starting point URL.
* [**Preview:**](/docs/build/preview.md) Simulate a full tour to see how it appears and behaves.
* [**Target & Publish:**](/docs/publish/target-and-publish.md) Set the criteria for who will see the tour and when it will be displayed.

</details>

***

### Flow Builder

The [Flow Builder](/docs/build/builders/flow-builder.md) 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.

<figure><img src="/files/TWfkQ39BBSehGevn2mPT" alt=""><figcaption><p>Flow</p></figcaption></figure>

<details>

<summary><strong>Adding and Managing Steps (A)</strong></summary>

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

</details>

<details>

<summary><strong>Preview Flow (B)</strong></summary>

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

</details>

<details>

<summary><strong>Step Management Options (C)</strong></summary>

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

</details>

***

### Content Builder

The [Content Builder](/docs/build/builders/content-builder.md) 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.

<figure><img src="/files/UjkGdwbyULtTFRfR1ffD" alt=""><figcaption><p>Content</p></figcaption></figure>

<details>

<summary><strong>Properties Sidebar: Elements Editor (A)</strong></summary>

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

</details>

<details>

<summary><strong>Builder Menu (B)</strong></summary>

* [**Flow Builder Access:**](/docs/build/builders/flow-builder.md) Switch back to the Flow Builder tab.
* [**Navigator:**](/docs/build/navigator.md) Manage and edit elements within the step.
* [**Triggers:**](/docs/build/triggers-and-conditions.md) Add condition-based actions (if/else logic).
* [**Themes:**](/docs/build/theme.md) Apply consistent styling across your tour.
* [**Translations:**](/docs/build/multiple-languages.md) Manage multi-language versions.

</details>

<details>

<summary><strong>Navigator (C)</strong></summary>

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

</details>

<details>

<summary><strong>Live Step Preview (D)</strong></summary>

* **Real-Time Editing:** View and edit elements in the central preview.
* **Element Interaction:** Click on elements to modify content directly.

</details>

<details>

<summary><strong>CSS Selector for Targeted Steps (E)</strong></summary>

* [**Positioning:**](/docs/build/positioning.md) 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.

</details>

<details>

<summary> <strong>Steps Triggers (F)</strong></summary>

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

</details>

{% hint style="warning" %}
If the [in-app builder](/docs/build/builders/in-app-builder.md) 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.&#x20;

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.
{% endhint %}

{% hint style="info" %}
The "Powered by Jimo" footnote is part of the **Essential plan**, upgrade your plan in the [billing settings](https://i.usejimo.com/settings/plan) to remove it.&#x20;

&#x20;![](/files/qTm866W5o1U4P7Szq8s9)
{% endhint %}

***

### A/B Test

The **A/B Test** feature lets you create and compare multiple **variants** of a tour to determine which version best achieves your goals.

<figure><img src="/files/c0pvF9oRlUkdNM07wmAs" alt=""><figcaption></figcaption></figure>

This allows you to experiment with different flows, designs, or messaging and make data-driven decisions about which version works best.

* Start from your tour’s **Goal settings** to create test variants.
* Each variant can be edited independently in the builder using the **Variant Switch**.
* Jimo will **split traffic randomly** between variants and track performance (completion or event goal).
* Once enough data is collected, you can **set a winning variant as default**, making it the live version for all users.

📖 For the full step-by-step guide, see the [A/B Test documentation.](/docs/analyze/a-b-test.md)

***

## Best Practices

{% stepper %}
{% step %}
**Keep It Concise**

Design tours with 2 to 5 focused steps targeting specific aspects or features.
{% endstep %}

{% step %}
**Start Small**

Begin with simple, targeted experiences to address key user pain points.
{% endstep %}

{% step %}
**Iterate and Expand**

Gradually build a library of experiences, interconnecting them to create comprehensive user journeys.
{% endstep %}

{% step %}
**Maintain Consistency**

Use themes to ensure all experiences are visually aligned and reflect your brand.
{% endstep %}

{% step %}
**Leverage Segmentation**

Utilize custom attributes to target the right users with the right messages at the right time.
{% endstep %}
{% endstepper %}

[^1]: <img src="/files/xfc0XXAh3gO7Jx08AauJ" alt="" data-size="original">