How To Add Custom Alerts To Streamlabs OBS – The Easy Way – 2021

How To Add Custom Alerts To Streamlabs OBS
  • Save
How To Add Custom Alerts To Streamlabs OBS – The Easiest Way

If you are asking these questions – How do I add custom alerts to streamlabs obs? How do I add custom alerts to streamlabs obs? How will the animation be displayed when it pops up on my screen? How can you set up an alert that flashes and has a sound in Streamlabs Obs?

Well, This tutorial is going to answer all of these questions for you. In this post, I will share the easiest way to setup animated streamlabs stream alerts with sound.

What Are Streamlabs Alerts?

Streamlabs alerts are a box, image, video, or text that popup/appear when a viewer does specific actions in your Live Stream.

For example, when your viewers subscribe to you, they will see a Subscribe alert with their name in the Live Stream. This encourages viewers to complete or do the actions.

*The streamlabs alerts can be static or animated.

Download the Free Animated Stream Alerts pack with sound

Before starting the post, we need the stream alerts that we will use.

Creating one-of-a-kind alerts is an essential part of every live Stream. They represent your brand, and you may totally personalize them to fit your personality and aesthetic preferences. When you add a personal touch to your alerts, it helps you stand out from the crowd, which is why it’s critical to make a solid first impression and invest time making your alerts memorable.

And for getting custom Stream Alerts, you can go to Fiverr. There are tons of great designers from where you can get your custom alerts at a fair price.

*you will get an extra 10% off on your first order if you sign up through my link by clicking here

You can go for paid options, of course, to make it all yours and custom, but I will recommend going for the free option first to try out the Stream Alerts thing.

For this tutorial, I am using an awesome Animated Stream alerts pack with sound fx by 11hrs Creator. You can download it for free here.

Also, another excellent part about this free Stream alerts pack you can change the color easily (more on that later)

How to setup custom alerts to Streamlabs OBS with sound?

So here is the main tutorials start. Please follow the steps carefully.

Go to Streamlabs.com from your browser and log in to your account. Make sure you log in with the same social id or email that has been used to set up your Streamlabs OBS. Now open both the Streamlabs obs app and streamlabs obs in your browser. So we can check the stream alerts in a real stream environment. You can also put a screenshot or a gaming clip. So you know what it will look exactly like in actual Stream.

Stream labs stream alerts alert box setup
  • Save

Now go to your Streamlabs obs app and click the Plus icon to add the alert box. Then choose Alertbox and click add source button.

Once you name and create the alert box, it will show you more options in a popup. From there, on the left-hand side, you can toggle on or off and decide which alerts you want.

For example: if you do YouTube streaming, you don’t have to enable the Stars Alert because Star stream alerts are for Facebook Streamers.

For this tutorial, I will be showing the Bits alert, but the settings also apply for other alerts as well.

Stream labs stream alerts bits alert setup
  • Save

Select the bits layer, and once you click the bits alert, on the right side you will get more options. From this right section, you can basically edit and setup the alerts. But we will be doing this from the streamlabs website because you can then use that alert in OBS and xsplit.

Go to streamlabs.com, as I have mentioned above, you should be logged in to your dashboard.

In your streamlabs account dashboard, choose the Alert box from the left-hand side. And then scroll down. From here, you will get all the functions to edit the alerts and for other things.

streamlabs alert box
  • Save

Now, if you choose the general tab, you will be editing the global settings. But if you want to edit each alert into a different style, simply select that particular alert name tab. For this video, I will be editing the bits alerts.

7 1
  • Save

Select the Bits tab and enable it. Then the layout option will come in the first place depending on your alert design.

To get a better idea, let me give you an example.

  • If you have an alert that has a place where you can add the Bit gifter name or something like that in the bottom part of that image/video, then you need to choose the first alert layout.
  • On the other hand, if the design has the place to put the bit gifter name on top of the alert, then the second layout will be the best option. Like this free alert, we are going to use today.
  • The last one is for those stream alerts that have the place to put dynamic text to the right-hand side.

I hope this will give a good idea of that layout. Let’s choose the second layout. And choose fade-in and fade-out for the stream alert animation. In my opinion, this option is the best because otherwise, the other animations are too fancy.

8
  • Save

Now, if you click the Plus icon in the Open text to speech option, it will enable an audio message for that alert. When somebody gifts you bits, it will say the name and quantity in a computerized voice. You can enable it if you want and do the settings you like.

Now the min. Bit to alert is not for every alert. I mean, if you are editing the like alert, then you will not have this option. But has Bit has a number, that’s why you can select the minimum amount, and when that gifter does that or more amount, the alert will pop up.

Never do this. Because it directly shows you are being greedy.

10 1
  • Save

In the message template, you can write down your customized messages shown in the alert. But keep in mind don’t delete these parameters {name} x{amount} . Because the {name} field will be replaced by GIfter name, and x{amount} will be replaced with the gifted amount.

Those 2 parameters will be replaced dynamically in the Live Stream. So don’t edit or remove these.

Then in the text animation, you can select different text animations from the drop-down menu. Choose whatever fits your need.

11 1
  • Save

Then in the Image field, you can upload the actual files. No worry, you can upload Animated gifs, .webm, and .mp4 files. 

Once you click, you can click the ‘Drag & Drop Upload” field and select the Bit’s from the free alert pack.

Make sure you click the thumbnail and press the select button.

Then the same thing goes for the sound as well. You will also get the sound file in this free stream alert pack.

Inline notice: You can download the Free Animated Stream pack from here

Now set the alert duration and the alert text delay. The alert text delay is the text that will be dynamically placed in your Stream. For example, Bit’s gifter name and amount. If you want to show the name after a few seconds, you can set it here.

Custom HTMl/CSS

Now the next part is for the more advanced user. From here, you can enable custom coding. I will be making an entire post about this part soon, but not in this post. This post is for beginners.

SPOILER ALERT: If you use the Free Animated Alert pack that I have mentioned, you can follow these simple steps to place the dynamic text in the correct place.

streamlabs obs custom HTML and css option
  • Save

Click the Enable Custom HTML/CSS button > Then choose CSS > Copy (Control + C) the code below > And paste (Control + V) the code copied code in the custom CSS field.

.widget-AlertBox {
    position: relative;
}
body,
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#wrap {
    position: relative;
    height: 100%;
    width: 100%;
}
#alert-box {
    height: 100%;
    width: 100%;
    position: absolute;
}
#alert-box.hidden,
.hidden {
    opacity: 0;
}
#alert-text {
    padding: 15px;
    text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 4px #000, 0px 0px 5px #000;
}
#alert-message{
  position: relative;
  top: 5px;
  left: -30px;
}
#alert-user-message {
    text-align: center;
}
#alert-user-message img {
    vertical-align: middle;
    height: 1em;
}
#alert-image {
    position: relative;
}
#alert-image video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#alert-message > span > span {
    display: inline-block;
}
#alert-image {
    z-index: 6;
    position: relative;
}
#alert-text {
    z-index: 6;
    position: relative;
}
#alert-text-wrap {
    z-index: 6;
    position: relative;
}

It will make sure your dynamic text is always at the right place in your Stream.

Then from the Bits message setting, you can set the settings for the Message. And the Message will be written by the gifter. If you enable this, please consider increasing Alert Duration.

From the font settings, you can choose the font you love and the color as well. You can select the font from the drop-down menu. But if you want my top 3 font recommendations, then this will be the list:

  1. Poppins
  2. Nunito
  3. Rubik

Those are modern San serif font, that looks awesome and easy to read.

Now the last part. Alert Variations. This option is suitable if you want to show different alerts for different situations. Like if you’re going to show separate alerts for those who gifted 1000 Bits or another one for 500-bit gifts. The editing process is also the same as mentioned above.

18
  • Save

Now once you have done all the things, don’t forget to click the save button. Now, if you go to your streamlabs obs and Click test widgets buttons and then select bits.

You will see the alert that you have just created. Alternatively, if it’s not playing, you can go to at the beginning in streamlabs.com and copy the widget URL

20
  • Save

So that is super easy to set up alerts in Streamlabs OBS. Now, if you want to add the alert to OBS Studio or xslpit, what will you do?

Scroll to the up and see the widget URL. Then click the blue boxed and copy the URL. If you want to filter the alerts, you can select the alerts from the drop-down. 

Once you have copied the URL, Now create a new browser source in your OBS or xplit. And then paste the copied URL., and it’s done. Now you can use the alerts in OBS and split as well.

This thing also works with Streamlabs OBS.

Some tips to avoid lag in Stream while using Alerts in Streamlabs.

To avoid lags in your Stream while the alert is played, you can first consider using images instead of animated. As animated file size can be huge, it will eat more resources and bandwidth.

But if you want to use animated alerts, I have a piece of great news. When you download animated alerts, make sure you check whether that animated alert is in .webm format.

.webm is a web-optimized format that comes with lower resolution. Fortunately, this Free Animated stream alert pack is also stream optimized and comes with .webm format.

==> Change Discord Server channel name into Caps with this simple trick. Click here to read the post

NOTE: .webm file will show weird colors if you run the video in your media player. But it will be removed once you put that in your streaming software like Streamlabs or OBS.

We hope you enjoyed our article about how to setup streamlabs stream alerts with sound in 2021. With this knowledge, we know that you can make the most of your streaming experience and grow your audience with ease and make the live stream more engaging. It was a short tutorial but I have tried to keep it on point.

Don’t forget to leave your feedback below or if you have any single questions. I will try my best to reply to your comments and help you to solve your problems.

Post you may love:

FAQ’s for ‘How to add custom alerts to streamlabs obs’

What are Streamlabs Custom Alerts?

Streamlabs alerts are a box, image, video, or text that popup/appear when a viewer does specific actions in your Live Stream.

For example, when your viewers subscribe to you, they will see a Subscribe alert with their name in the Live Stream. This encourages viewers to complete or do the actions.

Where I can download the alert pack with sound?

There are tons of places to get alerts with sound or without sound. But if you want to have your own custom alerts you can get them at an affordable price on Fiverr

But if you want to get free stream alerts packs and also free stream starting soon, stinger for free you can check out 11hrs Creator

*You can get the animated alert I have used in this tutorial, by going here

How to Setup an alert in OBS Studio or OBS Classic?

You can follow the steps mentioned above. But just do a single tweak. You need to copy the Browser URL from the top side of the Streamlabs OBS Website dashboard.

Then add a browser source in your OBS Software. After that paste the Copied URL in the browser source.

And you are done. Enjoy the alerts in OBS as well.

Best fonts for using in Streamlabs Custom alerts.

You can go to fonts.google.com and see what font you like. then come back to streamlabs dashboard and search for that font.

But if I have to give my top 3 names then this will be the list:
– Poppins
– Nunito
– Rubik

Fix Live Stream lag when using alerts.

This is mainly of the high file size of your alerts. Always use alerts in .webm files. Because WebM files always produce less file size, include transparency, and maintain high quality.
It will keep your stream alerts file size as low as possible. that’s why it will take fewer resources while processing the alerts in live streaming.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *