co2.observer

Usage

1. Scan your site

Start by scanning your website on co2.observer. Once the scan is complete, scroll to the bottom of the site and take note of the unique key.

Your key will look something like this:

425e5e5a59100505494518044548594f585c4f580559435e4f05155f5846175e58435959044e4f5c066b01061a041a1b4d0a696518055c434f5d0669464f4b444f580a5e424b440a13130f0a454c0a5a4b4d4f590a5e4f595e4f4e

2. Include the badge on your site

Once you have your key, you can paste the following snippet on your site, where you want the badge to appear:

<div id="badge"></div>
<script src="badge.min.js"></script>
<script>
  const myBadge = new Badge({
    target: '#badge',
    key: 'YOUR KEY GOES HERE'
  });
  myBadge.init();
</script>

The library is available on CDN: https://cdn.jsdelivr.net/:

https://cdn.jsdelivr.net/npm/co2.observer@1.1.0/badge.min.js

If you don't want to use the CDN hosted files, you can download the library here: badge.min.js. Note, the library takes up a mere 5kB, so it shouldn't impact your site's performance significantly.

The badge library is also available on NPM: npm i co2.observer

3. Customize your badge

The badge comes with several customizable properties, among them are:

• backgroundColor (String, optional): Background color of the badge. Default is #E5F4DF
• logoColor (String, optional): Color of the badge's logo. Default is #4E7D6A
• textColor (String, optional): Color of the badge's text. Default is #375A4C
• borderColor (String, optional): Border color of the badge. Default is #E5F4DF
• borderSize (String, optional): Width of the border. Default is 2px
• borderRadius (String, optional): Radius of the badge's corners. Default is 50px
• display (String, optional): Display property for the badge. Default is inline-block
• fontFamily (String, optional): Font family for the badge text. Default is -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif

<!-- Define your badge container -->
<div id="badge"></div>

<!-- Include the badge library -->
<script src="badge.min.js"></script>

<!-- Initialize your badge -->
<script>
  const myBadge = new Badge({
    target: '#badge',
    key: 'YOUR KEY GOES HERE',

    // Design option defaults (you can exclude these, if you're happy with the defaults)
    backgroundColor: '#E5F4DF', 
    logoColor: '#4E7D6A',
    textColor: '#375A4C',
    borderColor: '#E5F4DF',
    borderSize: '2px',
    borderRadius: '50px',
    display: 'inline-block',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif'
  });
  myBadge.init();
</script>