Customizing your livestream chat widget
Including a chat box in your live stream video is handy for a couple of reasons:
- If you upload your video to YouTube later, viewers can still see the context of who and what comment you’re verbally replying to
- It can help viewers know when their chat message arrived on the other side for the streamer due to any stream or chat delays in place
You can insert a chat box into your stream via a browser source, either from Twitch’s native chat popout window, or via a third party service. This can have downsides though. It can clash with your stream layout’s aesthetic, and it doesn’t solve the problem of how difficult it is to read some of the chat nickname colors on Twitch. The lime green can be especially tough.
I use the Dracula theme in my terminal while streaming, and the main colors of my streaming layout also match pretty well with Dracula. I wanted my chat box widget to also blend in smoothly and not stand out or look ugly.
I think it looks pretty good!
How it was done
To write custom code for the Streamlabs chat box, you’ll need to turn on the ‘Enable Custom HTML/CSS’ option on the chat box settings page. It will then show you a code editor right on the same page.
The CSS was just a couple of lines in the end — specifying the main chat message color and the also background color of the chat box.
I made use of the MutationObserver API to watch for new chat messages coming in. I’m passing the nickname color of the new message into the Nearest Color method and then re-setting the color style of the nickname’s DOM element with the closest Dracula match.
The new chat color scheme got some compliments from my viewers, and some even remarked that they’re better contrast than the Twitch chat colors on the website. Not to mention I think it looks super nice 🦄 Definitely time well spent.
Hopefully this post has inspired you to tinker with the look and feel of your stream layout, and has equipped you with some new skills and ideas to do so!
Happy streaming 💜 📺