# Widgets and Badges

You've started to make impact and now its time to show it off.

If you are driving custom UI/UX and would like to have access to your total tree count, you can access that directly using the [Get Trees endpoints](https://docs.thegoodapi.com/planting-trees#get-total-trees-planted)

### Ecommerce

If you are powering a custom ecommerce website, we also provide an easy to use drop in badge to show off your impact.

1. Add our CSS to your code: 

```html
<link href="https://app.thegoodapi.com/assets/badges/base.css" rel="stylesheet">
```

&#x20;The css supports 2 query paramters:

* text\_color (hex)
* background\_color (hex)

2. Add our script tag in&#x20;

```html
<script async src="https://app.thegoodapi.com/assets/badges/product.js?badge_type=per_product&amp;locale=en"></script>
```

This supports a few query parameters:

* badge\_type: Which can be one of, per\_product or per\_order or generic&#x20;
* impact\_type: can be `trees` or `plastics`
* show\_modal: boolean to display the "info" icon on the right hand side and also display a modal.
* locale (en, de, es it etc.)

3. Drop in our div tag anywhere in your code :)&#x20;

```html
<div class="goodapi-product-badge"></div>
```

You should see a badge like such:

<figure><img src="https://2571942105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mhp_dgk-wkn5czGfnLC%2Fuploads%2FikiSVn0J6Spj6KD553Qp%2Fimage.png?alt=media&#x26;token=fe3eddf6-80e7-4356-afce-15b4a2500bc5" alt=""><figcaption><p>Sample Product Badge</p></figcaption></figure>