Skip to main content
The Carbon Badge is a Web Component that displays a product’s sustainability score in a compact, visually appealing format.

​
Quick start

<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>

​
Variants

​
Compact

Minimal badge showing only the score: 
<hc-carbon-badge product-id="prod_abc123" variant="compact"></hc-carbon-badge>

​
Detailed

Full badge with score, equivalency, and lifecycle breakdown: 
<hc-carbon-badge product-id="prod_abc123" variant="detailed"></hc-carbon-badge>

​
Inline

Inline text format for embedding in paragraphs: 
<hc-carbon-badge product-id="prod_abc123" variant="inline"></hc-carbon-badge>

​
Attributes

AttributeTypeRequiredDescription
product-idStringYesHey Chocolate product ID
api-keyStringYesAPI key (use read-only key)
variantStringNocompact, detailed, inline (default: compact)
themeStringNolight, dark, auto (default: auto)
localeStringNoLanguage code (default: en)
show-equivalencyBooleanNoShow equivalency text (default: true)
show-breakdownBooleanNoShow lifecycle breakdown (default: false)
animatedBooleanNoEnable animations (default: true)

​
Styling

Override default styles with CSS custom properties: 
hc-carbon-badge {
  --hc-badge-bg: #ffffff;
  --hc-badge-text: #333333;
  --hc-badge-accent: #F83B00;
  --hc-badge-radius: 12px;
  --hc-badge-font: inherit;
}

​
Events

Listen for badge interactions: 
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);
});

​
Framework usage

​
React

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

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

​
Vue/Nuxt

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

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