Cyber Grid Full Screen Alerts Setup

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 Comfortaa
- Color: Leave as white or change to any color you like
- Size: 25
- Line height: 1
- Other settings below are optional and you can change them as you like
- Top Margin: 50
- Right Margin: 0
- Bottom Margin: 0
- Top Margin: 0
- 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: 0.5 sec
- Text disappearance: 0.5 sec

Streamlabs Alerts Settings

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.

https://streamlabs.com/dashboard#/alertbox page
https://streamlabs.com/dashboard#/widgetthemes

- 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
Font and Font size is optional, you can choose any you like.

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 TEXT FOR VERSION 1

For the alert text position on top of the alert, please copy the CSS code below

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%;}
}
/* Target the alert message text */
#alert-message {
    position: relative; /* Allows you to use top, left, etc. to shift the text */
    padding-top: 0px; /* Move text down */
    padding-bottom: 850px; /* Move text up */
    padding-right: 0px; /* Move text to the right */
    animation-delay: 0.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;
}

CSS TEXT FOR VERSION 2

For the alert text position at the bottom of the alert please copy the CSS code below

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%;}
}
/* Target the alert message text */
#alert-message {
    position: relative; /* Allows you to use top, left, etc. to shift the text */
    padding-top: 950px; /* Move text down */
    padding-bottom: 0px; /* Move text up */
    padding-right: 0px; /* Move text to the right */
    animation-delay: 0.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;
}

CSS TEXT FOR VERSION 3

For the alert text position on top of the alert, please copy the CSS code below

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%;}
}
/* Target the alert message text */
#alert-message {
    position: relative; /* Allows you to use top, left, etc. to shift the text */
    padding-top: 0px; /* Move text down */
    padding-bottom: 950px; /* Move text up */
    padding-right: 0px; /* Move text to the right */
    animation-delay: 0.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