> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.spreadsimple.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).

# Adding Badges

In this help article we will show how to add and customize badges.

### Adding Badges

To add a badge, in the `Content Tab` map a column or several columns from your Google Sheet to the **Badges** element:

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/badges1_3jgfnr.png)

You can map several columns as well, each value will be of its own color. 

Multiple values from the same column separated by commas will be displayed as badges of the same color.

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/badges2_1upm0rp.png)

### Changing the badges colors

You can customize the color of badges by adding the following custom CSS code:

1. Copy the following code:

```<style>
.sv-badge__1 {
background-color: #d21ac4;
}
.sv-badge__2 {
background-color: #00bf7a;
}
.sv-badge__3 {
background-color: #ffc01e;
}
.sv-badge__4 {
background-color: #ff4d4d;
}
</style>```

2. Change the values after `background-color:` -- add the colors you want to have on your website in HEX format

3. Add the modified code lines to the **Settings -> Inject custom code -> <head> section** text area.

4. Save the changes.