# 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:**](https://help.usejimo.com/docs/build/dashboard)\
   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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FhpY2bcWuVSVsLl2Evlxq%2Fimage.png?alt=media&#x26;token=ecb368a0-0d4a-451d-8461-06e050914f38" 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FYwj6Gh3YMd3rQdFdNV3H%2Fimage.png?alt=media&#x26;token=868d2913-bbcd-4f5b-a34d-f11dee84914d" alt=""><figcaption></figcaption></figure>
   * Otherwise, click the **+ New Tour** button in the top-right corner.<br>

     <figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FWaYT4erJ4vBfoKixwyNA%2Fimage.png?alt=media&#x26;token=f59ce0e7-a935-4f4c-af52-be91928a4448" 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**](https://help.usejimo.com/docs/build/builders/ai-builder#first-time-using-the-ai-builder) for automated draft creation.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FJ9Nk3vMOzCfcc5ovdpBa%2Fimage.png?alt=media&#x26;token=d3075a28-71d6-457c-bb8d-a5e0b36d985a" alt=""><figcaption></figcaption></figure>

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

**Open the** [**Builder:**](https://help.usejimo.com/docs/build/builders)

* 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FcNDTaKieTfMSJkeAbR2v%2Fimage.png?alt=media&#x26;token=bbdc5110-efb1-4593-84a9-f3216b45f726" 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FFJeIbfvxDG7Xa4EbjMaV%2Fimage.png?alt=media&#x26;token=dab6d282-628b-4a6d-9cff-8de1dbce5f31" 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FmNkUZcAfShNfq1tvrqrc%2Fimage.png?alt=media&#x26;token=c47c44ca-55ea-4d40-9cf0-1f0a06d715c9" 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FEA2jueBfsIvqEv2CNjtK%2Fimage.png?alt=media&#x26;token=70959d0e-226a-4044-b325-ced5702c2e53" 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FbNsZmQJR6Squd9uRq15l%2Fimage.png?alt=media&#x26;token=e3cb9bc7-ff39-41cf-880a-32829e11a30a" alt=""><figcaption></figcaption></figure>

#### Left Sidebar: Builder Menu

* **Quick access to the Flow Builder**
* [**Navigator:**](https://help.usejimo.com/docs/build/navigator)
  * **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:**](https://help.usejimo.com/docs/build/triggers-and-conditions) Add if/else logic to control step flow.
  * [**Theme Management:**](https://help.usejimo.com/docs/build/theme) Apply predefined themes for consistent styling across all steps.
  * [**Language Tab:**](https://help.usejimo.com/docs/build/multiple-languages) 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FTgAeI7AzHK85NVYhB0zX%2Fimage.png?alt=media&#x26;token=32e10f87-109e-4f2e-9868-7f70fba252a3" alt=""><figcaption></figcaption></figure>

2. [**In-App Positioning:**](https://help.usejimo.com/docs/build/positioning)\
   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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FoDNT1tpwDKuIWLJsOKYb%2Fimage.png?alt=media&#x26;token=83143b15-5dd3-4bac-99f2-bdc8c2a62fc2" alt=""><figcaption></figcaption></figure>

   * Use the [CSS selector](https://help.usejimo.com/docs/build/positioning#css-selector) to pinpoint the element you want to highlight.

   <br>

   <figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FI1P4tFyCqEdfHzzag2UW%2Fimage.png?alt=media&#x26;token=4ffe2e40-2876-4a3e-8abf-cf866947a2ac" 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](https://help.usejimo.com/docs/getting-started/installing-jimo) on that URL or the [extension](https://help.usejimo.com/docs/getting-started/extension) 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](https://help.usejimo.com/docs/experiences/tours-and-modals/components)).

-> 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:**](https://help.usejimo.com/docs/build/builders/in-app-builder)

* 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F8dasyhE8JkAxEBz7HWK2%2Fimage.png?alt=media&#x26;token=719e6789-a98f-4fcf-afbc-884fb2fe1208" alt=""><figcaption></figcaption></figure>

[**Preview Mode:**](https://help.usejimo.com/docs/build/preview)

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

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2Flw0ljqkrpqTXJgBzUIqU%2Fimage.png?alt=media&#x26;token=64b88572-c054-4686-b227-0032f5b42152" 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FjtJMLFHHgBRnUe8h5wOi%2Fimage.png?alt=media&#x26;token=30f3bfba-b621-41d1-a8cb-c79946142c74" alt=""><figcaption></figcaption></figure>

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

**What to Configure:**

1. [**Show On (Trigger):**](https://help.usejimo.com/docs/publish/trigger-on-the-right-spot-show-on)\
   Decide when the tour should start. For a simple onboarding, let’s trigger it **on page load**.
2. [**Where (Page Filtering):**](https://help.usejimo.com/docs/publish/target-specific-urls-domains-where)\
   Limit the experience to a specific URL (e.g., your main dashboard page).
3. [**Who (Audience):**](https://help.usejimo.com/docs/publish/target-right-people-who)\
   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):**](https://help.usejimo.com/docs/publish/trigger-at-the-right-time-when)\
   Optionally schedule your experience or set an expiration date.
5. [**Goal (Optional Aim):**](https://help.usejimo.com/docs/publish/mesure-outcomes-goal)\
   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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FDrL7DpH5HSvgtIAcaYj1%2Fimage.png?alt=media&#x26;token=bcc13459-6e7a-42c4-92c4-9915055eeba8" alt=""><figcaption></figcaption></figure>

**Publishing:**

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

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FJnJDiBYMYnRU7Wvmg1vi%2Fimage.png?alt=media&#x26;token=ed6f3058-3796-4ed0-9890-d433079b67cc" alt=""><figcaption></figcaption></figure>

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

***

### Step 8: Monitoring Your Results

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FfXERbCnnJ0PdlGVh03gQ%2Fimage.png?alt=media&#x26;token=624f79d1-8d1a-4fb2-87ac-2af1f6800a1d" alt=""><figcaption></figcaption></figure>

After going live, visit the [**Analytics**](https://help.usejimo.com/docs/analyze/analytics) 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.usejimo.com/docs/getting-started/designing-your-first-experience.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.