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

This simple guide will show you how to add a Discord widget to your website.

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1j7wxpo.png)

#### Step 1/5

In Discord, go to **Server Settings**:

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1r5w8jf.png)

#### Step 2/5

Select the **Widget** tab and copy the **Premade Widget** code:

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_dyhf3v.png)

Make sure to **Enable Server Widget**


![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/general-discord-2022-04-07-09-_11n6thg.png)

#### Step 3/5

In Unicorn Platform, create a **Custom HTML** component:

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_32inll.png)

#### Step 4/5

Paste the widget code inside:

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1noqj7r.png)

#### Step 5/5

To center the widget horizontally, wrap the code with these HTML tags:

```
<div style="text-align: center">

<!-- Widget code here -->

</div>
```

The full code should look like this:

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_4chd4.png)





#### Done!

Save changes and open the live version of the page to see the results 💪