Skip to main content
The Comparison Table widget displays multiple products side-by-side with sustainability metrics, highlighting the best performers.

​
Quick start

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

<hc-comparison-table
  product-ids="prod_abc123,prod_def456,prod_ghi789"
  api-key="sk_live_your_key"
  metrics="co2,mki,water"
></hc-comparison-table>

​
Attributes

AttributeTypeRequiredDescription
product-idsStringYesComma-separated product IDs (max 5)
api-keyStringYesAPI key
metricsStringNoComma-separated metrics (default: co2,mki)
themeStringNolight, dark, auto
localeStringNoLanguage code
highlight-winnerBooleanNoHighlight best performer per metric (default: true)
show-equivalencyBooleanNoShow equivalencies below scores (default: false)
sortableBooleanNoAllow sorting by metric (default: true)

​
Available metrics

KeyLabelUnit
co2CO2 Equivalentkg CO2e
mkiMKI ScoreEUR
waterWater Footprintliters
energyEnergy UsekWh
recycledRecycled Content%
circularityCircularity Score0-100

​
Styling

hc-comparison-table {
  --hc-table-bg: #ffffff;
  --hc-table-header-bg: #f5f5f5;
  --hc-table-winner-bg: #e8f5e9;
  --hc-table-border: #e0e0e0;
  --hc-table-font: inherit;
}

​
Events

document.querySelector('hc-comparison-table').addEventListener('hc:product-selected', (e) => {
  console.log('Product selected:', e.detail.productId);
});