Carbon Emissions Widget

The Zilch Carbon Emissions Widget lets you display product carbon footprint data directly on your website. It automatically detects product SKUs and shows emissions information in a clean format.

Features

• Automatic SKU Detection — works with Shopify, WooCommerce, Squarespace, and custom websites
• Domain Whitelisting — control which websites can use your widget
• Customisable Themes — choose from default, minimal, or detailed
• Responsive Design — works on all screen sizes
• Rate Limited — 1,000 requests per SKU per day

Getting Started

Step 1: Get your API key

1. Log in to your Zilch account
2. Navigate to Profile → API Key
3. If you don't have a key yet, click Generate API Key

Step 2: Configure domain whitelist (optional)

1. On your Profile page, scroll to Widget Domain Whitelist
2. Add the domain where you want to allow the widget (e.g. myshopifysite.com)

Step 3: Install the widget

Choose the installation method for your platform below.

Platform-specific installation

Shopify — product template (recommended)

1. Go to Online Store → Themes → Actions → Edit code
2. Open product.liquid (or your product template)
3. Find where you want to display the widget, then add this code:

<div id="zilch-emissions">
  <script
    src="https://www.api.tryzilch.com/zilch-widget.js"
    defer
    data-zilch-widget
    data-api-key="YOUR_API_KEY_HERE"
    data-sku="{{ product.selected_or_first_available_variant.sku }}"
    data-theme="default"
    data-show-breakdown="true">
  </script>
</div>

Shopify — variant-specific

For product pages with a variant selector:

<div id="zilch-emissions" data-sku="{{ product.selected_variant.sku }}">
  <script
    src="https://www.api.tryzilch.com/zilch-widget.js"
    data-zilch-widget
    data-api-key="YOUR_API_KEY_HERE">
  </script>
</div>

WooCommerce (WordPress)

1. Go to Appearance → Theme Editor
2. Open single-product.php (or use a child theme)
3. Add the widget code where you want it displayed:

<div id="zilch-emissions" data-sku="<?php echo esc_attr($product->get_sku()); ?>">
  <script
    src="https://www.api.tryzilch.com/zilch-widget.js"
    data-zilch-widget
    data-api-key="YOUR_API_KEY_HERE">
  </script>
</div>

Squarespace

1. Go to Pages and select your product page
2. Click Edit and add a Code Block
3. Paste this code:

<div id="zilch-emissions">
  <script
    src="https://www.api.tryzilch.com/zilch-widget.js"
    data-zilch-widget
    data-api-key="YOUR_API_KEY_HERE">
  </script>
</div>

BigCommerce

1. Go to Storefront → Script Manager
2. Create a new script for Footer
3. Add this code:

<script>
  window.productData = window.productData || {};
  window.productData.sku = '{{product.sku}}';
</script>
<div id="zilch-emissions">
  <script
    src="https://www.api.tryzilch.com/zilch-widget.js"
    data-zilch-widget
    data-api-key="YOUR_API_KEY_HERE">
  </script>
</div>

Custom website / HTML

<div id="zilch-emissions">
  <script
    src="https://www.api.tryzilch.com/zilch-widget.js"
    data-zilch-widget
    data-api-key="YOUR_API_KEY_HERE"
    data-sku="PRODUCT-SKU-HERE">
  </script>
</div>

Manual initialisation (advanced)

If you need more control, you can initialise the widget manually:

<script src="https://www.api.tryzilch.com/zilch-widget.js"></script>
<div id="product-emissions"></div>
<script>
  new ZilchEmissionsWidget({
    apiKey: 'YOUR_API_KEY_HERE',
    sku: 'PRODUCT-SKU-HERE',
    container: document.getElementById('product-emissions'),
    theme: 'default',
    showBreakdown: true
  });
</script>

SKU auto-detection

The widget automatically tries to detect the product SKU from your page using these methods, in order:

1. Data attribute — data-sku on the script tag or container
2. Platform objects — Shopify, WooCommerce, or BigCommerce global variables
3. Meta tags — <meta property="product:sku"> or <meta name="sku">
4. Structured data — Schema.org JSON-LD with a product SKU
5. DOM elements — elements with classes or IDs containing "sku"
6. URL parameters — ?sku=... in the URL

If auto-detection fails, specify the SKU manually:

<script
  data-zilch-widget
  data-api-key="YOUR_API_KEY"
  data-sku="MANUAL-SKU-HERE">
</script>

Customisation options

Themes

Choose a theme that matches your site's design:

• default — standard widget with emissions breakdown
• minimal — compact version without breakdown
• detailed — larger version with more emphasis

<script
  data-zilch-widget
  data-api-key="YOUR_API_KEY"
  data-theme="minimal">
</script>

Show / hide breakdown

<script
  data-zilch-widget
  data-api-key="YOUR_API_KEY"
  data-show-breakdown="false">
</script>

Custom API base URL

<script>
  window.ZILCH_API_BASE_URL = 'https://your-custom-api.com';
</script>
<script
  src="https://www.api.tryzilch.com/zilch-widget.js"
  data-zilch-widget
  data-api-key="YOUR_API_KEY">
</script>

Widget attributes reference

* Required if SKU cannot be auto-detected.

Troubleshooting

Widget not showing

1. Check that your API key is correct and active
2. Verify your domain is whitelisted
3. Ensure the product has a SKU that the widget can detect
4. Open your browser's developer tools (F12) and check the console for errors

"SKU not found" error

• Add data-sku="YOUR-SKU" to the script tag
• Ensure your product has a SKU assigned in your platform
• Check that the SKU exists in your Zilch account

"Domain not allowed" error

• Go to Profile → Widget Domain Whitelist
• Add your domain (e.g. example.com)

Widget shows "Unable to load data"

• Check that the product has emissions data calculated in Zilch
• Verify your API key is valid
• Check whether the rate limit has been exceeded

Rate limit exceeded

• Each SKU is limited to 1,000 requests per 24 hours
• This limit is per SKU, not per API key
• Wait 24 hours, or contact support for higher limits

Rate limits

Security best practices

1. Domain whitelisting — always whitelist your domains in production
2. API key security — never commit API keys to version control
3. HTTPS — always use HTTPS when loading the widget

Support

For issues or questions, contact support with:

• Your API key (first 10 characters only)
• The domain where the widget is installed
• The product SKU
• Any browser console errors

Examples

Complete Shopify example

<div class="product-emissions-section">
  <h3>Environmental Impact</h3>
  <div id="zilch-emissions">
    <script
      src="https://www.api.tryzilch.com/zilch-widget.js"
      data-zilch-widget
      data-api-key="{{ settings.zilch_api_key }}"
      data-sku="{{ product.selected_or_first_available_variant.sku }}"
      data-theme="default"
      data-show-breakdown="true">
    </script>
  </div>
</div>

Minimal widget (no breakdown)

<div id="zilch-emissions">
  <script
    src="https://www.api.tryzilch.com/zilch-widget.js"
    data-zilch-widget
    data-api-key="YOUR_API_KEY"
    data-theme="minimal"
    data-show-breakdown="false">
  </script>
</div>

Multiple products on the same page

<!-- Product 1 -->
<div id="zilch-emissions-1" data-sku="SKU-001">
  <script
    src="https://www.api.tryzilch.com/zilch-widget.js"
    data-zilch-widget
    data-api-key="YOUR_API_KEY">
  </script>
</div>

<!-- Product 2 -->
<div id="zilch-emissions-2" data-sku="SKU-002">
  <script
    src="https://www.api.tryzilch.com/zilch-widget.js"
    data-zilch-widget
    data-api-key="YOUR_API_KEY">
  </script>
</div>