Skip to main content
Embeds

Embed EcoFreight on your site — free

Two embeds. Either drop the whole calculator into an iframe, or place a single inline badge that prints CO2 for a named lane. Both are paste-and-go — no API keys, no accounts, no build step on your end.

Option A

Calculator iframe

A standalone build of the EcoFreight calculator served at /embed/calculator. No header, no footer, no other site chrome — just the form and the result panel. Mount it at any width; the layout reflows from ~320 px upward.

html
<iframe
  src="https://ecofreight.co/embed/calculator"
  width="100%"
  height="700"
  frameborder="0"
  title="EcoFreight CO2 Calculator"
  loading="lazy"
></iframe>
Sizing notes
  • height — 700 px fits one calculation cycle on desktop. The form does not scroll inside the iframe; oversize the height instead.
  • width — 100% works at any container size from 320 px up. Below 640 px the layout switches to a stacked single column.
  • loading="lazy" — recommended. The calculator pulls ~150 KB of JS at runtime; deferring loads until in-viewport keeps your LCP intact.
  • Dark mode follows the parent page system theme. To pin a theme, append ?theme=light or ?theme=dark to the src.
Live preview
Option B

Emissions badge

A vanilla JavaScript badge for inline use on a product page, shipping detail page, or carbon disclosure. One div with data attributes, one script tag. No framework, no dependencies, under 2 KB gzipped over the wire.

html
<div id="ecofreight-badge"
  data-origin="Shanghai"
  data-destination="Rotterdam"
  data-weight="20000"
  data-mode="sea"></div>
<script src="https://ecofreight.co/embed/badge.js" async></script>
Data attributes
attributerequirednotes
data-originyesCity or port name. Matched case-insensitively against the lane table.
data-destinationyesCity or port name.
data-weightnoTonnes or kilograms. Auto-detected; values > 100 are treated as kg. Defaults to 1 t.
data-modenoroad | sea | air | rail. Defaults to the lane's primary mode, or road if unknown.
data-themenolight | dark. Defaults to auto (matches host page).

If the origin/destination pair is in the static lookup (30+ common lanes), the badge renders the exact figure. Otherwise it falls back to a generic per-mode tonne-kilometre estimate and a link to /calculator for the full computation.

Live preview
Freight emissions
sea
Shanghai → Rotterdam
3,195kg CO2e· 20 t
Powered by EcoFreight · GLEC v3.2

Terms

All embeds include a small "Powered by EcoFreight" link to https://ecofreight.co. Removing or hiding the attribution is not permitted; the link is the only thing we ask for in return for the widget.

We collect anonymous usage stats — host page domain only, no PII, no user-level tracking, no cookies set on the host page. See /privacy for the full data handling notes.

Embeds are free for any non-commercial site. Commercial deployments at scale (carrier portals, ERP integrations, marketplaces) — email sales@ecofreight.co for licensing.

Numbers in both widgets come from the same GLEC Framework v3.2 factor tables used by the public API. The badge uses a static lookup snapshot updated alongside each GLEC release.

Related