Create a tour

Tours walk users through a sequence of steps. Common use cases:

• Walk new users through your product step by step
• Guide users through complex multi-page workflows
• Introduce new features

Start a new tour

In your dashboard, click Flow Editor. Go to the page where the tour should begin, then click Start from scratch in the editor panel and choose Tour.

The tour opens with its first step in the center of the page.

Write a step

Click into the step on the page and type the message you want users to read. The preview is live: changes show as you type and save automatically.

Attach a step to an element

A new step is a Modal: a message in the middle of the page that isn’t tied to any element. That works well for a welcome or a closing step.

To point at a button, a field, or a menu instead, open Appearance & behavior, set Style to Anchored, and click the element in your app. The step now opens next to that element.

For an anchored step, Advance when users click decides how the user moves to the next step:

• Next/Done button: users read, then click Next. Best for steps that explain or set context.
• The element: the step advances when users click the element itself. Best when you want them to do something (e.g., navigate to a different page, click a button that opens a modal). The action itself moves the tour forward.

Turn Dim the page on when the step is teaching something users need to focus on. Turn it off for quieter hints that should sit alongside the UI without interrupting.

Add more steps

Go to the page in your app where the next step belongs, then click + Step. Like the first step, it starts as a modal in the center of that page until you attach it to an element.

URL targeting

Each step appears only on the pages set under Show on URL. A new step is set to the page you’re on when you add it. Three match types:

• All URLs: the step appears on every page. An anchored step appears on every page that has its element.
• Fixed URL: for fixed URLs like /settings.
• Dynamic URL: * is a wildcard for variable parts. Each * wildcard matches one dynamic segment. /projects/* matches /projects/1 and /projects/2, but not /projects/1/details.

To follow users across pages, set each step’s URL to the page where it should appear. Example: a tour teaching users to invite a teammate:

• Step 1 is on /dashboard, attached to the “Team Settings” link in the sidebar, with The element under Advance when users click.
• Step 2 is on /settings/team, attached to the “Invite teammate” button.

The user sees step 1 on the dashboard. Clicking the “Team Settings” link both advances the tour to step 2 and navigates to /settings/team. Step 2 was waiting for that URL. After the navigation finishes, it appears, pointing at the invite button.

Choose when the tour appears

A tour can start in two ways: on its own when a user opens the page of the first step, or when a user clicks a launcher. Both are listed under Ways to start in Flow settings at the top of the editor panel. To see how a flow, its guides, and their settings fit together, read How flows work.

On page load

A new tour starts this way: it appears on its own when a user opens the page of the first step. Click On page load to set who it appears for and how often. Segmentation and frequency are settings of On page load, so they only affect the tour when it starts on its own.

Segmentation (audience)

By default, the tour appears for every user who opens the page. Add rules under Segmentation to limit it to specific groups: first-week signups, users on a particular plan, users in a particular role.

Each rule compares a property your app sends to FlowNavi (role, plan, signup date, etc.) with a value:

Condition	Example
= / !=	plan = "pro"
> / <	seatCount > 10
contains	signupSource contains "google"
before / after	signedUpAt after "2026-01-01"
within last N days	signedUpAt within last 7 days

If you add several rules, a user must match all of them.

Display rules

Under Display Rules, decide how often the tour appears on its own for the same user:

• Always show again: for evergreen help that should always be available. A user who closes the tour sees it again on their next visit.
• Show up to N times: for first-time onboarding or feature introductions that should fade once the user gets the hang of things. Each time the user dismisses the tour (clicks the × to close it) counts toward N. After N dismisses, the tour stops appearing.

A new tour is set to show 1 time.

Launcher

To let users start the tour themselves, click + Way to start and choose Launcher, then click an element in your app. FlowNavi adds a small button to that element, and clicking it starts the tour.

The launcher is there for every user on its page, and it starts the tour every time it’s clicked. Segmentation and frequency don’t apply to it, so a user can replay a tour they already completed or dismissed.

A tour can have both ways to start. If it should start only from the launcher, remove On page load.

Preview

Click Preview in the footer to test the tour before publishing. You’ll see a panel where you can set fake user and company properties to test segmentation rules. For example, set plan: "pro" to verify a “Pro users only” rule matches.

Click Start Preview to run the tour. URL targeting, segmentation, frequency, and advancing between steps all behave the same as a published tour. Dismissing or completing the tour in preview doesn’t affect anything outside of preview mode (it’s a sandbox).

Stop ends the preview and takes you back to the tour.

Publish

Click Publish to make the tour available to your users. When you edit the tour later, your users keep seeing the published version until you click Publish again.

For the tour to actually appear, the FlowNavi SDK needs to be installed in your app. See Install the FlowNavi SDK if you haven’t already.

Confirm it’s working

Published tours are paused in your browser while the editor is open. Click the ✕ at the top of the editor panel to close the editor, then open your app at step 1’s URL, signed in as a user the tour appears for. The first step should appear.

If your tour isn’t showing

If your tour doesn’t appear on its own, check:

• The editor is open: published tours are paused in your browser while the editor is open. Close the editor first.
• Not published: your users only see the published version. Edits made after publishing don’t reach them until you click Publish again.
• FlowNavi isn’t installed: the tour can only appear in your app once the SDK is installed.
• Built on the demo app: a tour you built on the demo app still points at the demo app’s pages and elements. Open it in the editor on your own app, pick new elements for the anchored steps, and update each step’s Show on URL.
• URL doesn’t match: verify the page URL matches the step’s Show on URL. If using Dynamic URL, double-check the wildcards.
• User is outside the segment: confirm the user matches all segmentation rules set on On page load.
• On page load was removed: a tour that starts only from a launcher never appears on its own.
• Already dismissed: a tour you closed doesn’t come back during the same visit. With Show up to N times, it stops for good after the user has dismissed it N times. A new tour is set to 1, so closing it once while testing is enough to hide it. Use Preview to test without using up a view.
• Already completed: completed tours don’t appear again for the same user.