During one of Electricity Maps’ hack-a-volt, my colleague Ronan developed a plug-and-play integration to make a website carbon aware.

All you need is to insert this script into your website’s head:

<script src="https://storage.googleapis.com/carbon-aware-websites-javascript/frontend.js"></script>

And then you’ll be able to access the carbon-aware widget:

caw.render({
      target: "carbon-aware-widget",
      callback: (zone, level) => this.handleCarbonLevel(zone, level),
      render: false
});

Under the hood what happens is that:

• A Cloudflare Worker queries the Electricity Maps carbon-intensity-level API with the latitude and longitude of the Cloudflare request. That allows to guess the grid zone in which the user is located.
• A frontend library calls this worker and renders a HTML snippet.

The widget comes with an pre-packaged rendered visual (just need to specify showBadge: true in the widget call):

Pre-packaged carbon aware badge

For those who want to use the widget to control the website dynamically, a callback function can be injected in the render call.

Based on this callback, and some javascript shenanigans, I was able to make this website carbon aware in about an hour. Note that my front-end development days are far gone, so I guess that a web developper could probably do this much more efficiently.

This blog reacts to changes in the local carbon intensity of electricity.

You should notice the following badge in the top-left corner.

Carbon aware badge

There are three level of carbon intensity, which have the following effects on what is rendered:

• Low: The full content of the website is shown.
• Moderate: The website is rendered in black and white, with reduced quality images.
• High: Images are completely hidden, as well as the disqus comments under the posts. Everything is rendered in black and white.

A picture is worth a thousand words, so I’d encourage you to test it out directly. Open the console and run the following

opening the browser console and running:

// Test high carbon level
window.carbonAwareManager.setCarbonLevel('high');

// Test moderate carbon level
window.carbonAwareManager.setCarbonLevel('moderate');

// Test low carbon level
window.carbonAwareManager.setCarbonLevel('low');

With some test images to demonstrate the functionality:

Portræt af den svenske maler Ivar Arsenius by Oda Krogh. Credit: Wikipedia Commons. This image should disappear when the carbon intensity level is high.

Why make websites carbon-aware?

To quote Fershad Irani, Tom Jarret and Hannah Smith, in their Branch post about turning websites grid-aware (note that here we use carbon-aware and grid-aware interchangeably)

The idea is to holistically consider the electricity grid that digital thing is operating within, and look for opportunities where it can help, rather than harm, that grid.