Logistics emissions explanations widget

The Emissions Explanations widget provides a detailed breakdown of how an emission estimate is calculated, providing you and your customers transparency around contributing factors and ensuring you are audit-ready.

Pre-requisites

Complete the following setup steps before using this guide:

Generate an API key and authenticate your account.

Set up Client Accounts to track emissions for your individual customers.

Calculate and save emission estimate IDs for shipments.

1. Embed the Lune snippet

Add the following snippet to your front-end application in an appropriate location:

Widget script snippet

2. Generate a JWT token

To use the widget, you must authenticate using a JSON Web Token (JWT). This token verifies your identity and associates the emission estimate with the appropriate client account.The JWT token payload should include the account ID, which can be either your own account ID or that of the client for whom the booking flow is being displayed. The secret key for the token must be your API key, which can be generated in the Lune dashboard. The token should be generated in your backend-application as the API Key is a secret.See below for an example of generating the JWT token using Typescript/Javascript:

JWT token generator

Lune does not require an expiration to the token, but we encourage compliance with your organisation's security policies when determining the appropriate expiration frequency.

3. Add your HTML

To display emission estimate explanations in your front-end application, navigate to the sections where you want the explanations to appear. For each relevant section, add a <div class="lune-explanations-sidepanel"> element.This element contains two attributes:

data-sessionToken: for the JWT token generated prior.
data-id: The unique estimate ID for which the explanations will be displayed.

The element renders as a pop-out side panel. Any text placed inside the element acts as a button to trigger the side panel and display the explanations.

Widget example

An image showing the rendering of the explanations widget.

The widget inherits CSS styles from your page by default. However, you can override the styles using the following optional attributes:

data-backgroundColor
data-textColor

Ensure the HTML element is added to all relevant areas of your application where you want customers to access emission estimate explanations.Success! You’re making great strides towards a carbon positive future!

Calculate emissions

Logistics

Spend management

Track and report emissions

Dashboard

Logistics analytics

Spend management analytics