Lune Docs Logo

Multi-leg shipments
Sea shipments
Vessel tracking
Road shipments
Air shipments
Emissions visibility widget
CSV upload
Migrate from EcoTransIT

Transactions

Dashboard

Logistics analytics

Spend management analytics

Logistics emissions explanations widget

Carbon credits

Accounts

Emission calculations

Logistics methodology

Carbon credit orders

Authentication
Pagination

General
Single leg

By transaction details
By document

Company
Electricity
Flight
Passenger transportation
Raw emission factor

Emission factors

Analytics
Sustainability pages

Quotes
Orders
Carbon certificates

Projects
Project bundles
Bundle selections
Bundle portfolios
Payments

Accounts
Client accounts

Webhook
Log inContact us

Emissions visibility widget

Easily integrate emission estimates into your booking flow with Lune’s low-code Emissions Visibility widget.

Pre-requisites

Complete the following setup steps before using this guide:
/illustrations/stamp-key.png
Generate an API key and authenticate your account.
/illustrations/stamp-accounts.png
Set up Client Accounts to track emissions for your individual customers.
  • The Emissions Visibility widget is designed to display CO₂e (e.g. for a booking flow use-case). Emission estimates displayed through this widget will not be included in tracking or reporting for you or your customers.

    • 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 the emission estimate in your front-end application, navigate to the sections where you want the estimate to appear. Then, add a div element with the lune-shipping-emission-estimate class to each desired section.An image demoing where the widget can be added for a booking flow.The lune-shipping-emission-estimate class expects the following attributes:
    • data-sessionToken: The JWT token generated in the previous step.
    • data-request: Contains all the necessary information for calculating emissions. This data should be available on the page, make it easier to pass to the element.
    The widget automatically inherits styles from your page, so no additional design work is required. However, you can override the widget’s CSS if needed.
    Data request
    The data-request attribute expects a JSON object containing the necessary details for the emission estimate. It includes several required properties, which align with the properties used in Lune’s emissions calculation API request.
    shipment
    Specifies the total size of the shipment, either by mass (in tonnes) or by the number of TEU containers.
    legs
    An array of leg objects, which each contain two properties: route and method. These properties capture the distance travelled during the leg and the method of transport, respectively.
    For a container ship transporting two containers over a distance of 10,000 kilometres, the HTML snippet would look like this:
  • Widget example
    • The route can be defined in one of two ways:
    1. By distance travelled, specifying the amount and unit.
    2. By identifying the source and destination locations, using an address, an UN LOCODE, an airport code.
    Lune supports a wide range of transport methods. Some commonly used values for the method are:
    • container_ship
    • diesel_truck
    • truck_articulated_34t
    • cargo_plane
    For a full list of available methods and additional customisation options, go to the API Reference.Once you’ve built your data request object, add the element to all the relevant sections of your application to provide customers with visibility into emission estimates, helping them take meaningful choices towards greener shipments.

    What to do next...

    /illustrations/stamp-route.png
    Calculate emission estimates for actual shipments beyond the booking flow, using the full capabilities of the API.
    /illustrations/stamp-emission-calc.png
    Gain insights into how an existing emission estimate was calculated by using the Emissions Explanations widget.
  • Want to include emissions explanations directly in your Visibility widget? Simply add the attribute data-enableExplanations="true" to your lune-shipping-emission-estimate div element.