# API Reference

# Query Parameters

List of query parameters, that can be added to the src attribute of the <iframe> as described in the Quick Start guide. All parameters are optional, except otherwise noted.

# JS Integration Script

# Installation

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

There is also a modern version which can be loaded to save some bandwith in modern browsers supporting ES modules:

<script type="module">
  import CO2Calculator from "https://cdn.skypack.dev/@twigbit/co2-calculator@0.5.0";
</script>

When using this approach, make sure you don't load the UMD bundle by adding the nomodule attribute to the first <script> tag.

# new CO2Calculator()

Signature:

constructor(opts: InitOptions);

interface InitOptions {
  client_id: string;
  origin?: string;
}

Example:

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

# connect

Connects this instance to a specific <iframe> element. This is necessary, before you can call any of the other functions or receive events.

Signature:

connect(el: HTMLIFrameElement): void;

Example:

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

# addEventListener

Registers an event listener for the provided event type.

Signature:

addEventListener(type: string, listener: EventListener): void;

interface EventListener {
  (this: Window, event: E): void;
}

Example:

co2calc.addEventListener("save", (ev) => {
  // do something with the data: ev.data
  console.log(ev.data);
});

Event types:

# removeEventListener

Removes a previously registered event listener for the provided event type.

Signature:

removeEventListener(type: string, listener: EventListener): void;