> 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/getting-started/designing-your-first-experience.md).

# Designing Your First Experience

## Designing Your First Experience

Now that you’ve completed your initial setup, it’s time to walk through the lifecycle of creating an experience in Jimo. In this tutorial, we’ll build a simple **onboarding tour** for new, trialing users. This example demonstrates Jimo’s main workflow: **Design → Publish → Monitor**.

**What You’ll Learn:**

* Navigating to the relevant experience **dashboard**.
* Starting with a prebuilt **template** or starting **from scratch**.
* Using the **Flow Builder**, **Content Builder**, and other Jimo tools.
* Positioning steps in context with the **CSS selector**.
* Preparing your experience for **targeting**, **publishing**, and later **analytics**.

#### Choose the Right Type

<table data-full-width="false"><thead><tr><th>If you need…</th><th width="190.111083984375">Pick</th><th>Why</th></tr></thead><tbody><tr><td><mark style="color:$info;">A guided moment with a clear completion</mark></td><td><mark style="color:$info;"><strong>Sequential Flow</strong></mark></td><td><mark style="color:$info;">You control start/end, sequence, and success criteria.</mark></td></tr><tr><td>To maximize attention for an important update</td><td><p><strong>Tour/Modal</strong></p><p>(Flow)</p></td><td>High visibility and clear call-to-action.</td></tr><tr><td>To collect feedback in context</td><td><p><strong>Survey</strong></p><p>(Flow)</p></td><td>Trigger after actions to capture intent.</td></tr><tr><td>To keep users oriented and progressing</td><td><p><strong>Checklist</strong></p><p>(Flow)</p></td><td>Break milestones into trackable steps.</td></tr><tr><td><mark style="color:$info;">An always-on help or info surface</mark></td><td><mark style="color:$info;"><strong>Static Self-Serve</strong></mark></td><td><mark style="color:$info;">Users open it when they need it; it stays available.</mark></td></tr><tr><td>To reduce confusion at specific UI points</td><td><p><strong>Hints</strong></p><p>(Self-Serve)</p></td><td>Lightweight guidance, no interruption.</td></tr><tr><td>To centralize help, docs, and contact</td><td><p><strong>Resource Center</strong></p><p>(Self-Serve)</p></td><td>One place users can always find support.</td></tr><tr><td>To broadcast ongoing improvements</td><td><p><strong>Changelog</strong></p><p>(Self-Serve)</p></td><td>Users can browse updates anytime.</td></tr></tbody></table>

***

### Step 1: Accessing the Dashboard

1. **Open the** [**Jimo Dashboard:**](/docs/build/dashboard.md)\
   From your Jimo main menu, choose the type of experience you want to create and access the dashboard from the sidebar. In our case: **Tours & Modals**.<br>

   <figure><img src="/files/Zxr4tQ86wjmESRv8yBTY" alt=""><figcaption></figcaption></figure>
2. **Create Your First Tour:**
   * If this is your first time, you’ll see an “empty state” prompting you to “Create your first tour.”

     <figure><img src="/files/CE2bJ3SVMpnDul0SQa84" alt=""><figcaption></figcaption></figure>
   * Otherwise, click the **+ New Tour** button in the top-right corner.<br>

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

***

### Step 2: Choosing a Starting Point

You can start from a **template**, **from scratch**, or let **AI generate a first draft** for you.

* **Templates**: Prebuilt tours for common use cases—just tweak the content and visuals.
* **From Scratch**: Total flexibility to build your tour step-by-step.
* **Start with AI**: Record your ideal user flow or select elements directly in your app, and let Jimo generate a tailored draft for you.

> For this guide, let’s **start from scratch**.\
> If you prefer a faster kickoff, choose [**Start with AI**](/docs/build/builders/ai-builder.md#first-time-using-the-ai-builder) for automated draft creation.

<figure><img src="/files/4Cb0nZUgOZlgV58z6pcw" alt=""><figcaption></figcaption></figure>

**Name Your Experience:**\
Give your tour a clear, descriptive name (e.g., “Trial Onboarding Tour”).

**Open the** [**Builder:**](/docs/build/builders.md)

* At this point, you can choose to open the builder **in-app** (if Jimo is installed on the page or using the extension) or use the **standalone builder**.
* Let’s start in the **standalone builder**. You can always switch to in-app mode later to refine targeting and positioning.

Click **Enter Builder** to proceed.<br>

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

***

### Step 3: Building Your Flow

**Flow Builder Tab:**\
This is your experience’s structure, where you can add, arrange, and connect steps.

1. **Add Your First Step:**
   * Drag and drop a **Modal** step from the tool panel. This will serve as the welcome message for new trial users.<br>

     <figure><img src="/files/w1muFsSnyMQHEHYGzhEf" alt=""><figcaption></figcaption></figure>
2. **Automatically Move to Content Builder:**\
   Once you add your modal step, you’ll be taken to the **Content Builder** to edit its content.

***

### Step 4: Editing Your Step Content

In the **Content Builder**, you can:

* Click on any element in the central preview or use the navigator to select components.
* Customize text, images, buttons, and style.
* Access top-level settings for step behavior and user interaction.

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

For our welcome modal:

* Add a short title (“Welcome to Our Product!”)
* A brief description (“Ready to explore? Let’s show you around.”)
* A “Get Started” button to move forward in the tour.

<figure><img src="/files/1MENaJp8kumntG5zFZE1" alt=""><figcaption></figcaption></figure>

#### Right Sidebar: Elements Editor

* **Select an Element:** Click on any element within the central preview or use the **Navigator** to select it from the left sidebar.
* **Edit Parameters:**
  * **Text:** Change the text content directly in the editor.
  * **Styling:** Adjust fonts, colors, and sizes to match your brand.
  * **Behavior:** Set actions like button clicks or step transitions.
* **Advanced Options:** Access generic and behavioral settings at the top of the dropdown in the navigator or by clicking on the entire card.

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

#### Left Sidebar: Builder Menu

* **Quick access to the Flow Builder**
* [**Navigator:**](/docs/build/navigator.md)
  * **Manage Elements:** Easily add, remove, or reorder elements within your step.
  * **Access Specific Elements:** Quickly jump to any element’s settings through the navigator.
* **Additional Features:**
  * [**Triggers/Conditions:**](/docs/build/triggers-and-conditions.md) Add if/else logic to control step flow.
  * [**Theme Management:**](/docs/build/theme.md) Apply predefined themes for consistent styling across all steps.
  * [**Language Tab:**](/docs/build/multiple-languages.md) Handle translations to support multiple languages.

***

### Step 5: Adding More Steps

Go back to the **Flow Builder** and add another step, this time a **Tooltip**.

1. **Add Tooltip Step:**\
   Select a Tooltip step and place it in the flow after the Modal.<br>

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

2. [**In-App Positioning:**](/docs/build/positioning.md)\
   To attach a tooltip to a specific element on your website:

   * Switch to the in-app builder mode or hit the button target element in-app and choose the URL on which you want to place your tooltip step.

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

   * Use the [CSS selector](/docs/build/positioning.md#css-selector) to pinpoint the element you want to highlight.

   <br>

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

3. **Edit Tooltip Content:**\
   Back in the Content Builder, customize the tooltip’s text and appearance. For example, highlight a “Settings” button or a “Start a Project” link to guide users deeper into your app.

{% hint style="warning" %}
Positioning targeted steps requires either Jimo [installed](/docs/getting-started/installing-jimo.md) on that URL or the [extension](/docs/getting-started/extension.md) active.
{% endhint %}

***

### Step 6: Iteration and Preview

Feel free to add more steps, change designs, or adjust the order. Each step can be:

* Simple modals that greet users.
* Tooltips guiding users to specific features.
* Hotspots pinpointing important UI elements.
* Etc... (Check [experiences components](/docs/experiences/tours-and-modals/components.md)).

-> And interconnect steps to other experiences with CTA actions like Hints, Banners, or Checklists to create more advanced patterns as you grow comfortable.

[**In-App Builder for Contextual Edits:**](/docs/build/builders/in-app-builder.md)

* At any time, open the in-app builder overlay directly on your site.
* Preview exactly how the tour will look and behave for end users.

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

[**Preview Mode:**](/docs/build/preview.md)

* Test the flow from start to finish.
* Ensure everything appears as intended and the triggers work as expected.

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

***

### Step 7: Target & Publish

When you’re satisfied with your tour design, it’s time to configure how, where, and to whom it will appear.

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

-> Click the **Target & Publish** button to access the experience’s [targeting and publishing settings](/docs/publish/target-and-publish.md).

**What to Configure:**

1. [**Show On (Trigger):**](/docs/publish/trigger-on-the-right-spot-show-on.md)\
   Decide when the tour should start. For a simple onboarding, let’s trigger it **on page load**.
2. [**Where (Page Filtering):**](/docs/publish/target-specific-urls-domains-where.md)\
   Limit the experience to a specific URL (e.g., your main dashboard page).
3. [**Who (Audience):**](/docs/publish/target-right-people-who.md)\
   Use segments (e.g., a “Trial Users” segment) defined by the user attributes you’ve set up to ensure only trialing users see this tour.
4. [**When (Timing & Scheduling):**](/docs/publish/trigger-at-the-right-time-when.md)\
   Optionally schedule your experience or set an expiration date.
5. [**Goal (Optional Aim):**](/docs/publish/mesure-outcomes-goal.md)\
   Define success criteria, like whether users complete a certain step or interact with a key feature. This helps measure the impact of your onboarding.

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

**Publishing:**

* Click **Publish** and select the environment (e.g., staging or production).

<figure><img src="/files/5ub51PuYSwvXrBvNeov0" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Remember, you need Jimo [installed](/docs/getting-started/installing-jimo.md) (and a valid plan or active trial) to publish experiences.
{% endhint %}

***

### Step 8: Monitoring Your Results

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

After going live, visit the [**Analytics**](/docs/analyze/analytics.md) section to:

* Track usage and engagement.
* Evaluate if your tour helps trial users adopt key features.
* Add tags to organize your experiences.
* (For surveys) Set up notifications for new responses.

Use these insights to refine your tour and improve user onboarding over time.