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)
In Discord, go to Server Settings:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1r5w8jf.png)
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)
In Unicorn Platform, create a Custom HTML component:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_32inll.png)
Paste the widget code inside:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1noqj7r.png)
To center the widget horizontally, wrap the code with these HTML tags:
The full code should look like this:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_4chd4.png)
Save changes and open the live version of the page to see the results 💪
![](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 💪
Updated on: 07/04/2022
Thank you!