Emoji Ratings

Demo to preview the plugin:

Introduction

This plugin allows you to add a Rating bar made up of emojis.
Usage Features:
  • Add an emoji-based rating bar to your Bubble app
  • Choose from a variety of emoji icons for custom user interaction
  • Fully customizable layout and number of rating options
  • Capture user input as a numeric or text-based rating
  • Trigger workflows based on user rating selection
  • Works on all devices and browsers
Image without caption

How to setup

  1. Add the Emoji Rating Element
      • In the Design tab of your Bubble editor, search for the Emoji Rating element.
      • Drag it into your page where you'd like the emoji rating to appear.
  1. Configure the Properties
    1. Select the Emoji Rating element and configure the following fields in the Appearance tab:
      Element → Emoji Rating → Appearance Tab.
      Element → Emoji Rating → Appearance Tab.
      • Initial Rating: Set the starting rating value (e.g., 1). This defines which emoji is selected when the page loads.
      • Style: Choose the visual style of the rating. Options typically include Star or other emoji-based visuals depending on plugin version.
      • Emotion Size: Set the pixel size of each emoji (e.g., 25).
      • Disabled?: Check this box to make the element read-only (non-interactive).
  1. Trigger Workflows on Rating
    1. To respond to a user's emoji selection:
      • Go to the Workflow tab.
      • Add a new event:
        • A Emoji Rating A New Rating Has Been Entered
          Workflow event → Emoji Rating.
          Workflow event → Emoji Rating.
      • Use the event to trigger actions, like:
        • Saving the rating to your database
        • Showing a confirmation message
        • Triggering custom logic based on the selected emoji

Plugin Element Properties

Emoji Rating

Element properties → Emoji Rating.
Element properties → Emoji Rating.
Fields:
Title
Description
Type
Initial Rating
Set the initial rating at page load (integer from 0-5)
Number
Style
Choose one of the rating styles Available options: Happy, Mixed, Star
Dropdown
Emotion Size
Emoji sizes in the rating. Default 30
Number (optional)
Disabled?
Choose if the rating element should be disabled, which means that it can’t be modified (not clickable)
Checkbox (yes/no)

Exposed states

Title
Description
Type
Current Rating
The current rating of the element
Number

Element Events

Title
Description
A new rating has been entered
Triggered when the user changes the value of the rating element.
Image without caption

Changelogs