# 5-Star Ratings Component ❺
{% hint style="success" %}
Likely to move this into Elements.
{% endhint %}
## Overview
Generate CMS-compatible 5-star ratings on your site using a simple HTML embed and a dynamic custom attribute;
```html
```
## Examples
See here for a demonstration.
View source to see the specifics on how these demos work.
```html
```
```html
```
```html
```
```html
```
### Coloring
Since the art is SVG-based, it can affected by the CSS `fill` attribute.
However, Webflow does not directly provide access to the fill attribute, or SVG’s. Best practice is to put a `
```
{% hint style="info" %}
Due to the way the shaded area works, the color and darkness is not easily specified.
{% endhint %}
## Usage Notes
* The rating stars are SVG, so the component will scale to whatever width you define in the designer.
* You can use fractional amounts. Generally, .0 or .5 display nicely, other fractions may show too little of the star edges to be clearly understood.
* The DIV HTML is generally embedded in a Webflow EMBED element, so that the `wfu-rating` attribute can be easily set from a CMS Collection List.
* Apply a class to the EMBED with a width and minimum height in order to make the Embed visible in the designer.
* You can put temporary contents in the Embedded DIV for designer display, this will be wiped.
## Getting Started ( NOCODE )
There are currently no configuration options for the data-binding feature, so we’ll use a *no-code* integration approach.
### STEP 1 - Add the Library
First, **add the library** as detailed in [Quick Start](https://attr.sygnal.com/sa5-url/quick-start).
### STEP 2 - Create an EMBED where you want a WFU Rating component to appear.
Paste this code into the EMBED;
{% code overflow="wrap" %}
```html
RATING
```
{% endcode %}
Alternatively, you can put anything into the DIV and it will be deleted when the Rating Component is created. In this way, you can have a visible placeholder while you’re in the designer, where scripts cannot run.
We recommend placing stars there for convenience. If you are using this with Webflow, you can place an **HTML Embed** element inside of your div, with the following contents, to create visible stars.
```html
```
### STEP 3 - Create a Class on the Embed
In the Webflow designer, add a class to the embed.
Set the width of the embed to whatever you want- the SVG stars will scale.
Set a min-height of 20px, to ensure the element is visible at design time, for layout purposes.
### STEP 4 - Configure the rating value
Set the `wfu-rating` attribute of the div to whatever value you want, between 0.0 and 5.0.
{% hint style="info" %}
You can make the rating a fixed value, however generally, you’d place this in a Collection List, and bind the attribute to a Rating field from the Collection.
{% endhint %}
Here's how to set that up;
* Use a numeric field named e.g. `Rating`
* Configure the field’s minimum to 0, maximum to 5, with precision 1.0. A precision of 1 is fine if you will not be using fractional ratings like 3.5.
* Set the field to required, if you will always have a rating. If you won’t always have a rating, leave it as not required, and configure the Embed element so that it is conditionally visible and hidden in no-rating situations.