An embeddable widget showing the environmental impact of running compute on the heata network.
<div data-heata-token="YOUR_TOKEN"></div>
<script src="https://cdn.heata.co/ticker/js/heata-ticker.js"></script>
Use data-heata-show to choose which columns to display. Options: co2, water, savings.
<div data-heata-token="YOUR_TOKEN" data-heata-show="co2"></div>
<div data-heata-token="YOUR_TOKEN" data-heata-show="co2 water"></div>
<div data-heata-token="YOUR_TOKEN" data-heata-show="savings"></div>
Smaller text and padding — good for sidebars or narrower spaces.
<div data-heata-token="YOUR_TOKEN" data-heata-variant="compact"></div>
<div data-heata-token="YOUR_TOKEN"
data-heata-variant="compact"
data-heata-show="co2"></div>
A single-line strip — works well in footers, nav bars, or thin banners.
<div data-heata-token="YOUR_TOKEN" data-heata-variant="inline"></div>
<div data-heata-token="YOUR_TOKEN"
data-heata-variant="inline"
data-heata-show="co2"></div>
Write your own HTML and drop in data-ht attributes wherever you want a live value.
The script skips the built-in widget when it finds any data-ht element inside the container — your markup stays exactly as-is.
<div data-heata-token="YOUR_TOKEN">
This website has generated <strong data-ht="litres"></strong> of free hot water!
</div>
<div data-heata-token="YOUR_TOKEN">
<p>
Our compute has avoided <strong data-ht="co2"></strong> of CO<sub>2</sub>,
heated <strong data-ht="litres"></strong> of hot water
(that's <strong data-ht="showers"></strong> of showers!),
and saved households <strong data-ht="savings"></strong>.
</p>
</div>
Our compute has avoided of CO2, heated of hot water (that's of showers!), and saved households .
data-ht values| Value | Description | Example output |
|---|---|---|
co2 | Total CO2 avoided | 1.23kg |
co2-compute | CO2 saved from reduced compute power | 0.45kg |
co2-hotwater | CO2 saved from re-used heat | 0.78kg |
litres | Litres of hot water generated | 42.5 |
showers | Equivalent shower time | 12 minutes |
savings | Household savings in GBP | £1.24 |
Use a dev token to preview the widget without a real API connection. The format is dev_{rate} where rate is the number of CPU-seconds added per tick (1s).
| Token | Simulates | Description |
|---|---|---|
dev_48 | 1 heata unit | Slow, single-unit pace |
dev_2400 | 50 heata units | Medium fleet (matches dashboard sample) |
dev_24000 | 500 heata units | Large deployment, numbers climb fast |
| Attribute | Required | Description |
|---|---|---|
data-heata-token |
Yes | Your public impact token, or a dev_* test token |
data-heata-show |
No | Space or comma separated list of columns: co2, water, savings. Defaults to all three. |
data-heata-variant |
No | compact or inline. Omit for the default full-size panel. |
If the ticker isn't displaying data, you can inspect the API call directly using your browser's developer tools:
F12 (or Cmd+Option+I on Mac)impact or Fetch/XHR to find the request to /v1/impact/YOUR_TOKENA healthy response will return a JSON object containing cpu_s. Common issues:
| Status | Meaning |
|---|---|
200 | OK — data is coming through. If the widget is still blank, look for errors in the console. |
401 / 403 | Invalid or expired token. You may need to request a new one. Double-check the token value. |
404 | Token not found. Double-check the token value. |
| No request visible | The script may not be loading. Ensure the <script> tag is present and the container has a data-heata-token attribute. Look for errors in the console. |
If you're having trouble or would like to request a token for your project, contact us at techsupport@heata.co.