Skip to main content

RatingBar

The RatingBar widget displays a rating or lets users select one. For example, you can show a product's average rating or ask a customer to rate an order.

Adding a RatingBar Widget​

  1. Add RatingBar from Form Elements in the Widget Palette or from the Widget Tree.
  2. Select the widget and open Rating Bar Properties in the Properties Panel.
  3. Interactive is enabled by default, allowing users to select a rating. Turn it off to display a rating users cannot change.

Displaying a Rating​

With Interactive off, set Rating to a fixed number or use Set from Variable to display a value from your data. For example, bind Rating to a course's average score to show it without letting users change it.

Decimal values are supported. With five icons, a rating of 1.5 fills one icon and part of the next. Keep the value within the range set by Icon Count.

Collecting a Rating​

With Interactive on, users can choose a rating. The current selection is held in widget state. To access the selected rating, use Set from Variable > Widget State > [RatingBar widget name].

Saving a selected rating

Interactive lets users change the rating, but their selection is not saved to your data source automatically. To keep the rating for later visits, add an action that writes the selected value to a record, such as a Firestore feedback document. To display that saved rating in an interactive RatingBar, set Initial Rating from the record.

Customizing the RatingBar​

Select the RatingBar and open Rating Bar Properties to set its value and appearance:

  • Rating: With Interactive off, sets the displayed rating. Enter a number or use Set from Variable to show a value from your data.
  • Initial Rating: With Interactive on, sets the rating shown before the user makes a selection. The user can change it.
  • Interactive: Determines whether users can select a rating. Turning it on changes the value field from Rating to Initial Rating.
  • Icon Count: Sets how many rating icons appear. For a ten-point scale, set this to 10.
  • Icon Size: Sets the size of each icon.
  • Icon Selector: Changes the icon used for the rating. Choose Star Rounded or another icon that suits your use case.
  • Rated Color: Sets the color of the filled portion of the icons.
  • Unrated Color: Sets the color of the unfilled portion.
  • Icon Padding: Sets spacing around each icon. Apply the same padding on all sides or set the top, bottom, left, and right values individually.
  • Axis: Arranges the icons horizontally or vertically.