Skip to main content
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

AttributeTypeRequiredDescription
product-idStringYesProduct to calculate for
api-keyStringYesAPI key
themeStringNolight, dark, auto
localeStringNoLanguage code
show-scenariosBooleanNoEnable scenario comparison (default: false)
show-breakdownBooleanNoShow lifecycle phase breakdown (default: true)
show-equivalencyBooleanNoShow equivalency translation (default: true)
editable-fieldsStringNoComma-separated: quantity,transport,distance,material
default-quantityNumberNoInitial 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;
}