Churn prevention flow

Reduce subscription cancellations with a multi-step churn prevention flow built with @flows/react. This example shows how to intercept a cancellation attempt, offer a lower-commitment alternative, collect a cancellation reason, and route the user to a targeted retention offer - all without writing one-off modal logic.

The standout technique is a custom CancelReasons component that exposes one exit node per cancellation reason. The Flows workflow branches differently for each answer, so price-sensitive users see a discount, users citing missing features get a feedback prompt, and users who say they are not getting value are offered a free onboarding session. Any team member can update the copy or add new branches in the Flows editor without touching the codebase.

Why churn prevention flows matter

Users who reach the cancel button have high intent to leave, but many are open to an alternative if it is presented at the right moment. A well-designed cancellation flow recovers a meaningful portion of would-be churners and turns the cancellation event into a source of actionable product feedback.

• Recover revenue at the last moment. A pause offer or discount converts users who are leaving for price or timing reasons, not product reasons.
• Collect high-quality feedback. Users who are about to cancel are more honest than users responding to a generic NPS survey. Exit reasons are a direct signal for your product roadmap.
• Route users to the right response. A single generic "are you sure?" modal treats every cancellation the same. Branching on the exit reason lets you respond with something actually relevant.
• Iterate without deploys. Flows manages the flow logic, so you can A/B test copy, add new branches, or remove steps from the editor after the initial build.

When to use a churn prevention flow

• Any SaaS product with a recurring subscription where users can self-serve cancel through the billing settings.
• Products with a free trial or freemium tier where trial-to-paid conversion is a key metric - the same pattern applies when a trial expires.
• Teams that want exit survey data without building and maintaining a custom survey UI.
• Growth and product teams who need to experiment with retention offers without waiting for engineering cycles.

How this example works

The demo shows a SaaS billing settings page with the current plan, usage metrics, and a "Cancel subscription" button. Clicking it calls startWorkflow() from @flows/react, which triggers the churn prevention workflow manually. The workflow then walks the user through three stages:

Stage 1 - Pause offer

A Modal block asks if the user wants to pause their subscription for up to 3 months instead of cancelling. Users who accept exit the workflow immediately - no further steps. This stage recovers users who are leaving for temporary reasons like budget freezes or inactivity.

Stage 2 - Cancel reasons

Users who decline the pause offer see the custom CancelReasons component - a modal listing five cancellation reasons. Each option calls a distinct prop (tooExpensive, missingFeatures, notUsingIt, switchingToCompetitor, other), which maps to its own exit node in Flows. The workflow editor wires each exit node to a different next block, enabling per-reason branching without any conditional logic in the component itself.

Stage 3 - Targeted retention offer

Each cancellation reason routes to a different response:

• Too expensive - a discount modal offers a percentage off the next few months. Users who accept exit retained; users who decline exit cancelled.
• Missing features - a modal prompts the user to submit a feature request and promises a notification when it ships.
• Not using it enough - a modal offers a free onboarding session with the team to help the user get more value.
• Switching to a competitor - the user exits immediately without an additional offer.
• Other - the user exits immediately.

Workflow setup

Below is a screenshot of how the workflow is set up in Flows:

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. Create the CancelReasons custom component in your Flows organization. Set the UI component key to CancelReasons, add string properties for title and description, and add exit nodes for tooExpensive, missingFeatures, notUsingIt, switchingToCompetitor, other, and close.
5. Recreate the churn prevention workflow using a Manual start block (key: churn-prevention-flow.start), a pause offer Modal, the CancelReasons block, and the targeted retention Modal blocks, then publish it.
6. 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