# Guide

This guide covers a more advanced use of the twigbit CO₂ Calculator.

# Loading the script

Add this script to the head of your page:

<script defer src="https://unpkg.com/@twigbit/co2-calculator@0.5.0"></script>

If needed, there are also builds of this script that target ES modules and modern browsers. Furthermore, it is possible to install the script via NPM: npm i @twigbit/co2-calculator.

The script provides (after it's parsed and executed) one global entrypoint: the CO2Calculator class.

# Create a CO2Calculator instance

The CO2Calculator class provides the API to interact with our CO₂ Calculator embed.

var co2calc = new CO2Calculator({
  client_id: "test",
  origin: "https://demo.co2-calculator.twigbit.dev"
});

Now you can add event listeners for the required events:

co2calc.addEventListener("connect", function (ev) {
  console.log("CO2Calculator ready to rock!");
});

co2calc.addEventListener("save", function (ev) {
  console.log("CO2Calculator saved!", ev.data);
});

# Connect the <iframe> to the CO2Calculator instance

Before you can receive events from our embed, you need to tell the CO2Calculator instance in which <iframe> tag our embed is placed.

co2calc.connect(document.getElementById("co2-calculator"));