Clear search
Close search
Google apps
Main menu

Star Ratings component

Star Ratings is an HTML5 custom element for displaying reviewers' star ratings in Google Web Designer creatives. Use the Star Ratings component to display consumer star ratings for your app, hotel, retail product, and so on.

Install the component

This component only works with Google Web Designer. Don't have Google Web Designer? Download it here. If you have a previous version installed, it will automatically be updated to the latest version.

  1. Download the Star Ratings component. (You don't need to unzip the file).
  2. In Google Web Designer, click the Image of add new component button in Google Web Designer button at the bottom of the Components panel.
  3. Select the .zip file you downloaded and click "Open".

Learn more about installing and removing custom components in Google Web Designer

Use the component

Drag the component to the stage to start using it in your creative. To customize, first select the component on the stage, then open the Properties panel and scroll down to Component properties

Component properties

Property Description
Name Sets the name of the component.
Rating value Sets the number of stars to display.
Icon size The size of each star icon from 5-30. The default value is 15, like the following star .
Show empty When checked, shows outlined empty stars for ratings that are less than the maximum star value. For example, a rating of 3 out of 5 stars looks like:
Fill empty When both Show empty and Fill empty are checked, shows filled, faded stars for ratings that are less than the maximum star value. For example, a rating of 3 out of 5 stars looks like:

Primary color

Sets the color of the stars. Enter a hexidecimal color value, for example, #CC0000.

Secondary color

If a linear or radial gradient is selected, sets a secondary color for the gradient. Enter a hexidecimal color value, for example, #CC0000.


Select a gradient type for the stars:

  • linear
  • radial
  • none
Max value The maximum number of stars to display. Must be greater than Min value.
Min value The minimum number of stars to display. Must be less than Max value.


Events are how you connect a physical gesture from your user to a recorded action in your ad. The component sends the following events, which can be used to trigger other actions:

  • Star ratings created - dispatched when the stars have been created and added to the DOM.
  • Minimum greater than maximum - dispatched when the minimum rating value is greater than the maximum rating value (for example, minimum = 5, maximum = 3).


Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.

Was this article helpful?
How can we improve it?