Widgets
Carbon Badge
Embeddable sustainability score badge for product pages and marketing.
The Carbon Badge is a Web Component that displays a product’s sustainability score in a compact, visually appealing format.
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Embeddable sustainability score badge for product pages and marketing.
<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>
| 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) |
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>