The size of the alert box is 600×700 ( use the same size for browser source size in OBS)
Adding Alerts to StreamElements
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 Under 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
- Color: Leave as white or change to any color you like
- Size: 30
- Line height: 1
- Other settings below are optional and you can change them as you like
- Top Margin: -80
- 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 600x700
- HIGHLIGHT: Animation → Pulse
- Color: Change to any color you like
- Text animation settings: Fade In 1 Fade Out 1
- Text appearance: 0.5 sec
- Text disappearance: 0.5 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
Streamlabs setup is the same for all events, you will need to 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
Alerts Settings:
- Alert Layout: Middle Box → Text under 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: 600x700
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: 600x700
- 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.