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 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

Example

Better-for-you implementation