Display Discord Messages in Livestream Overlays
Hello streamers and devs! Are you looking to spice up your stream by making it more interactive? Well, you’ve landed on the right guide! Today I will show you a simple way to set up an OBS overlay that will allow your viewers to interact with you via a Discord bot using prefix commands!
Prerequisites:
To complete this tutorial you will need:
Let’s get started!
Step 1. Install App on Autocode
Select Insall Free button.
After you press Next you will be prompted to link a Discord Account. Select Link.
If this is your first time linking a Discord account, select Link a New Resource.
Please follow the instructions in the popup window carefully as it will walk you through the following steps to create a Discord Application and link it to your Autocode account:
- Create a Discord Application through the Discord Developer Portal
- Retrieve Your Application Credentials
- Add an OAuth2 Redirect
- Add a Bot User and Bot Token
Once you complete the guided steps select Finish. A green checkmark will appear noting that you have completed these steps. Select Install App.
After you hit Continue you will be taken to your prefix.js file which looks like this:
The file has been set to be triggered by Discord - message.create.prefix. The code inside the file will execute whenever someone types the prefix command !message followed by text in Discord. If you click the trigger you will see that we have preset our prefix command to !message. This can be changed to whatever you like, but for now, keep it as is.
On lines 7 - 10 we store the messages from Discord with await lib.utils.kv['@0.1.16'].set. Utils.kv is an easy to use database service available on Autocode. On lines 12 - 16 we add a reaction to every Discord message invoking the prefix command with await lib.discord.channels['@0.3.0'].messages.reactions.create. This is nice to have so that our users know their request went through.
Navigate to the file called API_Request_Handler.js This is the endpoint that will retrieve messages stored in a simple database Key-Value Storage on Autocode.
Copy the Autogenerated API endpoint found at the bottom of API_Request_Handler.js
Navigate to the script.js file found under the www folder. Paste the API endpoint url onto line 2 in between the single quotes as I have done.
Step 2: OBS Setup
Your overlay is ready to test! Head on over to Discord and run your prefix command!
Great job! You’ve done it! Now watch your overlay update every time you use the command.
Deeper Dive into the Project
If you are wondering how all of this is working in the backend, I will briefly explain the other files that make the magic happen.
When you expand the www directory you will find a very simple HTML file, overlay.html. We link to our script.js and style.css files here.
Our script.js file will be making an xmlHttp request every second to our API_Request_handler and if it finds a message stored in KV then it will update our HTML page with the new message from Discord.
If you’d like to change the style of your widget including color, font, size, borders etc you can do that in the style.css file.
Notice how I have uploaded my fonts under www/fonts directory. To upload a different font, right-click the fonts directory and select upload files. Then require them with the @font-face rule in your style.css file.
That's All!!
Thank you for building with us! I hope this guide has helped you learn how easy it is to set up an OBS overlay with Autocode! If you have additional questions don’t hesitate to ask us on our Discord Developer server. I’d also love to get your feedback, please reach out to let me know if this guide helped you!
