Documentation Index
Fetch the complete documentation index at: https://docs.heychocolate.com/llms.txt
Use this file to discover all available pages before exploring further.
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
| Attribute | Type | Required | Description |
|---|
product-id | String | Yes | Hey Chocolate product ID |
api-key | String | Yes | API key (use read-only key) |
variant | String | No | compact, detailed, inline (default: compact) |
theme | String | No | light, dark, auto (default: auto) |
locale | String | No | Language code (default: en) |
show-equivalency | Boolean | No | Show equivalency text (default: true) |
show-breakdown | Boolean | No | Show lifecycle breakdown (default: false) |
animated | Boolean | No | Enable 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>
