Paywall modal

This paywall modal example shows how to interrupt a free user with an upgrade prompt the moment they click a Pro-only feature, using the built-in Modal component from Flows.

Instead of hardcoding a pricing pitch into every locked feature in your app, you attach a single click handler that starts a Flows workflow. The copy, plan pitch, and button link all live in the workflow editor, so you can rewrite the pitch or run an A/B test without a deploy.

Features

• Locked navigation item: the demo app's "Advanced reports" page is marked with a lock icon. Clicking it calls startWorkflow("paywall-modal.start") instead of navigating away.
• Modal: a centered Modal block (part of the built-in Basics V2 library) opens with the plan pitch, a primary Upgrade to Pro button, and a dismiss button.
• No custom component required: this example uses only a built-in component, so there is no React code to register beyond the standard Flows provider setup.

Because the modal only appears on demand, it never blocks users who are just browsing. Pair it with a Start block's user property filters to only show the paywall to users on the free plan.

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 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