Following popular demand, we’ve created a 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 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 for 7 days.
Please note that the cache timing on your badge is different from the cache on this website, and therefore the badge and website may display different results based upon the timing when the respective tests were conducted.
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/[email protected]/b.min.js" defer></script>
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/[email protected]/b.min.js" defer></script>
Please check our FAQ page before sending an email.
Details about editing the badge can be found here.
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 are a number of community wrappers that may be useful: