Get the badge

1. Scan your site

Start by scanning your website here. 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/[email protected]/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:

Property	Type	Optional/Required	Description	Default Value
backgroundColor	string	optional	Background color of the badge	#E5F4DF
logoColor	string	optional	Color of the badge's logo	#4E7D6A
textColor	string	optional	Color of the badge's text	#375A4C
borderColor	string	optional	Border color of the badge	#E5F4DF
borderSize	string	optional	Width of the border	2px
borderRadius	string	optional	Radius of the badge's corners	50px
display	string	optional	Display property for the badge	inline-block
fontFamily	string	optional	Font family for the badge text	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif

Customized example badge:

<!-- 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>