> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.getgreenspark.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How To Add Widgets Using The Widget API

### 1. You'll First Want To Start By Creating A Widget API Key:

You can find your API keys in your `Account` under the `API` tab. Click on the `Create API Key` button to start.

![](https://storage.crisp.chat/users/helpdesk/website/3fa02643ae649600/screenshot-2024-10-16-at-15272_197gujf.png)

* Name your API key and choose `Widget API` as the type, then click on the `Create API Key` button to generate your key.

![](https://storage.crisp.chat/users/helpdesk/website/3fa02643ae649600/screenshot-2024-10-16-at-16203_1eum2fj.png)


![](https://storage.crisp.chat/users/helpdesk/website/3fa02643ae649600/screenshot-2024-10-16-at-16214_12tqs58.png)

* Copy your API key and embed it into your application to fetch Widgets. Your API key is only shown to you once so you can't view it after you close this dialog, but you can always create a new one if needed.


![](https://storage.crisp.chat/users/helpdesk/website/3fa02643ae649600/screenshot-2024-10-16-at-16230_1mttuub.png)

### 2. From Here You Can Use Our Widget API Documentation To Start Building The Correct Endpoint For Your Site.

* Below is a list of our widgets, linked to their API documentation where you can fetch and display all of our Widgets easily. This will require some custom coding and so we highly suggest the support of a developer when inputting a badge using the Widget API. 

### You can find out how to embed each badge with our API documentation below:

* [Spend Level Widgets](https://greenspark.readme.io/reference/spend-level-widget)

* [Per Order Widget](https://greenspark.readme.io/reference/per-order-widget)

* [By Percentage Widget](https://greenspark.readme.io/reference/by-percentage-widget)

* [Tiered Spend Level Widget](https://greenspark.readme.io/reference/tiered-spend-level-widget)

* [Per Product Widget](https://greenspark.readme.io/reference/per-product-widget)

* [Cart Widget](https://greenspark.readme.io/reference/cart-widget)

* [Top Stats Widget](https://greenspark.readme.io/reference/top-stats-widget)

* [Full Width Banner](https://greenspark.readme.io/reference/full-width-banner)