> ## 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.

# Impact Calculator

> Interactive calculator widget for real-time sustainability impact calculations.

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

```html theme={null}
<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:

```html theme={null}
<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

```javascript theme={null}
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

```css theme={null}
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;
}
```