Cc-calculator-widget NPM

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.
}