Checkout Widget
Give your customers the choice to offset their carbon footprint at checkout. One embed, real emission calculations, 34% average opt-in rate.
Our Philosophy
Giveyourcustomersthepowertomakeadifferenceatthemomentofpurchase.Ourwidgetcalculatesrealemissions,presentsclearchoices,andhandlestheentireoffsetprocessautomatically.
Real emissions, not estimates
The widget calculates actual emissions based on activity type, using verified emission factors and real-world data.
Flights
Route-based calculations using ICAO data, factoring in aircraft type, class, and load factor.
Hotel Stays
Per-night emissions based on location, property type, energy grid, and seasonal factors.
Cargo & Freight
Weight and distance-based calculations across road, rail, sea, and air transport modes.
E-Commerce
Product lifecycle emissions from manufacturing, packaging, and last-mile delivery.
Integration
Three ways to integrate
Choose the integration method that fits your stack. From zero-code HTML embeds to fully typed React components.
Custom Element
Drop a single HTML tag into any page. No build step, no framework dependencies. Works with any stack.
npm Package
Full React component with TypeScript types, hooks, and server-side rendering support.
HTML Custom Element
<atmosverde-offset
data-api-key="pk_live_xxx"
data-emission-type="ecommerce"
data-emission-value="89.00"
data-currency="USD">
</atmosverde-offset>NPM Package
npm install @atmosverde/widgetCDN Script
<script
src="https://cdn.atmosverde.com/widget/v1.js"
defer>
</script>React Component
import { AtmosverdeWidget } from '@atmosverde/widget';
export function Checkout({ cart }) {
return (
<AtmosverdeWidget
apiKey="pk_live_xxx"
emissionType="ecommerce"
emissionValue={cart.total}
onPurchase={(result) => {
trackEvent('offset_purchased', result);
}}
/>
);
}Built for conversion and trust
Real Emission Data
Calculations use verified emission factors from DEFRA, EPA, and ICAO -- not rough averages.
Brand Customization
Match your brand colors, typography, and tone. The widget looks native to your checkout flow.
Multi-Language
Supports 12 languages out of the box. Add custom translations via the dashboard or API.
Responsive Design
Adapts to any screen size from mobile to desktop. Touch-optimized for mobile checkouts.
Accessible UI
WCAG 2.1 AA compliant. Keyboard navigable, screen reader friendly, high contrast mode.
Conversion Analytics
Track opt-in rates, average offset value, and customer segments directly in your dashboard.
Add carbon offsetting to your checkout
Start with three lines of code. No credit card required for sandbox.