# 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://attr.sygnal.com/sa5-ui/5-star-ratings-component.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.