Here's everything you need to add the "Powered by ekko" badge to your site: examples, code, and where it works best.
It shows that sustainability features are built into your checkout or product experience. When customers see the badge, they know they'll get transparency, and the chance to take action, if they choose.
It doesn't calculate impact, track users, or change how payments work. It's a visual indicator only, linking to the ekko explainer page.
We recommend adding the badge in high-visibility spots where customers are already thinking about their purchase:
Wherever you put it, it reinforces trust and shows you're part of something bigger.
Each badge comes with a copy-paste HTML embed snippet, ready to drop into your site with no config needed.
To embed the "Powered by ekko" banner in your application:
Drop the code snippet (div + script) wherever you want the badge to appear on your page — for example in your footer, near the subtotal, or in the checkout flow.
You control placement by where you insert the <div>, the script will render the badge inside it.
Customise the badge using these data- attributes in the <script> tag:
Deep navy tone — aligned with ekko's primary brand colour. Ideal on white or pale backgrounds.
<div id="ekko-darkblue-rect" style="min-height:40px"></div>
<script src="https://cdn.ekko.earth/badges/ekko-badge.js" async
data-target="#ekko-darkblue-rect"
data-theme="dark-blue"
data-size="md"
data-variant="rect"
></script><div id="ekko-darkblue-circle" style="min-height:200px"></div>
<script src="https://cdn.ekko.earth/badges/ekko-badge.js" async
data-target="#ekko-darkblue-circle"
data-theme="dark-blue"
data-size="md"
data-variant="circle"
></script>Best for light text on darker backgrounds. Clean, subtle, and easy to blend into most site layouts.
<div id="ekko-light-rect" style="min-height:40px"></div>
<script src="https://cdn.ekko.earth/badges/ekko-badge.js" async
data-target="#ekko-light-rect"
data-theme="light"
data-size="md"
data-variant="rect"
></script><div id="ekko-light-circle" style="min-height:200px"></div>
<script src="https://cdn.ekko.earth/badges/ekko-badge.js" async
data-target="#ekko-light-circle"
data-theme="light"
data-size="md"
data-variant="circle"
></script>Designed to create an immediate visual link to sustainability. This green badge signals your site is doing something positive for the planet.
<div id="ekko-green-rect" style="min-height:40px"></div>
<script src="https://cdn.ekko.earth/badges/ekko-badge.js" async
data-target="#ekko-green-rect"
data-theme="green"
data-size="md"
data-variant="rect"
></script><div id="ekko-green-circle" style="min-height:200px"></div>
<script src="https://cdn.ekko.earth/badges/ekko-badge.js" async
data-target="#ekko-green-circle"
data-theme="green"
data-size="md"
data-variant="circle"
></script>Minimal white badge for use on dark backgrounds. Keeps your layout clean while maintaining contrast.
<div id="ekko-white-rect" style="min-height:40px"></div>
<script src="https://cdn.ekko.earth/badges/ekko-badge.js" async
data-target="#ekko-white-rect"
data-theme="white"
data-size="md"
data-variant="rect"
></script><div id="ekko-white-circle" style="min-height:200px"></div>
<script src="https://cdn.ekko.earth/badges/ekko-badge.js" async
data-target="#ekko-white-circle"
data-theme="white"
data-size="md"
data-variant="circle"
></script>Small, medium, and large banner sizes.
<div id="ekko-badge-small" style="min-height:40px"></div>
<script src="https://cdn.ekko.earth/badges/ekko-badge.js" async
data-target="#ekko-badge-small"
data-theme="light"
data-size="sm"
data-variant="rect"
></script><div id="ekko-badge-medium" style="min-height:40px"></div>
<script src="https://cdn.ekko.earth/badges/ekko-badge.js" async
data-target="#ekko-badge-medium"
data-theme="light"
data-size="md"
data-variant="rect"
></script><div id="ekko-badge-large" style="min-height:40px"></div>
<script src="https://cdn.ekko.earth/badges/ekko-badge.js" async
data-target="#ekko-badge-large"
data-theme="light"
data-size="lg"
data-variant="rect"
></script>Badge automatically adapts to user's system theme preference.
<div id="ekko-auto-rect" style="min-height:40px"></div>
<script src="https://cdn.ekko.earth/badges/ekko-badge.js" async
data-target="#ekko-auto-rect"
data-theme="auto"
data-size="md"
data-variant="rect"
></script><div id="ekko-auto-circle" style="min-height:200px"></div>
<script src="https://cdn.ekko.earth/badges/ekko-badge.js" async
data-target="#ekko-auto-circle"
data-theme="auto"
data-size="md"
data-variant="circle"
></script>