Cool Climate Calculator Widget
This widget can be used to embed the Cool Climate Calculator UI in your site.
Installation
Make sure the following packages are installed on your machine
- node.js
- npm
Install dependencies
$ npm i
Production build
Compile into a minified bundle with external stylesheets.
$ gulp build
Development
Watch for changes:
$ gulp watch
Usage
The compiled bundle needs to be referenced within the HTML file.
<script charset="utf-8" src="dist/bundle.min.js"></script>
A div including the id tag (equivalent to the container_id
parameter) needs to be created within the body tag.
The widget can be instantiated within a <script>
tag.
(for an example, see: dist/index.html )
<script>
new window.Widget({
container_id: 'widget_goes_here',
source: 'nature.org',
campaign: 'carboncalculator',
user_platform: false,
banner_url: "https://clipartion.com/wp-content/uploads/2016/03/green-banner-transparent-png-image.png",
banner_style: {'maxHeight': '60px'},
cta: {
title: 'Offset your impact on nature',
show_equation: true,
description: 'Your support will fund forest conservation and help reduce or slow the worst consequences of climate change.',
carbon_price_per_ton: 45,
offset_url: 'http://www.nature.org/offset',
button_title: 'Offset now!'
}
});
</script>
Parameters
The UI of the CC Calculator is currently set to: http://calculator.coolclimatenetwork.net/
property | description |
---|---|
container_id | The identifier for the container which the iframe is inserted into. |
source | String to set utm_source on iframe URL parameter for Google Analytics. |
campaign | String to set utm_campaign on iframe URL parameter for Google Analytics. |
user_platform | Boolean which can be set to false in order to hide Settings menu item and disable connection to user platform (optional). |
banner_url | Set the URL of the top banner image for the calculator. |
banner_style | Set the style of the banner image within the the calculator (ie so you can position it properly) - expects an object. |
max_width | Sets maximum width of iframe. If not given, defaults to '1200px'. |
height | Sets height of iframe. If not given, updates responsively. |
* cta: {* | The following parameters need to be placed within this 'cta' object property. |
title | The title that shows up above the offset section on the Take Action page. |
show_equation | Boolean which decides whether the monthly gift equation is shown. |
description | Sets the description text displayed above the CTA button. |
carbon_price_per_ton | The carbon price per ton for calculating the offset amount. |
offset_url | The URL that the call to action button is linked to. |
button_title | The text on the call to action button. |
* }* |