Microsurvey

This microsurvey example shows how to embed a 5-point emoji reaction widget in an analytics dashboard using the built-in Survey Popover component from @flows/react-components. The survey triggers automatically, appears in the corner of the screen, and captures a rating with a single click - without interrupting the user's workflow.

Microsurveys trade depth for breadth. A single emoji question captures sentiment in under three seconds, making them ideal for gathering feedback on specific features, reports, or moments in your product where a full NPS or CSAT survey would feel out of place.

Features

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

• Emoji rating: a 1-5 emoji scale from very unhappy to very happy, asking how useful the current report was.
• 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 submits as soon as the user picks an emoji - no button click needed. 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 microsurvey 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