Rating & NPS Block - Flex Forms

The Rating & NPS block combines two distinct visual interfaces to evaluate user sentiment. Depending on your configuration, it renders either a standard 5-star rating component or a comprehensive 0-10 Net Promoter Score (NPS) scale, making it essential for feedback forms.

Business Use Cases

Customer Loyalty

Use NPS (0-10) to determine if your customers are Detractors, Passives, or Promoters.

Product Reviews

Use a 5-star rating scale to collect quick product quality feedback for an e-commerce store.

Agent Scoring

After a support ticket is closed, ask the user to rate the agent’s helpfulness.

Configuration & Usage

Deploy to Canvas

Drag the Rating & NPS block from the Component Catalog onto the Canvas.

Choose the Interface

By default, it renders as a Star Rating. If you are trying to calculate customer loyalty, switch the mode to NPS in the Inspector.

Style it

Adjust the colors and icons. For example, change the stars to “Hearts” and the color to “Red” for a more affectionate feedback loop.

Technical Configuration Schemas

Star Rating Configuration
NPS Configuration

integer

default:"5"

The maximum number of stars available to select. Set to 10 for a 10-star scale.

string

default:"warning"

The color of the filled icons (e.g., gold/yellow for stars).

string

Overrides the default star with a custom Heroicon (e.g., heart, hand-thumb-up).

boolean

default:"false"

Displays the numeric equivalent of the selection next to the stars (e.g., “4 / 5”).

string

default:"pills"

Visual template: pills, segments, or emojis. Emojis always use five mood slots (images stay fixed); you can rename the five labels under each emoji.

integer

default:"10"

Highest number on a 0–N scale for pills and segments (slider from 5 to 10). Hidden when variant is emojis.

array

default:"[Awful, Poor, Neutral, Good, Excellent]"

Five captions under the emoji moods. Only shown for the Emojis variant.

string

The text displayed below the lowest number (e.g., “Not likely at all”).

string

The text displayed below the highest number (e.g., “Extremely likely”).

boolean

default:"false"

Applies standard NPS color coding automatically (Red/Yellow/Green).

string

default:"md"

Control size: sm, md, or lg.

Data Payload Architecture

Whether you use Star Ratings or NPS, the final selection is always evaluated and saved as a standard integer.

{
  "submission_id": "sub_299",
  "data": {
    "product_rating": 4,
    "brand_nps": 9
  }
}

[
    'product_rating' => 4,
    'brand_nps' => 9,
]

Deep Dive: Why use NPS?

Net Promoter Score is a highly standardized metric used globally by companies to measure customer experience. The core question is always: “On a scale of 0 to 10, how likely are you to recommend us to a friend?” Because Flex Forms natively supports NPS and standardizes the output as an integer, you can instantly pipe this data into tools like Mixpanel, Salesforce, or Zendesk, which have built-in dashboards specifically looking for this exact 0-10 data structure to calculate your Promoters vs Detractors.

NPS Standardization

0-6: Detractors (Red)

7-8: Passives (Yellow)

9-10: Promoters (Green)

Best Practices & FAQs

Always use Context Labels

UX Best Practice: Always utilize min_label and max_label when using NPS mode. Numbers lack context on their own. “0 = Never, 10 = Absolutely” guides the user’s psychology.

​Business Use Cases

Customer Loyalty

Product Reviews

Agent Scoring

​Configuration & Usage

​Technical Configuration Schemas

​Data Payload Architecture

​Deep Dive: Why use NPS?

​Best Practices & FAQs

Business Use Cases

Configuration & Usage

Technical Configuration Schemas

Data Payload Architecture

Deep Dive: Why use NPS?

Best Practices & FAQs