> 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/overview.md).

# Overview

Quickly design and modify interactive tours & modals that captivate and guide your users.

## A**ccessing the Builder**

Navigate to the Builder from the dashboard to start crafting your tour.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FfmhS2JH0jGSsKhKavcu3%2Fimage.png?alt=media&amp;token=dacf4752-4f12-49ae-b463-ccf5916d2800" alt=""><figcaption><p>Dashboard</p></figcaption></figure>

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FVS1nlFW6rfrT4ZX2AAjy%2F2024-11-26_12-37.png?alt=media&amp;token=12b3787a-cf7f-44c5-977a-5fccc89e3420" alt=""><figcaption><p>Empty state</p></figcaption></figure>

## **Main Features**

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2Fsh4rDxAWyl1DUpkvuj19%2FTMbuilder.png?alt=media&amp;token=702c3411-e54a-4468-bd91-1df887bdd49b" alt=""><figcaption><p>Tour builder</p></figcaption></figure>

* **A (Tour Name and Back Button)**: At the very top, you have the ability to edit the name of your tour. The arrow next to it allows you to quickly return to the Dashboard for an overview of all your tours.
* **B (Step Management Navigation Bar)**: This bar is your control center for managing the steps of your tour. It facilitates the [navigation](/docs/experiences/tours-and-modals/steps-and-navigation.md) through different components of the experience you're crafting.
* **C (Action Buttons)**: Here, you'll find multiple actions:
  * The 'Save' button to secure your progress. This button allows you to force save but the builder [automatically saves your work regularly](#user-content-fn-1)[^1].&#x20;
  * The 'In-app editor' to visualize and edit the tour within the context of your actual website. You just have to indicate[ the starting point URL](#user-content-fn-2)[^2] on which you want to open your builder.
  * The '[Preview](/docs/build/preview.md)' to see a full simulation of your tour.
  * The '[Target & Publish](/docs/publish/target-and-publish.md)' to set the criteria for who will see the tour and when.
* **D (Feature Panels Access)**:
  * The 'Flow Selector' to add new steps and manage the flow.
  * The 'Navigator' to see a structured view of your tour's elements.
  * The 'Themes' to apply consistent styling across your tour.
  * The 'Translations' to manage multi-language versions of your tour.
* **E (Properties Sidebar)**: This sidebar is dedicated to the properties and parameters of the currently selected element in the navigator. Modify attributes like positioning, styling, and animations here.

{% hint style="warning" %}
If the 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.&#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 %}

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FrbJR2SlZHDm6rtWZcmcE%2FTMbuilderComponentsAttributesexample.avif?alt=media&amp;token=4d3f8091-289a-4055-b09d-ba4df391e026" alt="" width="563"><figcaption><p>Tooltip step properties</p></figcaption></figure>

* **F (Live Step Preview)**: The central stage of the Builder provides a real-time preview of the currently selected step, showing you exactly how it will appear in the tour.

{% hint style="info" %}
The "Powered by Jimo" footnote can be removed as a paying option in your [billing settings](https://i.usejimo.com/settings/plan). (It's already included in the Scale plan.)

&#x20;![](https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FAclVbhwlAP7OXXXVxCgy%2Fimage.png?alt=media\&token=36fc90c1-aeb6-457c-bf87-cf8396e15bb8)
{% endhint %}

***

<details>

<summary><mark style="color:blue;background-color:yellow;">Best Practices</mark></summary>

* **Consistent Design**: Use the themes panel to maintain a consistent look across your tour.
* **Contextual Editing**: Use the in-app editor to ensure each step fits perfectly within your site.

</details>

[^1]: <img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FQ5r0zzDqjnuzuqPc4xSm%2FTMbuilderSave.png?alt=media&amp;token=1f8501d8-918c-40b5-bbc2-1028e527d5e6" alt="" data-size="original">

[^2]: <img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FQwm1ROw2nxF0G2zOXfbS%2FTMbuilderInappBtn.png?alt=media&amp;token=2930651c-f1a9-4a6f-aa6e-a1360c003df9" alt="" data-size="original">
