Net Promoter Score (NPS) survey

This NPS survey example shows how to collect Net Promoter Score feedback in a React app using the built-in Survey Popover component from @flows/react-components. The survey triggers automatically, appears in the corner of the screen, and guides users through a rating question and a follow-up, without interrupting their workflow.

NPS surveys are one of the most widely used tools for measuring customer loyalty and predicting churn. Running them in-product rather than via email captures feedback at the moment users are actively engaged, which produces higher response rates and more accurate scores.

Features

When a user enters the workflow, the survey popover appears in the bottom-right corner of the screen. The survey walks users through three steps:

• NPS rating: a 0-10 numeric scale asking how likely the user is to recommend the product, with "Not likely" and "Very likely" labels at each end.
• Follow-up question: an open-ended freeform text field asking for the reason behind the score. Marked as optional so users can skip it.
• End screen: a thank-you message acknowledging the response before the popover closes automatically.

The workflow uses the Auto proceed after answer option on the rating step so the popover advances as soon as the user selects a score, reducing friction. The Auto close after submit option closes the popover once the end screen is reached.

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. Recreate the NPS survey workflow using the Survey block in your organization 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