Widgets & Badges
You’re making impact — now show it off.
If you’re building custom UI and only need the total tree count, fetch it via the Get total trees planted endpoint.
Ecommerce badge
Section titled “Ecommerce badge”For ecommerce sites, we provide a drop-in badge that displays your impact without any custom UI work.
1. Add our CSS
Section titled “1. Add our CSS”<link href="https://app.thegoodapi.com/assets/badges/base.css" rel="stylesheet">The CSS supports two query parameters:
text_color— hex color (e.g.#222222)background_color— hex color (e.g.#ffffff)
2. Add our script
Section titled “2. Add our script”<script async src="https://app.thegoodapi.com/assets/badges/product.js?badge_type=per_product&locale=en"></script>The script supports these query parameters:
| Parameter | Values | Description |
|---|---|---|
badge_type | per_product, per_order, generic | What the badge displays impact per |
impact_type | trees, plastics | Which impact to show |
show_modal | true, false | Whether to show an info icon that opens a details modal |
locale | en, de, es, it, etc. | Display language |
3. Drop in the badge element
Section titled “3. Drop in the badge element”<div class="goodapi-product-badge"></div>You should see a badge like this:
