Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.heychocolate.com/llms.txt

Use this file to discover all available pages before exploring further.

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;
}