How to add a carbon calculator to your sustainable website

Believe it or not, your website is emitting carbon dioxide every single time someone visits your page.

It’s normal. But there are ways you can be more eco-conscious of your C02 emissions

There are so many aspects to a sustainable website. Most of which occur in the background. Some great examples are; optimised images to choosing a green hosting provider.

However, there is one way you can show your website viewers how efficient your website is on every page.

And that’s with a website carbon calculator.

what is a website carbon calculator

So… what is it?

The great people over at Wholegrain Digital created the website carbon calculator “to help inspire and educate people to create a zero-carbon internet”.

The idea is that anyone can publicly display the number of carbon emissions their website is emitting. The lower your emissions, the more it is considered that your website is environmentally friendly.

The great thing about the carbon calculator is that it can be displayed as a badge at the footer of your very own website. I’ll be sharing step-by-step instructions to do this later in this blog.

why is carbon consumption important?

In a world where we can see the awful destruction of our planet through deforestation, agriculture and so much more, it may be easy to forget the impact we are making online.

The internet continues to grow every single day. It’s predicted that the demand for electricity usage is likely to increase 15x by the year 2030.

These figures aren’t surprising considering the increasing dependency many of us have on the internet for our job, businesses and entertainment.

This further enhances the importance of having a sustainable website where possible.

Being aware of your websites C02 emissions is an eco-conscious way of making a real effort to reduce waste. Particularly if you run a website that has higher-than-average traffic. For example, a popular blog or a busy e-commerce store.

what benefit does it have on your business?

The best thing about being sustainable is that there are multiple benefits for many parties. In the case of developing a sustainable website and being conscious of your carbon usage, you can form a more know, like and trust relationship with potential clients visiting your website.

Having a website with a carbon badge show prospective clients that you truly care about your impact on the environment. You don’t just talk the talk, but you can walk the walk too. Real-time quantitative data on the efficiency of your website is just one way you can reduce the barriers to building a trust factor with other eco-conscious clients who want to work with you.

It can truly help to validate your sustainable messaging in clear and simple facts, on every page of your website. If prospective clients have the impression of green-washing, it can leave a sour taste for those who hold ethics close to their heart and business.

Another great benefit of having a carbon badge is for your own awareness. You can always see the level of carbon being produced on your website and make instant changes, where necessary to keep your emissions as low as possible.

how can you get a carbon badge?

Now you know what a website carbon calculator is and all the great benefits of having one, let’s explore how you can get one on your website in a matter of minutes.

The great news is that getting a badge is as easy as copy and paste.


The badge is an open-source script, which means it is FREE for all to use.

How to add a carbon calculator to your website


You have the option to choose from a light or dark themed badge depending on your website style. Both work in the same way, but they allow for a more seamless design aesthetic.


Ensure you copy the entire code snippet, including the <div> and <script> tag to ensure the badge works correctly.


Now you have selected your code snippet, you’ll want to paste your code into the footer of your website.

If you are using WordPress, you can simply paste the code into the footer of the website by navigating to the side column and select appearance > customise or use a code widget provided by your visual builder if you are using one, such as Divi, Elementor, Beaver Builder etc.  

That’s it!

Now when you refresh your website you should see the carbon badge in your footer and automatically calculate your carbon usage.

going one step further

For many of my clients, I even go a step further and customise the badge to their brand colour making it an even more seamless design.

Examples of custom coded carbon badges to match branding


For a more in-depth analysis of your carbon reading, you can enter your website directly into the website carbon site. This way you can learn more about why you’ve been given a particular score and be given actionable steps to make changes. They also help to quantify the amount of carbon being produced on your website, such as the number of trees consumed and much more.  

If you’re interested in making a big change with your website and would like to ask me some 1-1 questions, feel free to book a no-obligation discovery call to see how I can help you. 


7 Essentials For A Sustainable Business Raadia Media

FREE GUIDE: 7 essentials of a sustainable Business website

Get your FREE guide to discover the 7 essential features of a sustainable, ethical or mission-driven businesses website!

*By completing this form and clicking I want it, you agree to join our mailing list. You can unsubscribe at anytime

related blogs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.