Star and Bar Rating

Demo to preview the plugin:

Introduction

Do you need a tool to register and display ratings for your Bubble app users? Get 5 different rating scale designs and layouts with our no-code plugin.The cell width is customizable.
It can also be used for registering other quick inputs.
You can set the maximum count for user selection. User input results in an integer between 1 and the selected maximum.
Image without caption

How to setup

  1. Add the Element to the Page
      • Drag and drop the Star and Bar Rating element onto your page.
        • Element → Star and Bar Rating.
          Element → Star and Bar Rating.
  1. Configure the Element Properties
    1. After adding the element, customize its properties in the Bubble settings panel:
      • Bar Rating Type → Select the rating format:
        • 1/10 Rating → Uses a scale from 1 to 10.
        • Other formats may be available based on customization.
      • Rate Items Count → Defines how many rating items (stars/bars) will be displayed.
  1. Create a Workflow to Capture the Rating Value
      • Go to the Workflows tab in the Bubble Editor.
      • Click on Add an Event and select A Star and Bar Rating Rating Changed.
        • Workflow event → A Star and Bar Rating.
          Workflow event → A Star and Bar Rating.
      • This event will trigger whenever a user updates the rating.

Plugin Element Properties

Star and Bar Rating

Element properties → Star and Bar Rating.
Element properties → Star and Bar Rating.
Fields:
Title
Description
Type
Bar rating type
Bartype ( Note: movieRating type field has been deprecated) Available options: 1/10Rating, movieRating(Deprecated), squareRating, pillRating, starRating
Dropdown
Rate items count
Itemscount
Number (optional)
Cell width (px)
Defines the width of each individual rating unit (star, pill, or square) in pixels. This controls the spacing and size of the elements.
Number

Exposed states

Title
Description
Type
Rate
Rate
Number

Element Events

Title
Description
Rating changed
This event is triggered whenever the user updates the rating. It can be used to capture the new rating value and trigger workflows accordingly.
Image without caption

Changelogs