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.

Finish the Welcome tour first if your goal is onboarding. If your goal is something else, First experience by goal 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

1

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.

2

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

3

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.

4

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.

5

Save

Save.

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.

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

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 and in What to build next.

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.

Go further

• First experience by goal: what to finish first for each goal, and what needs no selector at all.

• Stable selectors on a dynamic front-end.

• Checklist and tours together.

• The builder in full: Flow Builder, Content Builder, In-app builder, Positioning, Preview, Multiple languages.

• Tours & Modals for everything a tour can do.

Next page: Step 4, Install Jimo