Alert Box Sizes in OBS/Streamlabs/StreamElemensts
- The size of the alert box Variation Box is 600×800 ( use the same size for browser source size in OBS)
- The size of the alert box Variation Cloud is 600×350 ( use the same size for browser source size in OBS)
These alerts come with the One-click setup for StreamElements, in the Download folder open TXT file “StreamElements Links” and copy/paste URL in the browser.
StreamElements Alerts Settings
Log in to StreamElements:
- Go to StreamElements and log in with your streaming account.
Access Alerts:
- Navigate to the “Streaming Tools” – “Overlay” in the StreamElements dashboard menu on the left side.
Create or Edit an Overlay:
- Click “Create New Overlay” or select an existing overlay where you want to add alerts.
Add Alert Widgets:
- Click the “+” button to add a new widget.
- Select “Alerts” and then choose the type of alert you want to add (e.g., Follow Alert, Donation Alert).
Customize Your Alerts:
- Adjust the appearance, animations, and sounds for your alerts as needed.
Alert Settings
- Image file → Set Image
- Video file → Change Video
- Video Volume → Adjust this if the video has sound included ( in this situation leave it as default )
- Upload Sound → Click to upload sound and navigate to the downloaded folder → Open the Sound folder and upload sound
- Alert Layout: Text Over Image
- Alert message: Add your text or check our Message Template Guide Below
- Message Duration: 10 sec
- Pick a font: Choose any Google font you like
- Color: Leave as white or change to any color you like
- Size: 35
- Line height: 1.2
- Other settings below are optional and you can change them as you like
- Top Margin: 130
- If you change the size of the alert box, you will also need to adjust this setting, settings for the text position are only for the alert box in size 600x350
- HIGHLIGHT: Animation → Pulse
- Color: Change to any color you like
- Text animation settings: Fade In 1 Fade Out 1
- Text appearance: 1.5 sec
- Text disappearance: 1 sec
Alert Settings
- Image file → Set Image
- Video file → Change Video
- Video Volume → Adjust this if the video has sound included ( in this situation leave it as default )
- Upload Sound → Click to upload sound and navigate to the downloaded folder → Open the Sound folder and upload sound
- Alert Layout: Text Over Image
- Alert message: Add your text or check our Message Template Guide Below
- Message Duration: 10 sec
- Pick a font: Choose any Google font you like
- Color: Leave as white or change to any color you like
- Size: 35
- Line height: 1.2
- Other settings below are optional and you can change them as you like
- Top Margin: 260
- If you change the size of the alert box, you will also need to adjust this setting, settings for the text position are only for the alert box in size 600x800
- HIGHLIGHT: Animation → Pulse
- Color: Change to any color you like
- Text animation settings: Fade In 1 Fade Out 1
- Text appearance: 1.5 sec
- Text disappearance: 1 sec
Get the Overlay URL:
- Save your overlay and copy the overlay URL from the top-right corner of the Overlay Manager.
Add Alerts to OBS:
- Open OBS Studio.
- In the “Sources” box, click the “+” button and select “Browser”.
- Name the source (e.g., “StreamElements Alerts”) and click “OK”.
- In the “Properties” window, paste the URL you copied into the “URL” field.
- Adjust the “Width” and “Height” fields according to the dimensions of your alert overlay.
- Click “OK” to add the browser source.
Test Your Alerts:
- Use the preview tools in StreamElements or simulate an alert to ensure it displays correctly in OBS.
Adding Alerts from Streamlabs to OBS
Streamlabs setup is the same for all events, you will need manually enter all settings for each alert you want to show.
Before you start creating your new alerts make sure you set a new Widget Theme so you keep your old alerts saved in case you need them.
- Create a New Theme.
- Name your theme and adjust general settings as you like.
- Edit Alerts Individually
Streamlabs Alerts Variation Cloud & Box Settings
- Alert Layout: Middle Box → Text over image
- Alert Animation → Fade in → Fade Out
- Message Template: Check → Message Template Notes at the end of the guide
- Text Animation: Pulse
- Image: Click on the arrow in the tab to upload image/video
- Upload Sound → Click on the arrow to upload sound and navigate to the downloaded folder → Open the Sound folder and upload the sound
- Sound Volume: Optional
- Alert Duration: 9 sec
- Alert Text Delay : 0 sec
- Enable Custom HTML/CSS → ENABLED
- Alert Box Size in OBS browser source: 600x400
CUSTOM CSS CODE
This alert comes with custom CSS Code → In the downloaded folder find file → Streamlabs CSS for Alert open the file in the notepad or word document
Copy the code from the file and paste the code in the CSS tab do not edit other tabs
COPY THIS CODE AND PASTE IT IN THE STREAMLABS ALERTS FOR EACH ALERTS INDIVIDUALLY
CSS for Streamlabs Alert Variation Box
CSS for Streamlabs Alert Variation Cloud
Custom Code
CSS alerts delay
.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;
}
@keyframes fadeInOut {
0% {opacity: 0;}
25% {opacity: 1;}
75% {opacity: 1;}
100% {opacity: 0%;}
}
#alert-text {
line-height : 50px;
padding-bottom: 25px;
text-shadow: 0px 0px 0px ;
opacity: 0;
animation-name: fadeInOut;
animation-delay: 1.5s;
animation-duration: 9s;
}
#alert-message,
#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;
}
Custom Code
CSS alerts delay
.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;
}
@keyframes fadeInOut {
0% {opacity: 0;}
25% {opacity: 1;}
75% {opacity: 1;}
100% {opacity: 0%;}
}
#alert-text {
line-height : 40px;
padding-top: 80px;
padding-bottom: 30px;
text-shadow: 0px 0px 0px ;
opacity: 0;
animation-name: fadeInOut;
animation-delay: 1.5s;
animation-duration: 9s;
}
#alert-message,
#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;
}
Get the Alert Box URL:
- Ath the top find the “Widget URL” section and copy the URL provided for your alerts.
Add Alerts to Streaming Software:
- Open your streaming software (OBS, Streamlabs Desktop, etc.).
- In OBS, add a new “Browser Source” and paste the Widget URL you copied.
- Alert Box Size in OBS browser source: For Variation Cloud 600x800 and 600x350 for a Variation Box
- In Streamlabs Desktop, add the “Alert Box” widget directly to your scene.
Test Alerts:
- Use the test buttons in the Alert Box settings to simulate alerts and ensure they appear correctly on your stream.
Tips for Both Platforms
- Branding: Customize alerts to match your stream’s theme and branding. This includes colors, fonts, and animations.
- Testing: Always test your alerts using the preview options to ensure they look and function as intended before going live.
- Overlay Placement: Ensure alerts are placed in a visible but non-intrusive area on your stream layout.
If you would like to separate text in 2 lines please use this code in front of the word you want to separate to the next link
Example: {name} is now following
It will show like this:
DexPixel
is now following
### Template that will show text in 1 line
- Follower – welcome {name}
- Subscriber – welcome {name}
- Resubscriber - welcome {name} x {amount}
- Sub Gift - {gifter} has gifted a sub to {name}
- Community Gift - {gifter} gifted {amount} subs!
- Tip – Thank you {name} - {currency}{amount}
- Cheer – {name} x{amount}
- Raid – {name} raid x{amount} viewers
### Template that will show text in 2 lines
- Follower – welcome <br> {name}
- Subscriber – welcome <br> {name}
- Resubscriber - welcome <br> {name} x {amount}
- Sub Gift - {gifter} <br> gifted a sub to <br> {name}
- Community Gift - {gifter}<br> gifted {amount} subs!
- Tip – Thank you <br>{name} - {currency}{amount}
- Cheer – {name} x{amount}
- Raid – {name} <br>raid x{amount} viewers