Embeddable Widget

Add carbon scores to any website with one line of code. 2.5 KB gzipped.

Quick start

<!-- Add to your product page -->
<div class="greenscore"
     data-barcode="3017620422003"
     data-theme="light">
</div>
<script src="https://cdn.greenscore.dev/widget.min.js"
        data-key="gs_live_YOUR_KEY"></script>

The widget auto-initializes all elements with class="greenscore" when the page loads. It calls the GreenScore API, caches results for 1 hour, and renders an eco-grade badge.

Configuration

JavaScript API (for SPAs)

For single-page apps that add product elements dynamically:

// Re-scan DOM for new .greenscore elements
GreenScore.init();

// Score a specific element
const el = document.getElementById('my-product');
GreenScore.score(el);

// Remove all widgets and cleanup
GreenScore.destroy();

Styling

Override default styles with CSS custom properties:

:root {
  --gs-font-family: "Your Font", sans-serif;
  --gs-border-radius: 8px;
  --gs-accent-color: #10b981;
}

Platform integrations

Shopify

Install the GreenScore app from the Shopify App Store. It adds an "Eco-Badge" block to your theme editor — drag it onto any product page template. No code required. $9.99/month with 14-day free trial.

WooCommerce

Add to your theme's single-product.php:

<?php // Add after the product price ?>
<div class="greenscore"
     data-barcode="<?php echo esc_attr($product->get_sku()); ?>"
     data-product-name="<?php echo esc_attr($product->get_name()); ?>"
     data-theme="light">
</div>
<?php // Add before </body> ?>
<script src="https://cdn.greenscore.dev/widget.min.js"
        data-key="gs_live_YOUR_KEY"></script>

React / Next.js

import { useEffect, useRef } from 'react';

function ProductScore({ barcode, name }) {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current && window.GreenScore) {
      window.GreenScore.score(ref.current);
    }
  }, [barcode, name]);

  return (
    <div ref={ref} className="greenscore"
         data-barcode={barcode}
         data-product-name={name}
         data-theme="light" />
  );
}