Carbon Badge

<script src="https://cdn.heychocolate.com/widgets/v1/carbon-badge.js"></script>

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

<hc-carbon-badge product-id="prod_abc123" variant="compact"></hc-carbon-badge>

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

<hc-carbon-badge product-id="prod_abc123" variant="inline"></hc-carbon-badge>

hc-carbon-badge {
  --hc-badge-bg: #ffffff;
  --hc-badge-text: #333333;
  --hc-badge-accent: #F83B00;
  --hc-badge-radius: 12px;
  --hc-badge-font: inherit;
}

document.querySelector('hc-carbon-badge').addEventListener('hc:badge-click', (e) => {
  console.log('Badge clicked, product:', e.detail.productId);
});

document.querySelector('hc-carbon-badge').addEventListener('hc:badge-loaded', (e) => {
  console.log('Score loaded:', e.detail.co2Equivalent);
});

import '@heychocolate/widgets/carbon-badge';

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

<template>
  <hc-carbon-badge :product-id="productId" variant="detailed" />
</template>

<script setup>
import '@heychocolate/widgets/carbon-badge';
</script>