Create a tour
Updated June 4, 2026
On this page
Tours walk users through a sequence of steps, each attached to an element in your app. Common use cases:
- Walk new users through your product step by step
- Guide users through complex multi-page workflows
- Introduce new features
Before you start
You’ll need:
- The FlowNavi editor installed in your browser. See Set up the FlowNavi editor.
- The FlowNavi SDK installed in your app. See Install the FlowNavi SDK.
Open the tour builder
Click the FlowNavi extension icon in your browser toolbar. In the popup, click Open Editor. A new tab opens at your app and starts the editor.
In the Create section of the editor panel, click Tour. This activates the element picker.
Click the element you want the first step attached to: the button you’re drawing attention to, the field you’re pointing out, the feature you’re introducing.
Add step content
After you click an element, a popover appears attached to it. Add your step content (the message you want to show users to guide them) directly in the popover. The preview is live: changes show as you type.
While you’re here, the header field at the top of the editor panel is for the tour’s name. Name it something you’ll recognize later in your guide list.
Step settings
Each step has settings to control how and where it shows.
Target element
To swap which element a step points at, click Retarget in the Target section and pick a different one.
Backdrop (dim the rest of the page)
Turn backdrop 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.
Advance trigger
Choose 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 targeted element. 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.
URL targeting
Each step has its own URL targeting that controls which page it appears on. 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/1and/projects/2, but not/projects/1/details.
To follow users across pages, set each step’s URL targeting 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 as the advance trigger. - 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.
Add more steps
Click + Step to add another. This opens the element picker, allowing you to pick a target for the step. The Show steps panel lets you reorder or remove steps.
Tour settings
The settings below apply to the whole tour, not just to a single step.
Segmentation (audience)
Show the tour only to the users it’s meant for. By default, tours show to all users. Add rules to target specific groups: first-week signups, users on a particular plan, users who haven’t completed a specific action.
There are two kinds of rules:
Property rules match users by properties your app sends to FlowNavi (role, plan, signup date, etc.).
| Operator | Example |
|---|---|
| equals / does not equal | plan equals "pro" |
| greater than / less than | seatCount greater than 10 |
| contains | signupSource contains "google" |
| before / after | signedUpAt after "2026-01-01" |
| within last N days | signedUpAt within last 7 days |
Behavior rules match users by whether they’ve completed other FlowNavi guides. Useful for sequencing: show your “Advanced features tour” only to users who completed the “Getting started checklist”.
- completed: user finished the named guide.
- not completed: user hasn’t finished it yet.
Frequency
Decide how often a user should see the tour:
- Show every visit: for evergreen help that should always be available.
- 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 showing.
Preview
Click Preview in the footer to test the tour before publishing. You’ll see a config panel where you can set fake user 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, display rules, and advance triggers 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 property config. Use the back arrow to exit preview entirely.
Publish
Click Publish to make the tour available to your users.
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
Open your app at step 1’s targeted URL, signed in as a user inside the segment. The first step should appear.
If your tour isn’t showing
If your tour doesn’t appear, check:
- URL doesn’t match: verify the page URL matches the step’s URL targeting. If using Pattern match, double-check the wildcards.
- User is outside the segment: confirm the user matches all segmentation rules on the tour.
- Already completed: completed tours don’t appear again for the same user.
- Already dismissed: if you set Show N times, the tour stops after the user has dismissed it N times.