How to Add Streamlabs Alerts to OBS

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.

All it really takes is a Streamlabs account and OBS Studio. Both of these systems are free to use.

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.”
Streamlabs Alert Box

Click the “Copy” button next to the Widget URL.
Copy Alert Button

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.
Add Source

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.
OBS Browser Source

Input a new name for this source and click, “OK.” Because this is for my alert box, I will name it, “Alert Box.”
Source Name

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.
Paste Alert Box URL

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.
Save OBS Alert Box

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.
Test Follow Alert Box

In a brief moment, Streamlabs will send the test to your OBS display.
Alert Box in OBS Test

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.
Modify Alerts

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.
Drag Alert Box

For this tutorial, I’m going to place it on the top-middle of the display.
Top Middle

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.
Resize Alert Box OBS

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.

Michael Brockbank
(Visited 4,816 times, 5 visits today)

Michael Brockbank

Michael developed ColoradoPlays to help various charities through his favorite pastime. Since then, the blog and Twitch channels have donated several hundred dollars to Extra Life, Geeks of Grandeur and Operation Supply Drop to name a few.

4 thoughts on “How to Add Streamlabs Alerts to OBS

  • June 28, 2018 at 3:45 am
    Permalink

    i have 21.1.2 Obs but the BROWSER (source) doenst exist on mine so does that mean i cant us my alert box anymore ? 🙁

    • June 28, 2018 at 8:27 am
      Permalink

      Hello there,
      Don’t think I’ve ever run into that problem before. According to others, it often happens when something is disabled in the install package. Usually, it’s removing the Browser plugin. However, some made claims to anti-virus apps stopping certain things from installing or running.

      Here’s a few ideas to help:
      1) Reinstall OBS and verify all plugins are being installed.
      2) Disable anti-virus during the install process. I know it’s risky, but I’ve had to do it a few times in the past.
      3) Install the package of the Browser plugin located at OBS Studio’s website: https://obsproject.com/forum/resources/browser-plugin.115/

      You can also try out Streamlabs OBS. It’s essentially the same thing as OBS but tailored for Streamlabs and the alert system. Plus, you can import your OBS scenes. I wrote an article about it if you’re interested: https://coloradoplays.com/2018/06/review-what-is-streamlabs-obs-and-why-use-it/

Comments are closed.

LIVE NOW! CLICK TO VIEW.
CURRENTLY OFFLINE
%d bloggers like this: