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 Appearance to Anchored, and click the element in your app. The step now opens next to that element.

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

• Button click: users read, then click Next. Best for steps that explain or set context.
• Element click: 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 page set under Show on URL. A new step is set to the page you’re on when you add it. Two match types:

• Exact: for fixed URLs like /settings.
• Pattern: * 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 Element click under Advance when.
• 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. Both are listed under Starts 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.

Frequency

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

• Show Every visit: for evergreen help that should always be available. A user who closes the tour sees it again on their next visit.
• Show 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).

Use Stop to halt and tweak the properties. Use the back arrow to exit preview entirely.

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 ⋮ at the top of the editor panel and choose Log out of 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. Log out of 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 Pattern match, 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 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.