How to Set Up Stream Alerts in OBS with StreamElements (Step-by-Step Guide)

How to Set Up Stream Alerts in OBS with StreamElements (Step-by-Step Guide)

Want to add custom stream alerts to OBS using StreamElements? Whether you're streaming on Twitch, YouTube, or Facebook Gaming, setting up alerts in OBS keeps your audience engaged and makes your stream feel more interactive.

This guide will show you how to integrate StreamElements alerts into OBS using their Overlay system. With just a few steps, you can set up full-screen animated alerts that trigger for followers, subs, donations, raids, and more!

Why Use StreamElements for Stream Alerts?

Cloud-based alerts – No need for additional software, everything is managed online.
Custom animations – Use high-quality alerts to make your stream look professional.
Engage your viewers – Alerts encourage more interactions, tips, and subscriptions.

Ready to get started? Follow the guide below to set up StreamElements alerts in OBS and customize them for your stream! 🚀

 

Prerequisites:

- This video / tutorial assumes that you already know how to stream using OBS

- You have created an account with StreamElements.

 Steps:

When you first log into StreamElements you will be taken to the dashboard. Navigate to the Overlays setion

StreamElements Dashboard - Click Overlays

- Now click NEW OVERLAY or EDIT to edit your existing overlay. We will click NEW OVERLAY for this example. 

StreamElements New Overlay

- If you are creating this overlay for the first time a box will appear asking for you 'Overlay resolution' - Leave this at 1080p unless you know you need something else. Click START

StreamElements Resolution

Now it's time to add the alert box. Click ADD WIDGET or the '+' symbol to add an AlertBox

StreamElements AlertBox

Great! Now we have an AlertBox but the size is not set to full screen yet. Mostly all of the stream alerts we sell are full screen alerts so we will need to set the size.

Click Position, size and style.

StreamElements Postion and Size

 

- Set the Width to 1920 PX and the Height to 1080 PX

- Click CENTER WIDGET

StreamElements Size and Position

 

 Click Settings

Click the gear next to 'Cheer alert'

Tip: By default all of the alert types will be checked. This is where you can add alerts for different events (raids, followers, tips, etc.) For this tutorial we are focusing on Cheer Alerts. You may want to turn the other alert types off for now by unchecking the boxes until you are ready to edit them.


StreamElements Cheer Alert

Almost there! It's time to add the stream alert but we need to make a decision here. 

Option 1: When a user donates bits do you want the same alert for every donation?

or

Option 2: Would you like different alerts for different amounts? (our preferred option)

thinking

By default StreamElements has set up a few Variations which we either need to disable or edit depending on your individual goal.

Option 1: One Alert for All

Click Variations

Variations

  1. Click the gear next to each variation

  2. Then click DELETE for each one

  3. Finally, Click Variation Settings to go back to the main Cheer Alert Settings

Variation Delete

 

Now it's time to set up the alert

Click CHANGE VIDEO

then select your .webm stream alert - Shop Now

 

Change Video

 



 
Now decide if you want to keep or change the sound

To remove - Click CLEAR SOUND

To replace - Click UPLOAD SOUND

 

 

StreamElements Sound

 

** IMPORTANT STEP **

In order for the alert to work as a fullscreen alert we need to change the layout to 'Text over image'.

Text over Image

The alert is nearly finished. At this point you can click EMULATE > Cheer event from the middle toolbar to see the alert in action. But you may notice the Alert Message has been pushed off screen or is not exactly where you want it. Lets move it.

click Text settings

Text Settings

On this page you can play with the text settings (font, color, etc.) 

But we need to click ADVANCED to change the position

StreamElements Text Settings Advanced

We need to change the 'Margin' 

Start by changing the Top to something like '200' in order to get it on the screen

Click EMULATE>Cheer Alert to see a preview

*You can see a faint preview where the text will be. 

Keep adjusting the Top, Right, Bottom, and Left until you are happy with the text placement. 

Text Margin

One final step! We need to add the alerts to OBS.

Copy the Overlay URL by clicking the link at the top right

StreamElements

 

Now lets head over to OBS

Add a Browser Source

OBS Add Source

 

- Paste the URL
- Set the Width and Height to 1920x1080
-Click OK!

OBS Browser Properties

Done! Everything should be working now. Feel free to play around with the colors and other settings inside StreamElements and OBS. Happy Streaming!

Back to blog
1 of 3