Feedback Components
Collect user feedback with ratings, NPS scores, and emoji reactions.
Feedback Components
Feedback components are purpose-built for collecting user sentiment. Each component captures a specific type of response (star ratings, NPS scores, emoji reactions, or binary thumbs up/down) and automatically tracks the value in your flow analytics.
All feedback values are recorded as analytics events with the component type and submitted value. You can view aggregated feedback data in the flow analytics dashboard and forward events to external tools like Amplitude, Mixpanel, or Segment.
Every component on this page has a Required toggle and a Required Message, which defaults to "Answer this to continue" and is shown when the user tries to move on without answering. The message is authorable and localizable, so translate it alongside your labels.
Rating
A star-based rating component for collecting satisfaction scores. Stars are tappable and fill progressively as the user selects a value.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Label | text | empty | Optional label displayed above the stars. |
| Description | textarea | empty | Supporting text below the label. |
| Alignment | select | center | Horizontal alignment of the stars: left, center, right. |
| Max Stars | number | 5 | Number of stars to display. |
| Size | select | medium | Star size: small, medium, large. Stored as size. |
| Active Color | color | #FBBF24 | Color of filled (selected) stars. |
| Inactive Color | color | #E5E7EB | Color of empty (unselected) stars. |
| Allow Half Stars | boolean | false | Enable half-star selections. |
| Show Labels | boolean | false | Display text labels under the stars. |
| Variable Name | text | empty | Key used to store the rating value. |
| Required | boolean | false | Whether a rating is required to proceed. |
| Required Message | text | "Answer this to continue" | Message shown when Required is on and no rating has been selected. |
| Margin | spacing | 16 bottom | Outer spacing around the component. |
Size is a select (small, medium, large), not a pixel value. There is also no pre-selected default rating: the component always starts empty.
Branching
Rating values can drive conditional branching in your flow graph. For example:
- Ratings of 4-5 lead to a "Thank you" screen with an app store review prompt
- Ratings of 1-3 lead to a follow-up screen asking what went wrong
This pattern lets you route happy users toward reviews and dissatisfied users toward support, all within a single flow.
Analytics
Each rating submission is tracked as a component_rating event with the selected value. In the analytics dashboard, you can see the distribution of ratings across all users who encountered the flow.
NPS
A Net Promoter Score component that presents a 0-to-10 scale for measuring user loyalty. The NPS component renders as a horizontal row of numbered buttons, following the standard NPS survey format.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Question | textarea | "How likely are you to recommend us to a friend?" | The question shown above the scale. This is the main content field. |
| Low Label (0) | text | "Not likely" | Label at the left end of the scale. Localizable. |
| High Label (10) | text | "Very likely" | Label at the right end of the scale. Localizable. |
| Show Numbers | boolean | true | Display the 0-10 numbers on the buttons. |
| Detractor Color (0-6) | color | #EF4444 | Color of the 0 through 6 buttons. |
| Passive Color (7-8) | color | #F59E0B | Color of the 7 and 8 buttons. |
| Promoter Color (9-10) | color | #22C55E | Color of the 9 and 10 buttons. |
| Button Style | select | rounded | Button shape: rounded, square, circle. |
| Variable Name | text | "npsScore" | Key used to store the NPS score (0-10). |
| Required | boolean | false | Whether a score is required. |
| Required Message | text | "Answer this to continue" | Message shown when Required is on and no score has been selected. |
| Margin | spacing | 16 bottom | Outer spacing around the component. |
NPS buttons are colored by band, not by selection state. There is no single active or inactive color, no text color, and no size property: the three band colors are how you theme the scale.
Branching
NPS scores naturally segment into three groups, matching the three band colors, and you can branch your flow accordingly:
- Promoters (9-10): route to a referral or review prompt
- Passives (7-8): route to a "what could be better?" follow-up
- Detractors (0-6): route to a detailed feedback form or support offer
Create a branch node in the flow graph and map score ranges to different target screens.
Analytics
NPS submissions are tracked as component_nps events. The analytics dashboard calculates your overall NPS score (% Promoters minus % Detractors) and shows the score distribution over time.
Emoji Feedback
An emoji-based feedback component that lets users express their sentiment by selecting from a row of emoji faces, from very unhappy to very happy.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Label | text | empty | Optional label displayed above the emojis. |
| Emojis | text | "😞,😕,😐,🙂,😄" | The emoji set, comma-separated. Add or remove entries to resize it. |
| Labels | text | "Very Bad,Bad,Okay,Good,Great" | Labels under each emoji, comma-separated and in the same order. |
| Alignment | select | center | Horizontal alignment: left, center, right. |
| Emoji Size | number | 40 | Emoji display size in pixels. Stored as emojiSize. |
| Show Labels | boolean | true | Display the text labels beneath each emoji. |
| Selected Border Color | color | #3B82F6 | Border color drawn around the selected emoji. |
| Variable Name | text | empty | Key used to store the selected value. |
| Required | boolean | false | Whether a selection is required. |
| Required Message | text | "Answer this to continue" | Message shown when Required is on and nothing has been selected. |
| Margin | spacing | 16 bottom | Outer spacing around the component. |
Emojis and Labels are two separate comma-delimited text fields, not a structured option list. Keep the two lists the same length and in the same order, or labels will line up under the wrong emoji. Selection is marked with a border, not a background fill.
Use cases
- Quick sentiment check after a feature interaction
- Post-support satisfaction measurement
- Lightweight alternative to star ratings for casual contexts
Thumbs
A binary feedback component presenting thumbs-up and thumbs-down buttons. This is the simplest feedback mechanism, ideal when you need a quick positive/negative signal.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Question | text | empty | The question shown above the icons. Stored as label. |
| Thumbs Up Label | text | "Yes" | Label for thumbs up. Localizable. |
| Thumbs Down Label | text | "No" | Label for thumbs down. Localizable. |
| Alignment | select | center | Horizontal alignment: left, center, right. |
| Icon Size | number | 32 | Icon size in pixels. Stored as iconSize. |
| Show Labels | boolean | true | Display the labels beneath the icons. |
| Thumbs Up Color | color | #22C55E | Thumbs-up icon color. |
| Thumbs Down Color | color | #EF4444 | Thumbs-down icon color. |
| Variable Name | text | empty | Key used to store the response. |
| Required | boolean | false | Whether a selection is required. |
| Required Message | text | "Answer this to continue" | Message shown when Required is on and nothing has been selected. |
| Margin | spacing | 16 bottom | Outer spacing around the component. |
The label property is named "Question", not "Label", in the properties panel. There is no selected background color: the icons are themed with Thumbs Up Color and Thumbs Down Color only.
Use cases
- "Was this helpful?" after a tooltip or announcement
- Quick feedback on a new feature
- Binary qualification questions ("Are you interested in X?")
Branching
Like other feedback components, thumbs responses can drive conditional branching. Route thumbs-up users to one screen and thumbs-down users to another for targeted follow-up.