Skip to main content
Integrate Hey Chocolate sustainability data into your Webflow site using embeddable Web Components.

​
Setup

Add the Hey Chocolate script to your Webflow project’s custom code (Settings > Custom Code > Footer): 
<script src="https://cdn.heychocolate.com/webflow/v1/heychocolate.js"></script>
<script>
  HeyChocolate.init({ apiKey: 'sk_live_your_key' });
</script>

​
Adding widgets

Use Webflow’s Embed element to add Hey Chocolate components to any page.

​
Carbon Badge

<hc-carbon-badge
  product-id="prod_abc123"
  variant="detailed"
  theme="light"
></hc-carbon-badge>

​
Comparison Table

<hc-comparison-table
  product-ids="prod_abc123,prod_def456,prod_ghi789"
  metrics="co2,mki,water"
  highlight-winner="true"
></hc-comparison-table>

​
Impact Calculator

<hc-impact-calculator
  product-id="prod_abc123"
  show-equivalency="true"
  show-breakdown="true"
></hc-impact-calculator>

​
Supply Chain Viewer

<hc-supply-chain-viewer
  product-id="prod_abc123"
  layout="tree"
  height="500px"
></hc-supply-chain-viewer>

​
CMS integration

For Webflow CMS-driven product pages, use CMS field values as attributes:
  1. Add a Plain Text field called “HC Product ID” to your CMS collection
  2. In the Embed element, reference the field:
<hc-carbon-badge
  product-id="{{wf {"path":"hc-product-id","type":"PlainText"} }}"
  variant="detailed"
></hc-carbon-badge>

​
Styling

Match the widgets to your Webflow design by adding custom CSS in the page’s <style> tag or custom code: 
hc-carbon-badge {
  --hc-badge-accent: #F83B00;
  --hc-badge-radius: 8px;
  --hc-badge-font: 'Inter', sans-serif;
}

​
Interactions

Combine with Webflow Interactions by listening for widget events: 
document.querySelector('hc-carbon-badge').addEventListener('hc:badge-loaded', (e) => {
  // Trigger a Webflow interaction
  document.querySelector('.impact-section').classList.add('loaded');
});