Add Rating Stars

Adding a rating system to your Digioh pop-ups is a straightforward way to collect user feedback and improve engagement. With the Add Rating Stars app, you can add a star-based rating system to your forms, quizzes, and other campaigns. Use it to gather insights into your audience's preferences and identify areas for improvement.

Before you begin: Each star button's action must be set to Select in the campaign editor. The extension validates this at runtime and throws an error if any button tagged with the rating metadata key uses a different action type. Missing this step will cause the extension to stop working.

The error shown in the QA panel if the action is incorrect: "Invalid rating on [pageName][selector]: button must have action select"

Step 1: Install the App

Go to the top menu and select Admin, then choose Custom JavaScript (Apps). Under the Available tab, find and install the Add Rating Stars app.

Step 2: Configure the Rating Field

You must store the rating in a dedicated custom field. In this example, we use custom_1. Do not use this field for any other purpose in the campaign.

To set the field that stores the score, add page-level metadata with key rating_field and value set to your chosen custom field.

For example:

Step 3: Configure the Rating Label (Optional)

The rating label is the label sent with the score to wherever your rating data is delivered. Choose a label that is easy to search or that matches the syntax of your other collected data.

This step is optional. If you skip it, the default label is rating_x, where x is the rating value. For example, a rating of 5 produces rating_5.

Important: If you configure rating_label, the value must include the letter x as a placeholder. The extension replaces x with the clicked star's value at runtime. If rating_label is set but does not contain x, the extension throws an error. Always verify the template includes x before publishing.

To configure the rating label, add page-level metadata with key rating_label and value specificLabel_x.

Here are some example rating label values:

• To produce quiz_rating_5, use value quiz_rating_x
• To produce rated_5_out_of_5, use value rated_x_out_of_5
• To produce rating_1 through rating_5, use value rating_x

Step 4: Set Up the Star Buttons

For each star button, you need to configure three things: the button action, the rating metadata, and the button images.

Set the Button Action to Select

1. In the campaign editor, select the star button element.
2. In the left panel, open the Button Settings accordion.
3. Find the Action dropdown and change it to Select.
4. Repeat this for every star button. Each button gets a unique rating value.

Set the Rating Metadata

Add button-level metadata with key rating and a numeric value representing that button's score. The value must be an integer (for example, 1, 2, 3, 4, or 5).

Set the Button Background Images

Navigate to the background section of the button settings.

To set the empty star image, turn on the Use Image toggle and add your desired image. Use the same background image for all star buttons.

To set the filled star image, change the Button Styling option to Hover + Selected and add your image.

Metadata Reference

Use the table below as a quick reference for all supported metadata keys.

Hover Behavior and CSS Classes

The extension dynamically applies CSS classes to star buttons based on user interaction. You can use these classes in your campaign CSS to define the filled-star appearance.

• {buttonId}_hover — applied to all stars with a rating less than or equal to the hovered star. Removed when the user moves their cursor away.
• {buttonId}_selected — applied to all stars with a rating less than or equal to the clicked star. Persists after the click.

If you have any questions, send us an email at support@digioh.com and we will be glad to help.