Introduction
The GreenScore radial is a visual component that displays the GreenScore of a product. The GreenScore rating reflects a food product's health and sustainability impacts. Products are rated following four science-based industry standards for: nutritional value, food processing, ingredient safety, and climate footprint, on a scale of 1-100. These four category ratings make up a products GreenScore.
![GreenScore Radial](https://files.readme.io/8b0b57c-radial.png)
Demo
Before embedding the GreenScore radial widget, you may want to generate a demo GreenScore radial for your product to understand how it works. To do this, follow these steps:
-
Visit the GreenScore Radial website.
-
On the generator page, you will see the query param in the URL for the product's UPC. For demo, you can use sample UPC
89836026095
. -
Enter the UPC along with radialSize in the URL and load the page. Radial size can be sm=small, md=medium or lg=large.
-
There is also an option to turn on/off the label along with radial and for that, the true attribute will be used e.g. label=true
-
A new GreenScore radial for the specified UPC and size will be generated.
Prerequisites
Before embedding the GreenScore radial widget, ensure that you have the following:
- A product's UPC (Universal Product Code) to generate the GreenScore radial.
- Radial size of your choice sm, md or lg
- Choose true for the label option if required
- Access to the GreenScore radial widget integration code.
Embedding the Widget
To embed the GreenScore radial widget on your product page, follow these steps:
Step 1: Get Your Product's UPC
To display the GreenScore radial, you'll need to provide your product's UPC.
Step 2: Include the Widget HTML
<iframe id="gs-radial" frameborder="0" loading="eager"></iframe>
Step 3: Add basic CSS for the iframe
#gs-radial {
width: 100px;
padding: 0 10px;
height: 100px;
}
Step 4: Add script to load iframe src
// Assuming UPC is available in the URL
<script>
function r() {
function q(n) {
const p = new URLSearchParams(location.search);
return p.get(n);
}
const r = q("radialSize");
const n = q("upcCode");
const l = q("label");
if (r) {
const i = document.getElementById("gs-radial");
const u = "https://widgets.gcpbc.co/getRadial?upcCode=";
const f = u + n + "&radialSize=" + r + "&label=" + l;
i.src = f;
}
}
r();
</script>
Or else get the UPC dynamically and send it to iframe src along with radial size and label option
<iframe src={`https://widgets.gcpbc.co/getRadial?upcCode=${upcCode}&radialSize=md&label=true`} id="gs-radial" frameborder="0" loading="eager"></iframe>
Step 5: Provide custom styling for the iframe as per your website layout