Widget Instructions
Cooler widgets allow you to show your emissions data and action to your customers and other stakeholders. You or your webmaster can add them to your website or blog with just a few lines of code. Only the widgets and not the code will not appear on your site.

Step 1
First, add this code block to the HTML of the page where you'd like your widgets to appear. 

<script src="https://coolerhq.github.io/widget.js"></script>

Step 2
Copy and paste the widget code (found below each widget) on the page where you want it to appear, save your changes, and refresh the page–you should see your Cooler widget in action. Contact us at support@cooler.dev if you need help.

Neutralized Amount

<div class="widget-container-cooler" style="width: 300px; height: 300px;" data-widget-id="" data-primary-color="#2578C1"  ></div>

Emissions Per Month

<div class="widget-container-cooler" style="width: 300px; height: 300px;" data-widget-id="" data-primary-color="#2578C1"  ></div>

Footprint Equivalencies

<div class="widget-container-cooler" style="width: 300px; height: 300px;" data-widget-id="" data-primary-color="#2578C1"  ></div>

Badges

<div class="widget-container-cooler" style="width: 300px; height: 300px;" data-widget-id="" data-primary-color="#2578C1" data-size="md" ></div>