Embedding GreenScore radial widget on product cards

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 product's GreenScore.

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:

1. Visit the GreenScore Radial website.

2. On the generator page, you will see the query param in the URL for the product's UPC. For demo, you can use sample UPC89836026095.

3. Enter the UPC along with radialSize in the URL and load the page. Radial size can be sm=small, md=medium or lg=large. For the product cards, we suggest to keep it sm or md so it's easy to fit.

4. 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. For the product cards, we suggest to keep label=false to save space and make it easy to fit.

5. 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:

1. A product's UPC (Universal Product Code) to generate the GreenScore radial.
2. Radial size of your choice sm, md or lg
3. Choose true or false for the label option
4. Access to the GreenScore radial widget integration code.

Embedding the Widget

To embed the GreenScore radial widget, 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: 75px;
    padding: 0 10px;
    height: 75px;
  }

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=sm&label=false`} id="gs-radial" frameborder="0" loading="eager"></iframe>

Step 5: Provide custom styling for the iframe as per your website layout

Example

GreenScore Radial implementation