> 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/create-your-first-experience.md).

# Create your first experience

Finish one of the drafts generated in your Onboarding Space, on your own app, and preview it.

The guided setup already drafted a welcome tour, a few feature intros and a checklist in your **Onboarding** Space. Step 3 is finishing one of them, on your own app, and previewing it. One hour. No developer.

**You will have at the end:** one short experience that runs end to end in preview on your app.

***

## Pick the one to finish

Open **Get Started**, expand **3. Create an experience**, click **Open the space**. Or go to **Spaces > Onboarding** in the sidebar.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2F2VVpd57ONKFBxnweq4qf%2Fspace-onboarding.png?alt=media&#x26;token=13fe3642-87f1-4ddf-acb0-c8486b5c12e8" alt="The Onboarding Space with its generated drafts"><figcaption></figcaption></figure>

Finish the **Welcome tour** first if your goal is onboarding. If your goal is something else, [First experience by goal](/docs/getting-started/create-your-first-experience/first-experience-by-goal.md) says which draft to finish, or which new experience to create with **start something new**. One experience, short, is the rule: three to five steps for a tour, one block for a banner, one question for a survey.

If the Space holds 0 experiences, the setup could not read your product. Click **New Tour** on the Get Started page and follow the same steps below from an empty tour.

## Finish the Welcome tour

{% stepper %}
{% step %}

### Open the tour in the builder

Hover the tour's card and click **Edit**. The builder opens on the Flow Builder, with the generated steps in order.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FjnAc61NvN1vR2OTZkjEd%2Fbuilder-flow.png?alt=media&#x26;token=7b2790d9-28b8-48ea-9833-96543b7619a9" alt="The Flow Builder with the generated steps"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Edit in app

Click **Edit in app** at the top right. Your app opens in Chrome with the builder over it (this is what Step 2 set up).
{% endstep %}

{% step %}

### Check the target element of each step

Go through each step. For a step attached to an element, open **Target element** in the right panel: the selector the setup picked is shown underneath. If it points at the wrong control, click **Reselect** and click the right one on your page.

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2Ff8jwpE7uQdSQixZIBCVl%2Fbuilder-target-element-panel.png?alt=media&#x26;token=fa0b7d1f-73da-4ed4-bbbd-91f498b7bf44" alt="Target element panel with Reselect element and Edit selector"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Edit the text

Edit the text of each step in place: short title, one sentence, one button. Delete the steps you do not need. Fewer steps finish more often.
{% endstep %}

{% step %}

### Save

Save.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
**The most common break at this step: the selector.** The setup picks a CSS selector from what it sees. If your front-end generates class names or IDs on each load (`css-1x2y3z`, `ember1061`, `:r3:`), the step will find its element today and lose it tomorrow. Prefer an element with a stable `id`, a `data-testid`, or a text that never changes. Details and a cheat sheet in [Stable selectors on a dynamic front-end](/docs/getting-started/create-your-first-experience/stable-selectors-on-a-dynamic-front-end.md).
{% endhint %}

## Preview it

Click **Preview** at the top right of the builder. Your app opens with the tour running as a user would see it. Go through all the steps. Click **Exit preview** at the top left when done.

#### What preview does and does not prove

<figure><img src="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FlouBI5m9oYnKinEPvoYK%2Fn12-preview-vs-publish.png?alt=media&#x26;token=201dd9db-f489-44fe-9aff-ecc7064ae653" alt="Preview proves content and position, publishing proves trigger, audience and environment"><figcaption></figcaption></figure>

It proves the content and the positioning. It does not prove the trigger, the audience or the environment; those are Step 5.

## Leave the rest for later

The checklist and the feature intros in the Space are drafts too. Leave them until the welcome tour is live for real users: wiring a checklist to tours is a second-level job, covered in [Checklist and tours together](/docs/getting-started/create-your-first-experience/checklist-and-tours-together.md) and in [What to build next](/docs/getting-started/what-to-build-next.md).

## Verify

* The tour runs from the first step to the last in preview, on your app, with every step attached to the right element.
* No step says "element not found" in the builder.
* The theme is yours (colors, font), not the default. If not, apply your theme from the builder's Theme tab or fix it in [Settings > Themes](/docs/build/theme.md).

## Go further

* [First experience by goal](/docs/getting-started/create-your-first-experience/first-experience-by-goal.md): what to finish first for each goal, and what needs no selector at all.
* [Stable selectors on a dynamic front-end](/docs/getting-started/create-your-first-experience/stable-selectors-on-a-dynamic-front-end.md).
* [Checklist and tours together](/docs/getting-started/create-your-first-experience/checklist-and-tours-together.md).
* The builder in full: [Flow Builder](/docs/build/builders/flow-builder.md), [Content Builder](/docs/build/builders/content-builder.md), [In-app builder](/docs/build/builders/in-app-builder.md), [Positioning](/docs/build/positioning.md), [Preview](/docs/build/preview.md), [Multiple languages](/docs/build/multiple-languages.md).
* [Tours & Modals](/docs/experiences/tours-and-modals.md) for everything a tour can do.

**Next page:** [Step 4, Install Jimo](/docs/getting-started/install-jimo.md)