Embedding GreenScore chart widget on product page

Introduction

This documentation will guide you through the process of embedding the GreenScore Chart Widget for your product page. The GreenScore Chart provides valuable insights for a consumer about a product's: Nutrition, Processing, Food Safety, and Climate Footprint, so they can easily shop their values.

Demo

Before embedding the GreenScore chart widget, you may want to generate a demo GreenScore chart for your product to understand how it works. To do this, follow these steps:

Visit the GreenScore Chart website.
On the generator page, you will see the product's UPC as a query param in the URL. For demo, you can use the UPC 855232007354.
Enter the UPC in the URL and load the page.
The website will generate a GreenScore chart for the specified UPC, providing ratings for Nutrition, Processing, Food Safety, and Environment.
You can explore and analyze the generated GreenScore chart to get a better understanding of the data and its representation.

Prerequisites

Before embedding the GreenScore chart widget, ensure that you have the following:

A product's UPC (Universal Product Code) to generate the GreenScore chart.
Access to the GreenScore chart widget integration code.

Embedding the Widget

To embed the GreenScore chart widget on your product page, follow these steps:

Step 1: Get Your Product's UPC

To display the GreenScore chart, you'll need to provide your product's UPC.

Step 2: Include the Widget HTML

 <iframe id="gs-chart" frameborder="0" loading="eager"></iframe>

Step 3: Add basic CSS for the iframe

 #gs-chart {
     width: 100%;
     height: 100%;
     min-height: 600px;
  }

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 n = q("upcCode");
        if (n) {
          const i = document.getElementById("gs-chart");
          const u = "https://widgets.gcpbc.co/getChart?upcCode=";
          const r = u + n;
          i.src = r;
        }
      }
      r();
</script>

Or else get the UPC dynamically and send it to iframe src

 <iframe src={`https://widgets.gcpbc.co/getChart?upcCode=${upcCode}`} id="gs-chart" frameborder="0" loading="eager"></iframe>

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

Example

GreenScore Chart implementation