Comparison Table - Hey Chocolate

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

Attribute	Type	Required	Description
`product-ids`	String	Yes	Comma-separated product IDs (max 5)
`api-key`	String	Yes	API key
`metrics`	String	No	Comma-separated metrics (default: `co2,mki`)
`theme`	String	No	`light`, `dark`, `auto`
`locale`	String	No	Language code
`highlight-winner`	Boolean	No	Highlight best performer per metric (default: `true`)
`show-equivalency`	Boolean	No	Show equivalencies below scores (default: `false`)
`sortable`	Boolean	No	Allow sorting by metric (default: `true`)

Available metrics

Key	Label	Unit
`co2`	CO2 Equivalent	kg CO2e
`mki`	MKI Score	EUR
`water`	Water Footprint	liters
`energy`	Energy Use	kWh
`recycled`	Recycled Content	%
`circularity`	Circularity Score	0-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);
});