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.
![GreenScore chart](https://files.readme.io/361d874-gschart.png)
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