Alert Box Sizes in OBS/Streamlabs/StreamElemensts
- The size of the alert box is 1920×1080 ( use the same size for browser source size in OBS/STREAMLABS)
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: 8 sec
- Pick a font: Choose any Google font you like or Della Respira
- Color: Leave as white or change to any color you like
- Size: 20
- Line height: 1
- Other settings below are optional and you can change them as you like
- Top Margin: 1015
- Right Margin: 50
- 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 1920x1080
- 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 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: 1920x1080
- 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.
Streamlabs Alerts Setup
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 Text on Top/Bottom
- 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: 7 sec
- Alert Text Delay : 0 sec
- Enable Custom HTML/CSS → ENABLED
- Alert Box Size in OBS browser source: 1920x1080
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 the CODE AND PASTE IT IN THE STREAMLABS ALERTS FOR EACH ALERTS INDIVIDUALLY, COPY ONLY CODE YOU WILL SETUP TOP OR BOTTOM
CSS for Streamlabs Alert Text
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 {
padding-top: 1000px;
padding-right: 50px;
text-shadow: 0px 0px 0px 0px;
opacity: 0;
animation-name: fadeInOut;
animation-delay: 1.5s;
animation-duration: 7s;
}
#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: 1920x1080
- 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 updated all alerts but you still see alerts you used before make sure you don’t have any VARIATIONS enabled for those alerts
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