Introduction
This documentation will guide you through the process of embedding a better-for-you alternatives carousel widget showcasing superior alternative products to elevate your product experience.
Demo
Before embedding the carousel widget, you may want to generate a demo for your product to understand how it works. To do this, follow these steps:
- Visit the Better-for-you alternatives website.
- You will see the query param in the URL for the product's UPC. You have to put your product UPC.
- Enter the UPC in the URL and load the page.
- A new carousel for the specified UPC and client 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 widget.
- Access to the Better-for-you integration code.
Embedding the GreenScore Chart Widget
To embed the widget on your product page, follow these steps:
Step 1: Get Your Product's UPC
Step 2: Include the Widget HTML
<iframe id="bfy-carousel" frameborder="0" loading="eager"></iframe>
Step 3: Add basic CSS for the iframe
<style>
#bfy-carousel {
width: 100%;
min-height: 350px;
}
</style>
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 (r) {
const i = document.getElementById("bfy-carousel");
const u = "https://widgets.gcpbc.co/getBfy?upcCode=";
const f = u + n + ;
i.src = f;
}
}
r();
</script>
Or else get the UPC dynamically and send it to iframe src
<iframe src={`https://widgets.gcpbc.co/getBfy?upcCode==${upcCode}`} id="bfy-carousel" frameborder="0" loading="eager"></iframe>
Step 5: Provide custom styling for the iframe as per your website layout