How to embed a discord chat box on your stream

It’s important to let your fans interact with you and with each other, so here’s a quick step-by-step guide to successfully embed a discord chat box under your livestream block. Let’s begin!

What is widgetbot?

Simply put, widgetbot is a Discord bot that will facilitate the process of creating widgets based on your server. If you want to embed your full server or just your announcements channel on your Bonfire Site, widgetbot is your friend.

Why do you need a chat box in your stream?

Having an open chat on your stream is crucial for engagement. It’s where your viewers will ask questions, and interact with you and with each other. The best option is to embed a discord channel created solely for this purpose.

Fun fact, with widgetbot you can make this chat as public or private as you want, like for example making the chat only available for discord users or even certain roles. We’ll talk more about this later in this guide.

How do I set it up?

https://www.loom.com/share/35373f0895804bf5ac1cb29c3c92b1fa

If you already have a server, create a separate channel that’s going to serve as the livestream chat. We highly recommend you make this channel public (unless your server is already open and public). To simplify the experience, make this channel free of any requirements like emoji interactions or verifications of any sort.
The next step will be inviting the bot to your server and giving it the right permissions on the new channel, you can do that here.
After the bot has been successfully added to your server, the next thing you’re going to do is embed that specific channel under your livestream.
Drag and drop the embed block where you want it to be and copy/paste the code below into the embed code field provided.

<widgetbot
  server="299881420891881473"
  channel="355719584830980096"
  width="800"
  height="600"
></widgetbot>
<script src="<https://cdn.jsdelivr.net/npm/@widgetbot/html-embed>"></script>

This code is for an HTML embed, if you are interested in using iframes instead, you can read more about it here.*

Now, make sure that in the code you just copied you replace server and channel numbers with your own. How?
Right-click your server image or name and click ‘Copy ID’. This is your server number.
Go to the livestream channel you created previously.
Right-click on the channel and click ‘Copy ID’. This is your channel number.
Paste accordingly.

After setting up widgetbot and a discord channel under your livestream you might have some questions like, what if someone doesn’t have a discord account? Or how do I prevent people from going into other channels? Here’s how you can solve these:

Widget is completely free but of course it does come with limited features. If you’re interested in getting access to features like single-channel mode and guest mode, we suggest signing up for widgetbot gold which will include both these features. After purchasing widgetbot gold, you’ll be taken to Patreon to finalize your purchase, where will need to join the widgetbot server + connect your discord to your Patreon account. After 10-15 minutes, you’ll be assigned the gold role on their discord, at that point you can go ahead and use the commands in your server to setup these modes. You can find the widgetbot commands by typing “/” and searching for widgetbot. The easiest one is “ /setup “

← Previous

Livestream block

Livestreaming Tips

On this page