Website Carbon Badge

Following popular demand, we’ve rolled out version 1 of our new Website Carbon Badge.

The badge can be added to the footer of any website to automatically calculate and display the carbon emissions of each page. We hope that the badge will further increase awareness of web carbon emissions by allowing any website to display a live calculation of its carbon emissions.

We are conscious that the badge itself has an impact on carbon emissions and so we have designed it to be as lightweight as possible. The code and the results from our API are all highly optimised and cached on repeated loads.

It’s really easy to install it on your site, just add the following lines to your template wherever you’d like the badge to appear:

<div id="wcb" class="carbonbadge"></div>
<script src="https://unpkg.com/website-carbon-badges@1.1.1/b.min.js" defer></script>

Dark Theme

To enable a theme that works on dark backgrounds (like the one above), just add the wcb-d class to the container like so:

<div id="wcb" class="carbonbadge wcb-d"></div>
<script src="https://unpkg.com/website-carbon-badges@1.1.1/b.min.js" defer></script>
Website carbon badge in dark colours
Dark theme
Website carbon badge in light colours
Light theme

Please check our FAQ page before sending an email.

 

Technical Info

To reduce data transfer and server load, the badge caches the result on the user’s device and will only make a maximum of one API call per day for each page it is embedded on. This means that if you’re making incremental improvements to your site, you’ll have to wait to see the results change.

The badge is open source and the repo is available on Gitlab. There is also a React wrapper built by Ivo Bathkereact-carbonbadge. If you wish

Source:

We're just loading your results

Try testing again