Impact Calculator - Hey Chocolate

The Impact Calculator widget lets users interact with sustainability data by adjusting quantity, transport, and other parameters to see the environmental impact change in real-time.

Quick start

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

<hc-impact-calculator
  product-id="prod_abc123"
  api-key="sk_live_your_key"
></hc-impact-calculator>

Attributes

Attribute	Type	Required	Description
`product-id`	String	Yes	Product to calculate for
`api-key`	String	Yes	API key
`theme`	String	No	`light`, `dark`, `auto`
`locale`	String	No	Language code
`show-scenarios`	Boolean	No	Enable scenario comparison (default: `false`)
`show-breakdown`	Boolean	No	Show lifecycle phase breakdown (default: `true`)
`show-equivalency`	Boolean	No	Show equivalency translation (default: `true`)
`editable-fields`	String	No	Comma-separated: `quantity,transport,distance,material`
`default-quantity`	Number	No	Initial quantity (default: 1)

With scenario comparison

Enable the scenario toggle to let users compare against alternative materials or transport methods:

<hc-impact-calculator
  product-id="prod_abc123"
  api-key="sk_live_your_key"
  show-scenarios="true"
  editable-fields="quantity,transport,material"
></hc-impact-calculator>

Events

const calculator = document.querySelector('hc-impact-calculator');

calculator.addEventListener('hc:calculation-complete', (e) => {
  console.log('Result:', e.detail.co2Equivalent, 'kg CO2e');
  console.log('Equivalency:', e.detail.equivalency.description);
});

calculator.addEventListener('hc:scenario-compared', (e) => {
  console.log('Reduction:', e.detail.delta.percentageChange, '%');
});

Styling

hc-impact-calculator {
  --hc-calc-bg: #ffffff;
  --hc-calc-accent: #F83B00;
  --hc-calc-input-bg: #f5f5f5;
  --hc-calc-result-bg: #e8f5e9;
  --hc-calc-font: inherit;
  --hc-calc-radius: 12px;
}