Webflow

<script src="https://cdn.heychocolate.com/webflow/v1/heychocolate.js"></script>
<script>
  HeyChocolate.init({ apiKey: 'sk_live_your_key' });
</script>

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

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

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

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

<hc-carbon-badge
  product-id="{{wf {"path":"hc-product-id","type":"PlainText"} }}"
  variant="detailed"
></hc-carbon-badge>

hc-carbon-badge {
  --hc-badge-accent: #F83B00;
  --hc-badge-radius: 8px;
  --hc-badge-font: 'Inter', sans-serif;
}

document.querySelector('hc-carbon-badge').addEventListener('hc:badge-loaded', (e) => {
  // Trigger a Webflow interaction
  document.querySelector('.impact-section').classList.add('loaded');
});