Create a checklist
Updated June 4, 2026
On this page
A checklist shows users a list of tasks. Items check off as users complete them, and the checklist remembers progress across sessions. Common use cases:
- Give new users a clear list of setup tasks
- Persist a set of next steps users can return to across sessions
- Coordinate team setup with shared tasks that complete once per company
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 checklist 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 Checklist. The checklist builder opens with one item ready to edit.
Add item content
The first item appears in the live preview, floating in the bottom-right corner of the page. Add the item content directly in the preview. 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 checklist’s name. Name it something you’ll recognize later in your guide list.
Item settings
Each item has its own settings for how completion is tracked and what marks it complete.
Scope
Choose how completion is tracked:
- Per user: each user completes the item independently. Their teammates start with it unchecked.
- Per company: when any user in a company completes the item, every teammate sees it as complete.
Condition
Choose what marks the item complete:
- Click element: the item completes when users click an element you pick, on a URL you specify. Use this when completion maps to a visible click. For example, clicking the “Invite teammate” button.
- Tour completed: the item completes when users finish a specific FlowNavi tour. Use this to stitch flows together: a checklist item that says “Take the welcome tour” and completes when the user reaches the last step. Not available at Per company scope, since tour completion is tracked per user.
- Click to complete: users click the checkmark on the item to mark it done themselves. Use this when FlowNavi can’t detect the action automatically. For example, “Verify your email” or “Read our integration guide”.
- Custom: the item completes when your code emits a custom event. Use this to auto-complete items that would otherwise need Click to complete. For example, when a chat conversation finishes, a payment confirms, or a third-party tool tells your app something happened.
Add more items
Click + Item in the item nav at the top of the editor panel to add another item. The item list lets you reorder or delete items.
Checklist settings
The settings below apply to the whole checklist, not just to a single item.
Display mode
Choose how and where the checklist appears in your app:
- Floating: a checklist widget pinned to one corner of the screen. Choose Bottom right, Bottom left, Top right, or Top left. Best when you want the checklist visible alongside the user’s normal work.
- Embedded: the checklist sits inline in your app’s UI, attached to an element you pick. Best when you want the checklist to feel like part of the page itself. For example, embedded into a dashboard.
URL targeting
The checklist only appears on pages matching its URL targeting. Three match types:
- All pages (Floating only): the checklist follows the user across every page.
- Exact: for fixed URLs like
/dashboard. - Pattern:
*is a wildcard for variable parts. Each*wildcard matches one dynamic segment./projects/*matches/projects/1and/projects/2, but not/projects/1/details.
Segmentation (audience)
Show the checklist only to the users it’s meant for. By default, checklists 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 setup checklist” only to users who completed the “Welcome tour”.
- completed: user finished the named guide.
- not completed: user hasn’t finished it yet.
Frequency
Decide how often a user should see the checklist:
- Show every visit: for evergreen checklists that should always be available until completed.
- Show N times: for checklists that should fade after the user has interacted with them. Each time the user dismisses the checklist (clicks the × to close it) counts toward N. After N dismisses, the checklist stops showing.
Preview
Click Preview in the footer to test the checklist 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 checklist. URL targeting, segmentation, frequency, and item completion all behave the same as a published checklist. Dismissing the checklist 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 checklist available to your users.
For the checklist 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 a URL that matches the checklist’s URL targeting, signed in as a user inside the segment. The checklist should appear in the corner you chose (Floating) or beside the attached element (Embedded).
If your checklist isn’t showing
If your checklist doesn’t appear, check:
- URL doesn’t match: verify the page URL matches the checklist’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 checklist.
- Already dismissed: if you set Show N times, the checklist stops after the user has dismissed it N times.
- Embedded anchor missing: if using Embedded mode, the page must contain the anchor element. If your app rendered without it, the checklist has nowhere to sit.