Website Carbon Badges

This badge displays a live calculation of the carbon emissions per page view of any page it is embedded on. Powered by Website Carbon and made with minimum bytes by Wholegrain Digital

To raise issues, contribute or check out the code, visit the Gitlab repo.


Adding the badge to your site is as simple as inserting the following lines into your markup where you would like the badge to appear:

<div id="wcb" class="wcb carbonbadge"></div>
<script src="^1/b.min.js" defer></script>

Badge - Light Version

If you need the badge to work on a dark background, add the class, .wcb-d to the div container:

<div id="wcb" class="wcb carbonbadge wcb-d"></div>
<script src="^1/b.min.js" defer></script>

Badge - Dark Version

See a working example here.

More 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. If a user visits the same page more than once within a day, the result will have been cached.

Development Info

To get started:

The build process compresses the src/b.css file and then inserts it into the javascript file before uglifying the js file. Both b.min.css and b.min.js are output into the root but only b.min.js is used by the badge.