Last Updated on January 6, 2020 by Michael Brockbank
Streamlabs is one of the most popular platforms for streaming live content. The pop-up overlay during a broadcast is easy to customize to fit your personality. It’s also exceptionally easy to add Streamlabs alerts to OBS.
Adding Streamlabs Alerts to OBS
I’m going to assume you already have an account with Streamlabs and are ready to start showing your alert box. I’m also going to assume you have OBS Studio installed, so we’re going to skip those steps.
It’s essentially the same steps to add the Extra Life widget to Streamlabs as it’s just an alert box.
For this tutorial, I am using OBS 24.0.3. However, I am fairly sure this works with earlier versions of the software if you haven’t upgraded yet. The tools might be in a different location, though.
Let’s get started…
1. Getting Your Streamlabs URL
Go to your Streamlabs account and click, “Alert Box.”
Click the “Copy” button next to the Widget URL.
You can also “Click to Show Widget URL” if you want to manually copy and paste the link. This is hidden by default to add protection from someone else using your OBS alert box URL for themselves.
For instance, what if you’re accidentally streaming your Streamlabs page? Anyone could then use the URL they see from the broadcast.
I suggest pasting the URL into something like Notepad or another text document for now. That way, you don’t lose it or accidentally copy something else to the computer’s clipboard.
2. Adding Streamlabs Alerts to OBS Studio
Open your OBS software if you haven’t already.
Make sure you’re on the “Scene” you want to edit. If you only have one, this is your default already.
In your sources window, click the “+” icon on the bottom.
As you can see in the image above, I am editing my “HowTo” scene.
Click the “Browser” option from the list. This is how OBS accesses web-based content. There’s a lot of fun you can do with this feature, but lets just stick with adding a Streamlabs alert box to OBS for now.
Input a new name for this source and click, “OK.” Because this is for my alert box, I will name it, “Alert Box.”
A properties window will load for the source displaying a placeholder image. Don’t worry, this is just a sample image and will go away once you change the URL.
Paste the link you copied in the URL space.
You can leave the width and height as default and reshape your alert box by dragging the controls. However, I find it best to adjust the settings manually. For example, I am going to use: width of 800, and a height of 300.
This works perfect for my own alert box, but you may want to try a few of your own. It will depend on the graphics you use and how you want it to appear in your live stream.
In this window, you can also add your own CSS coding to fine-tune it even further. However, it’s best to leave this section alone when adding Streamlabs alerts to OBS unless you absolutely know what you’re doing.
When you’re done, click the “OK” button on the bottom right.
You will see an empty box on your screen. This is normal. The background is transparent, and the only time you see a message is when Streamlabs detects a new follower, subscriber, donation or other instance.
Feel free to experiment with the settings of your Alert Box. There’s quite a bit you can do to customize the appearance during your live stream.
3. Testing Your Streamlabs Alerts
Before you can move it around, you need to know how it will appear in your stream. This is done by testing it through Streamlabs.
Let’s do a simple follower test to see what the alert looks like. Go back to Streamlabs and click the “Test Follow” button.
In a brief moment, Streamlabs will send the test to your OBS display.
You can do this with any of the options Streamlabs supports. For instance, you can see how subscriptions, bits and even Extra Life donations appear during your live stream.
I suggest testing all of the alerts to make sure your box is the right size for your display. As I said, the images and settings you use for each one may make the OBS alert box look very different.
At any rate, you may want to resize the alert box so it fits your overall idea for your broadcast.
Add Some Flare to Each Alert
You can spend quite a bit of time fine-tuning each alert event through Streamlabs. Make changes from the Alert Box screen by clicking any of the alerts and modifying them.
You can change things like font types and sizes, images or even upload your own sound effects. There are quite a few options at your disposal. Come up with a layout that best fits your live streaming ideas.
4. Moving and Resizing the Alert Box in OBS
Now that the alert box is in our scene, it’s time to make some adjustments. The alert box source will default to the top left of the screen. But what if you don’t want it there?
Hold down your mouse anywhere in the box and drag it.
For this tutorial, I’m going to place it on the top-middle of the display.
But what if the box is too big for where you want to place it? Hold down the mouse on any of the square points of the box and drag them. These help you resize the alert box.
NOTE: When you resize the box in this fashion, you should re-test it through Streamlabs. The size difference may make the fonts or images appear less than ideal. You might have to modify sizes in Streamlabs to make them look nice for your broadcast.
That’s all there is to it. The hardest part of adding Streamlabs alerts to OBS is fine-tuning the appearance. You can spend a lot of time making everything fit perfectly, but it’s worth the effort if it engages the audience.
What if the alert box isn’t showing?
After adding Streamlabs Alerts to OBS and the graphics or words are not showing, you may have to troubleshoot a little bit. There are a few things that could be going on.
Here’s a couple you may want to take a look at:
- The URL in the OBS source is incorrect.
Make sure you copied the link directly from Streamlabs. If you’re unsure, click the “Show Widget URL” in Streamlabs and compare the link with what you have in OBS. Make sure it’s exactly as it appears. Even the smallest error in the URL will cause it to fail.
- Your alert box is under a different resource.
The way the source window works in OBS is elements on the top of the list appear over things on the bottom. So if your alert box is at the bottom of the source window and your game and other images are above it, the alert will be hidden from view. You can drag and drop your alert box higher in the list to make it appear. Or, select the alert box and use the up and down arrows in the sources area.
- Are you using transparent or poor colors in text?
I’ve actually seen people accidentally hide text from view before by either making the font transparent or matching the background color. Use contrasting colors in your fonts and images to make them pop out when displayed.
- Something may be wrong with your Streamlabs feed.
While I’ve never seen it happen before, I suppose it’s possible that something could be wrong with your feed from Streamlabs. If you’re worried about it, click the “Launch” button next to your Streamlabs URL and run a test. This is a testing window from Streamlabs that essentially works as a browser box.
Does Streamlabs have to be open when you stream on Twitch?
No. As long as you have the URL from your Streamlabs account, you don’t need to keep the browser window open. Any time you get a subscriber, follower, donation or other alert, Streamlabs sends the information directly to the URL you added into OBS.
Get More by Adding Streamlabs Alerts to OBS
Streamlabs has a lot more functions that just telling you when someone follows you on Twitch or donates some bits. It’s constantly expanding and developing as time goes on. Spend a few moments exploring what you can do with your channel and engage your audience.
After all, you want to give viewers the best experience possible.
- 10 Pros and Cons of Streamlabs Prime YouTube Thumbnails - May 19, 2022
- Dungeon Alchemist is Now Available for Early Access on Steam! - March 31, 2022
- How to Use the Twitch for WordPress Widget for Views - March 15, 2022