Create a pop-up

A pop-up shows a message over your app. Unlike a tour step or a tooltip, it isn’t attached to an element. It’s the guide to use for an in-app announcement, sometimes called an announcement modal. Common use cases:

• Welcome new users and offer them a tour
• Announce a new feature or a change
• Ask for feedback with a short survey

Start a new pop-up

In your dashboard, click Flow Editor. Go to the page where the pop-up should appear, then click Start from scratch in the editor panel and choose Pop-up.

The pop-up opens in the center of the page.

Write the message

Click into the pop-up on the page and type. The preview is live: changes show as you type and save automatically.

To add more than text, click into the pop-up and use the + buttons: below a row to add a row, beside a block to add a column. Each can hold text, an image, a video, a button, or a survey.

Add a button

A button is what turns a pop-up from a message into a next step. Add one, click it, and choose what it does under Actions:

• Start: start a tour or another guide. This is how you build a welcome message with a “Show me around” button. A guide you add this way appears under Guides in Flow settings at the top of the editor panel. Click it there to edit it.
• Open URL: send users to a page, in the same tab or a new one.

A new button also closes the pop-up when clicked. Turn off Close the pop-up when clicked if the pop-up should stay open.

Ask a question

A survey lets users answer inside the pop-up, for example with an NPS score or a star rating. Pop-ups are the only place a survey can go. Responses appear under Surveys in your dashboard. See Create a survey.

Choose how it looks

Under Appearance, Style decides how much the pop-up interrupts:

• Modal: a card over the page. Best for messages users should read before they continue, like a welcome.
• Slideout: a card that slides in from the edge of the screen. Best for news users can glance at and keep working.
• Full screen: covers the whole page. A full screen pop-up has no ×, so users can only leave it through a button. Make sure it has one that closes it.

For a modal or a slideout, turn Dim the rest of the page on when users should focus on the message, and off when it should sit alongside their work.

URL targeting

The pop-up appears only on the page set under Show on URL. A new pop-up is set to the page you created it on. Two match types:

• Exact: for fixed URLs like /dashboard.
• 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.

Choose when the pop-up appears

A pop-up 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 pop-up starts this way: it appears on its own when a user opens its page. 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 pop-up when it starts on its own.

Segmentation (audience)

By default, the pop-up 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

Users close a pop-up with its × or with a button that closes it. Under Display Rules, decide what happens after that:

• Show Every visit: the pop-up is hidden for the rest of that visit and is back on the next one.
• Show N times: each time the user closes the pop-up counts toward N. After N, it stops appearing for that user.

A new pop-up is set to show 1 time, which suits a welcome or an announcement: each user sees it once.

Launcher

To let users open the pop-up 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 opens the pop-up.

The launcher is there for every user on its page, and it opens the pop-up every time it’s clicked. Segmentation and frequency don’t apply to it, so users can reopen a pop-up they already closed.

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

Preview

Click Preview in the footer to test the pop-up 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 pop-up. URL targeting, segmentation, frequency, and buttons all behave the same as a published pop-up. Closing the pop-up 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 pop-up available to your users. When you edit the pop-up later, your users keep seeing the published version until you click Publish again.

For the pop-up 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 pop-ups 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 the pop-up’s URL, signed in as a user the pop-up appears for. The pop-up should appear.

If your pop-up isn’t showing

If your pop-up doesn’t appear on its own, check:

• The editor is open: published pop-ups 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 pop-up can only appear in your app once the SDK is installed.
• Built on the demo app: a pop-up you built on the demo app still points at the demo app’s page. Open it in the editor on your own app and update Show on URL.
• URL doesn’t match: verify the page URL matches 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 pop-up that opens only from a launcher never appears on its own.
• Already closed: a pop-up the user closed doesn’t come back during the same visit. With Show N times, it stops for good after N. A new pop-up is set to 1, so closing it once while testing is enough to hide it. Use Preview to test without using up a view.