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 <style> element or CSS in the <head> however most browsers will accept an in-body <style> element.
<style>#stars2svg {fill: red; }</style>
Due to the way the shaded area works, the color and darkness is not easily specified.
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.
STEP 2 - Create an EMBED where you want a WFU Rating component to appear.
Paste this code into the EMBED;
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.
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.
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.
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.
