Upgrade CTA banner

This upgrade CTA banner example shows how to nudge free-plan users toward upgrading with a persistent, ambient banner instead of a blocking paywall modal, using a custom component powered by Flows.

Where a paywall modal interrupts the user at the moment they hit a locked feature, this banner stays visible while they keep working, tied to how close they are to a plan limit. Both patterns have their place: use the banner for ambient, ongoing pressure and a paywall modal for a hard stop at a specific feature.

Features

• Usage label and progress bar: computed from the app's own state via React context, not from Flows, so the banner always shows the note count the user is actually looking at on the page.
• Upgrade action: a configurable button that links to your pricing page.
• Dismiss button: calls close() to advance the workflow and hide the banner for that session.

The banner is registered as a custom component in providers.tsx and rendered through a FlowsSlot placed above the main app layout. Only its message and upgrade link are configured in the workflow, everything usage-related comes from the app.

Getting started

1. Sign up for Flows if you haven't already. You can create a free account here.
2. Clone the repository from GitHub and install the required dependencies in the project directory.
3. Add your organization ID in the providers.tsx file.
4. Import the workflow, including the UpgradeCtaBanner component configuration, by clicking Use this example at the top of this page and publish it.
5. Run the development server with pnpm dev.

Learn more

To learn more about Flows take a look at the following resources:

• Flows documentation
• Join our community