How to Add Stream Alerts to OBS Studio

In this tutorial, you’ll learn how to step up your streaming game by learning how to add alerts to your OBS Studio account. If you don’t have alerts, you’re losing out on the opportunity to gain more followers, subscribers, and donations. To follow along with a video tutorial, click here!

Step 1: Have OBS Studio Ready to Go

First, ensure that you have OBS Studio opened and ready to go. If you do not have this downloaded, you can do so here!

Step 2: Connect your OBS and Twitch accounts

After you get OBS Studio set up, head over to Steamelements.com.

StreamElements
From here, you will want to log in using your Twitch account. It will ask you to authorize Twitch to have access to Stream Elements. You’ll need to do this to continue. 

Stream Elements Login
Once this is all logged in, you’ll see the dashboard shown below.

Stream Elements Dashboard
Once these are all connected, you will want to head over to Streamelements.com, as this is the site we will be working with today to set up alerts. 

Step 3: Creating your Overlay

On the left-hand side, select ‘Streaming Tools’ and then select ‘Overlays.’ 

Stream Elements Overlays
To create this overlay, simply click 'New Overlay'.

Stream Elements New Overlay
After clicking this, it will ask you to choose an overlay resolution. It’s best to leave the resolution at 1080p and click ‘Start.’

Step 4: Creating your Alert

Now that your overlay is created, head to the plus sign icon on the bottom toolbar, select 'Alerts', and then click 'AlertBox'.

Stream Elemetns Alert Box
This will then show you all of the options for alerts. You can choose from among the following alerts: follower, subscriber, tip, cheer, host, raid, and more. 

Stream Elements Follower Alert
On any of these, if you press the gear icon, it will bring you into the advanced settings for the alert type that you’ve selected. If you go to where it says ‘Emulate’, you can test each alert and see how it looks.

Stream Elements Emulate
If you choose ‘Follower Alert’ and then select ‘Emulate’, it will appear as an animation saying, “[Name] is now following!”

StreamElements Follow Alert
If you like the standard alerts that come with Stream Elements, then you can use these. However, if you want to level up your stream even more, you can head to Stream Designz and check out all the different alert options there. These are animated alerts that will make your stream look much more professional.   

After Selecting the alert you want to set up, all you need to do to finish this step is press ‘Save’.

Step 5: Adding the Alert to Stream Elements

Since you’ve now chosen your alert, go onto Stream Elements and find where it says “Change Video”.

Stream Elements Change Video
After that, press “Upload” and click “Select Files”.

If you purchased an animated alert overlay from Stream Designz, you can find this as a zip file. All you need to do to use this is unzip the file. Once it’s unzipped, you’ll see all the options for the different types of alerts.

This tutorial will explain how to set up two alerts because once you know how to do one, it’s the same steps for all the others. For the first one, I’ll be using the ‘New Follower’ alert. 

Once you’ve found this alert, click it and press ‘Submit’.

Now, we’re going to go ahead and test this. As we did earlier, go to the toolbar on the bottom of the screen, select ‘Emulate’, and then select ‘Follower Event’.

As you can see, the alert will appear on your screen. With this, as it stands, the text and the animation are not lined up, but that’s what you’ll learn how to do next!

Stream Designz Alerts in StreamElements
Note: The settings for aligning these will be different for all alerts that you get since they come in varying shapes and sizes. If you purchased your alerts from Stream Designz, then the settings that you’re about to learn will work just fine.

Step 6: Adjusting the Alert Text and Animation

Staying on Stream Elements, head over to the left-hand side of the screen and select the layout.

Stream Elements Layout
One thing that I like to do is to change the text from saying “[Name] is now following” to “[Name] just followed”.

Stream Elements Alert Message
Now, scroll down to where it says ‘Text Settings’ and go ahead and toggle on ‘Enable Custom Font’.

I like to use the custom font family “Impact” as it gives the text a bold look.

After adjusting these settings, let’s test the alert again. Once more, go to ‘Emulate’ and click ‘Follower Event’.

New Follower Alert
You can see here how the font has changed.

Next, you want to go to the advanced text settings to continue to move the text into place.

Stream Elements Text Settings

Again, if you’re using the Stream Designz alerts, then you’re going to be able to use these settings just fine.

Set the ‘Top’ to -200 and the ‘Left’ to 15.

Next, you’ll want to change the color of the name to match your alerts.

As you can now see when you test your alert again, the text is nicely inside the box, and the font colors look much better with the chosen theme.

Stream Elements Alerts With Name
Let’s take a look at another alert.

Step 7: Variation Settings in Subscriber Alerts

With the subscriber alert, once you hit the gear icon, you can change everything as you normally would; however, if you look toward the bottom, you can see that there are ‘Variation Settings’.

Stream Elements Variations Settings
These are super important as there are different subscriber alerts for each of these settings that you need to set up and adjust. All you need to do is click on each variation's gear icon, adjust their settings to what you learned how to do earlier, and these will be all set up and ready to be used.

Step 8: Adding Sound to Your Alerts

To add sound to your alerts, you’ll first need to go into the ‘Advanced Settings’ for the alert that you wish to change the sound for. Then, press ‘Upload Sound’ to get started.

Stream Elements Upload Alert Sound
Right out of the gate, you’ll be given one free sound from Stream Elements. If you’re curious as to what this sounds like, simply test the following event again. If this isn’t the sound that you’re looking for, you can find plenty of other free sounds online.

Personally, I use Epidemic Sound. They offer a 30-day free trial and thousands of royalty-free music and sound options for personal and commercial use.

If you look on Epidemic Sound, head into ‘Sound Effects’ and then go down to the section that says ‘Games’ and find a sound that suits your stream. Once you find the right one, select ‘Format’. You’re going to want to use an MP3 for these. Next, just simply select ‘Download’. Once this is downloaded, head back over to Stream Elements.

Back here, you’re going to want to press ‘Clear Sound’ in order to get rid of the Stream Elements default sound.

Stream Elements Clear Sound
Then, click ‘Upload Sound’ and find the MP3 sound from Epidemic Sound in your files. Once you’ve found this, select ‘Open’ and then ‘Submit’. Now, you have the ability to adjust the volume of the alert.

After this, you’re going to want to go through, one by one, to add your sound effects for each of the alerts using the steps from above.

Step 9: Adding your Sound Effects to OBS Studio

Once you have all your sound effects ready inside of Stream Elements, go to the top right corner and click ‘Save’. This will then ask you to name the overlay. I’m going to name this ‘Alerts’. Next, go back up to the top right corner to copy the URL.

Stream Elements Copy URL
Now, you can head back to OBS Studio.

You’re going to want to add these sounds to each one of your scenes, but we’ll start by adding them to the countdown timer.

OBS Studio Adding Stream Designz Alerts
Click on the plus sign icon at the bottom of the ‘Sources’ column and then select ‘Browser’. I’m going to go ahead and name this ‘Alerts’ and then select ‘Okay’. This will take you to the properties for alerts. I’m going to paste the URL, ensure that the width is 1920 and that the height is 1080.

Once you save this, the alert will be placed on the element. It is very important to note that ‘Alerts’ should be at the top of your ‘Sources’. If not, then this will only be applied to the sources below it and some could be missing your custom sounds.

OBS Studio Alerts
Now, if you go back over to ‘Scenes’, this time we’ll change the ‘Gameplay’ sounds. Once this is selected, you’ll need to press the plus sign icon again under ‘Sources’. This time, adding the sounds is a bit easier. Simply go to ‘Browser’ and select ‘Add Existing’ and then ‘Alerts’ rather than ‘Create New’.

OBS Adding Alerts
Once again, just be sure that when you’re done, ‘Alerts’ is at the top of your sources.

Now, let's test this once again to make sure that it’s working. To do this, you’ll have to go back over to Stream Elements. I would test this with every single one of your events to ensure that this is working properly for each of them.

For now, let’s just test the ‘Follower Event’. Click on this a few times and switch your tab back to OBS Studio to make sure that it’s coming up in both Stream Elements and OBS Studio.

Stay on OBS Studio and hold down on the Option or the Alt key to resize this. If you make it smaller, you have more flexibility to move this around without having to go back to Stream Elements. Now, you should be able to place this exactly where you want it to be.

OBS Studio Stream Designz Countdown Timer & Alerts
Now, switch your scenes from ‘Scene’ to ‘Gameplay’, and resize and move it here as well to get it exactly where you want it to be.

Note: The countdown timer and alert set that is being used in this tutorial can be found on Stream Designz, and it’s called the “Lux” Package.

With all of your alerts working and ready to go, you’re on the road to having a professional, high-quality stream that is sure to help you gain more followers, subscribers, and donations!

Back to blog

Animated Stream Overlays