Customizing your livestream chat widget

Including a chat box in your live stream video is handy for a couple of reasons:

  1. If you upload your video to YouTube later, viewers can still see the context of who and what comment you’re verbally replying to
  2. 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.

For my livestream I use the chat box widget offering from Streamlabs. I like that it’s not my private Twitch chat popout, because that’s where folks can see my modding messages, and private whispers also show up there that only I should see. But the most powerful feature of the Streamlabs chat box widget is that you can change the code of the widget itself. You have a fair amount of control over the HTML, CSS, and JavaScript driving the chat box.

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 was able to write some custom CSS and JavaScript to take care of re-theming the chat in Dracula colors. The results are shown in the picture below. The chat box widget is on the far right above the webcam.

alt text: a screenshot of the author’s stream video, with the chat box on the right adopting the Dracula color theme

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.

alt text: screen shot of the Streamlabs chat box settings page with custom code editor

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.

The JavaScript was a little more involved — I needed to dynamically change the color of a nickname in every chat message that showed up. This color needed to be within the Dracula color theme, but still hint at the chatter’s original chosen color. Tricky! I ended up using a cool library called Nearest Color, which was a huge help.

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 final and complete JavaScript code is below. Feel free to copy and paste for your own chat box widget!

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 💜 📺