Have you seen those fancy graphic overlays that animate over gaming live streams? They’re great for audience interactions, and when I did my research on how to create those, I came across Streamlabs.com. That’s a service most successful streamers seem to use these days.
There are two ways to set this up: either download a modified version of OBS Studio from the Streamlabs website (it’s called Streamlabs OBS, but it’s Windows only at the time of writing), or use their Alert Box widget with the regular version of OBS Studio.
I’ll show you how to get the latter option going in this article.
Getting the Alert Box URL
The way this service is provided is via a transparent graphic created in CSS, using a simple browser window. We’ll capture the output of that URL and use it as a caption overlay in our OBS scene.
To get the URL for either a YouTube or Twitch account, head over to streamlabs.com and login with either of those credentials. Essentially, you’ll grant Streamlabs access to your account so that new subscribers and donations can be accessed by their servers. On this occasion, connect your Patreon and PayPal accounts so that such notifications can also be displayed.
On the left hand side, under Widgets, you’ll find several options, among those is the Alert Box. Select it and see all the configurable options on the right. Copy your unique URL from the field that’s hidden by default. We’ll need to add that to OBS in a moment.
Create an overlay in OBS Studio
Open OBS Studio and add a Browser Source to your Scene. Note that this needs to be at the top of your list so that these alerts can be displayed on top of your scene. Mine only contains a simple Display Capture otherwise.
In the Browser properties, paste the URL from Streamlabs in the dedicated URL field. That’s all you need. Make sure to scale and position your Alert Box to your liking.
Testing Alerts
Back on the Streamlabs website, in the Alert Options, you’ll see a list of test buttons that let us trigger dummy alerts. They’ll allow us to preview how those alerts will come up when we’re live. Click any of them, then head back to your OBS preview window and see what it looks like in action.
Note that Streamlabs OBS has this option built in as a plugin by default. The above setup is only necessary for the regular version of OBS Studio, available from obsproject.com. Here’s an example of what the alert looks like:
Feel free to explore the other widgets you get from streamlabs.com.