Create a banner

A banner is a bar across the top or bottom of your app. It stays out of the way of what users are doing, which makes it the quieter way to make an in-app announcement. Common use cases:

Announce scheduled maintenance
Tell users about an outage
Share news or a launch

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

The banner opens across the top of the page.

Write the message

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

A banner holds text and buttons. To add a button, click the text, then click the + beside it. Click the button and choose what it does under Actions:

Open URL: send users to a page, such as a status page or a changelog.
Start: start a tour or another guide.

A button in a banner doesn’t close the banner. Turn on Close the banner when clicked if it should.

Choose where it sits and how it looks

Under Appearance, Position puts the banner at the Top or the Bottom of the screen. The banner makes room for itself: it moves your page’s content instead of covering it. If your app has a header that stays fixed to the top of the screen, a top banner overlaps it. Choose Bottom in that case.

The banner uses your theme’s colors. Change Background and Text to make an urgent notice stand out.

Schedule it

Under Schedule, choose when the banner runs:

Start showing: Immediately, or On a date to prepare a banner ahead of time.
Stop showing: Never, or On a date so the banner goes away on its own, for example when a maintenance window ends.

Times are in your own timezone. The banner starts and stops at that same moment for all your users, wherever they are.

A schedule only applies to a published banner. Publish the banner now, and it starts showing on the date you set.

URL targeting

The banner appears only on the page set under Show on URL. A new banner 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.

A banner can’t be set to all pages at once. The pattern /* covers pages one level deep, like /dashboard and /settings, but not deeper pages like /projects/1.

Choose who sees it and how often

Click On page load under 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.

Segmentation (audience)

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

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 can always close a banner with its ×. Under Display Rules, decide what happens after that:

Show Every visit: the banner is hidden for the rest of that visit and is back on the next one. Choose this for a notice users shouldn’t lose sight of, like an ongoing outage, and set Stop showing so it ends.
Show N times: each time the user closes the banner counts toward N. After N, it stops appearing for that user.

A new banner is set to show 1 time: once a user closes it, they don’t see it again. That suits news and announcements.

Preview

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

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

If your banner doesn’t appear, check:

The editor is open: published banners 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, and a schedule doesn’t start an unpublished banner. Edits made after publishing don’t reach users until you click Publish again.
Outside its schedule: the banner doesn’t show before Start showing or after Stop showing.
FlowNavi isn’t installed: the banner can only appear in your app once the SDK is installed.
Built on the demo app: a banner 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. A pattern only matches pages at the same depth: /* doesn’t match /projects/1.
User is outside the segment: confirm the user matches all segmentation rules set on On page load.
Already closed: a banner the user closed doesn’t come back during the same visit. With Show N times, it stops for good after N. A new banner is set to 1, so closing it once while testing is enough to hide it. Use Preview to test without using up a view.

Start a new banner