Eco-Sync Widget Integration Guide

Quick Start

Get up and running in under 5 minutes

Step 1: Include the Widget

Add the widget script to your HTML page before the closing body tag.

<script src="https://ecosync.dev/widget/eco-sync-widget.js"></script>

Step 2: Add the Widget Element

Place the custom element where you want the calculator to appear.

<eco-sync-widget
  data-api-key="es_live_your_key_here"
  data-api-base="https://ecosync.dev/"
  data-origin="Berlin, Germany"
  data-destination="Munich, Germany"
  data-weight-kg="2.5"
></eco-sync-widget>

Step 3: Customize and Deploy

Configure the widget with your API key and desired settings. That's it!

Key Features

Built for developers, designed for users

Real-time Calculations

Instant CO₂ emission calculations using industry-standard methodologies including GLEC Framework and ISO 14064.

Secure & Reliable

API key authentication, secure data transmission, and built-in error handling ensure reliable operation.

Mobile Responsive

Perfectly adapted for all devices - from desktop to mobile, ensuring a consistent experience.

Customizable Design

Shadow DOM encapsulation ensures the widget won't conflict with your existing styles.

Lightweight & Fast

Optimized for performance with minimal impact on page load times.

Global Coverage

Supports international locations and multiple transport modes (road, sea, air, rail).

Configuration

Comprehensive attribute reference

Attribute	Type	Required	Default	Description
`data-api-key`	String	Required	-	Your Eco-Sync API authentication key
`data-api-base`	String	Optional	`https://ecosync.dev/`	Base URL for API requests
`data-origin`	String	Required	-	Starting location (City, Country format)
`data-destination`	String	Required	-	Destination location (City, Country format)
`data-weight-kg`	Number	Optional	`1`	Shipment weight in kilograms
`data-transport-mode`	String	Optional	`road`	Transport mode: `road`, `sea`, `air`, `rail`
`data-vehicle-type`	String	Optional	`truck_diesel`	Vehicle type: `truck_diesel`, `truck_electric`, `cargo_ship`, `cargo_plane`
`data-standard`	String	Optional	`both`	Calculation standard: `glec`, `iso`, `both`

API Response

Understanding the calculation results

Response Structure

{
  "distance_km": 584.5,
  "co2_kg": 175.35,
  "offset_price": 3.51,
  "methodology": "GLEC Framework v3.0 + ISO 14064-1:2018",
  "standards": ["GLEC", "ISO 14064"],
  "data_quality": "Medium",
  "glec_calculation": {
    "co2_emissions_kg": 0.179,
    "ch4_emissions_kg": 0.005,
    "n2o_emissions_kg": 0.003,
    "total_co2e_kg": 0.189,
    "methodology": "GLEC Framework v3.0",
    "well_to_tank_kg": 0.024,
    "tank_to_wheel_kg": 0.164,
    "uncertainty_percentage": 15,
    "data_quality": "Medium"
  },
  "iso14064_calculation": {
    "co2_emissions_kg": 0.143,
    "ch4_emissions_kg": 0.004,
    "n2o_emissions_kg": 0.003,
    "total_co2e_kg": 0.151,
    "standard": "ISO 14064-1:2018",
    "scope": "Scope 3",
    "category": "Business Travel",
    "activity_data": 1.592,
    "emission_factor": 0.095,
    "uncertainty_percentage": 10,
    "data_quality": "Medium",
    "reduction_achieved_percentage": 4.76
  },
  "compliance_report": {
    "organization_id": "ECO-SYNC-CLIENT",
    "reporting_period": "2024-Q1",
    "compliance": {
      "csrd_status": {
        "required": true,
        "reporting_year": 2025,
        "double_material": true,
        "esrs_standards": [
          "ESRS E1 - Climate Change Mitigation",
          "ESRS E2 - Climate Change Adaptation"
        ]
      }
    },
    "risk_assessment": {
      "non_compliance_risk": "Low",
      "financial_impact": 0,
      "reputational_impact": "Low"
    }
  }
}

Example Response (with WTT/TTW Breakdown)

{
  "distance_km": 289.6,
  "co2_kg": 189.30,
  "offset_price": 2839.50,
  "methodology": "GLEC Framework v3.0 + ISO 14064-1:2018",
  "standards": ["GLEC", "ISO 14064"],
  "data_quality": "Medium",

  "glec_calculation": {
    "total_co2e_kg": 0.189,
    "well_to_tank_kg": 0.024,     // WTT: fuel production & transport
    "tank_to_wheel_kg": 0.164,   // TTW: vehicle tailpipe emissions
    "co2_emissions_kg": 0.179,
    "ch4_emissions_kg": 0.005,
    "n2o_emissions_kg": 0.003,
    "uncertainty_percentage": 15
  },

  "iso14064_calculation": {
    "total_co2e_kg": 0.151,
    "scope": "Scope 3",
    "activity_data": 1.592,
    "emission_factor": 0.095,
    "reduction_achieved_percentage": 4.76
  }
}

WTT — Well-to-Tank TTW — Tank-to-Wheel WTW = WTT + TTW (total lifecycle)

Custom Events

The widget emits custom events that you can listen to:

// Listen for calculation completion
document.addEventListener('eco-sync-calculated', function(event) {
    const result = event.detail;
    console.log('CO2 emissions:', result.co2_kg, 'kg');
    console.log('Distance:', result.distance_km, 'km');
    console.log('Offset cost:', result.offset_price, 'EUR');
    
    // You can now use this data for analytics, logging, or UI updates
});