Customize Stream Alerts with CSS & JS

Stream alerts are the notifications that pop up on your stream when someone follows, subscribes, donates, or raids. By default, they look basic, but with custom CSS and JavaScript, you can make them match your brand, animate them, and even add interactive effects. This guide walks you through the process, from locating your alert files to deploying a fully customized alert box.

What You’ll Need

A streaming platform that supports custom alerts (e.g., Twitch, YouTube, or a service like Streamlabs, StreamElements, or Muxy).
Access to your alert widget’s settings or a code editor if you’re using a local overlay.
Basic knowledge of HTML, CSS, and JavaScript (even a little helps).
A text editor (like VS Code, Notepad++, or even Notepad).
An image or GIF for your alert graphic (optional but recommended).

Step-by-Step

Locate your alert widget settings. If you’re using Streamlabs or StreamElements, open the dashboard and find the “Alert Box” widget. If you’re using a custom overlay, locate the HTML file that renders the alert.
Open the custom CSS editor. In most services, there’s a tab labeled “Custom CSS” or “HTML/CSS”. Click it to open the code editor. If you’re working locally, open the CSS file in your text editor.
Understand the alert structure. Alerts typically have three main parts: the container (the whole alert), the image (the icon or animation), and the text (the message). In the HTML, these are often elements with classes like alert-container, alert-image, and alert-message. You’ll style these with CSS.
Write your custom CSS. Start by changing the look. For example, to make the text bold and add a drop shadow, you’d write:
```
.alert-message {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
```
To add a background color and rounded corners to the whole alert:
```
.alert-container {
  background: rgba(0,0,0,0.7);
  border-radius: 10px;
  padding: 20px;
}
```
Replace the default image with your own by setting a background image on the alert image element, or just upload a new image in the service’s settings.
Add animations with CSS. Use keyframes to make the alert slide in, bounce, or fade. For example, a simple slide-in from the left:
```
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.alert-container {
  animation: slideIn 0.5s ease-out;
}
```
Most services already have default animations, but you can override them by redefining the animation property.
Insert custom JavaScript. If you need to change the text dynamically or add a sound effect, you’ll use JavaScript. In Streamlabs, there’s a “Custom JS” tab. In StreamElements, it’s under “Custom JS” as well. For local overlays, you’d edit the JS file. A basic script to change the alert message based on the event type might look like:
```
window.addEventListener('onEventReceived', function(event) {
  const data = event.detail;
  if (data.type === 'follow') {
    document.querySelector('.alert-message').innerText = 'Thanks for the follow!';
  }
});
```
This listens for the event and updates the text.
Test your alerts. Use the “Test Alert” button in your streaming service’s dashboard. This will trigger a fake event so you can see how it looks. If you’re local, you can open the HTML file in a browser and simulate an event by calling the appropriate function.
Deploy your changes. Once you’re happy, save your changes. If you’re using a cloud service, they’re live immediately. If you’re using a local overlay, make sure the file is saved and the overlay is pointed to the correct file.

Common Mistakes

Forgetting to save or refresh. Always save your CSS/JS and refresh the alert preview to see changes.
Using unsupported CSS properties. Some streaming services use a web browser engine that may not support the latest CSS features. Stick to widely supported properties like transform, opacity, and animation.
Not escaping quotes in JavaScript. If you’re writing strings that contain quotes, make sure to escape them or use different quote types to avoid syntax errors.
Overcomplicating the design. A cluttered alert can be distracting. Keep it simple and readable.
Ignoring mobile viewers. Alerts should look good on small screens too. Test on a phone or use responsive CSS.

Tips

Use a consistent theme. Match your alert colors and fonts to your stream overlays and panels.
Keep animations short. Aim for 1-2 seconds so alerts don’t cover the screen for too long.
Test with different event types. Follows, subs, and donations may have different text lengths. Make sure your design handles long messages.

Use CSS variables. Define colors and fonts as variables to make future changes easier. Example:

:root {
  --alert-bg: #000;
  --alert-text: #fff;
}
.alert-container {
  background: var(--alert-bg);
  color: var(--alert-text);
}

Back up your code. Save your custom CSS/JS in a text file so you can restore it if needed.

Troubleshooting

If your alerts aren’t working as expected, try these steps:

Check the console for errors. Open the browser’s developer tools (F12) and look at the Console tab. Any JavaScript errors will show up there. Fix those errors first.
Verify the event listener. If your JavaScript isn’t firing, make sure you’re using the correct event name. The event names vary by service; check the documentation for your specific service.
Clear your browser cache. Sometimes old CSS/JS is cached. Hard refresh (Ctrl+F5) to force reload.
Check for typos. A missing semicolon or a misspelled class name can break everything. Double-check your code.
Test without custom code. Temporarily remove your custom CSS/JS to see if the default alert works. If it does, the issue is in your code. If not, the problem is with the service itself.
Ensure the overlay is properly linked. If you’re using a local overlay, make sure the file path is correct and the server is running (if needed).

Frequently Asked Questions

Can I use any JavaScript library like jQuery?

Most services allow you to include external libraries by adding a script tag in the custom HTML, but it’s not recommended unless necessary. Plain JavaScript is usually enough and keeps things fast.

How do I make alerts appear only for certain events?

In your JavaScript, check the event type and conditionally show/hide the alert. For example, only show for follows, not for subs.

Can I use animated GIFs for the alert image?

Yes, most services support GIFs. Just upload the GIF as the image in your alert settings.

Why is my alert not showing up on stream?

Make sure the alert box is added as a source in your streaming software (OBS, Streamlabs Desktop, etc.). Also, check that the alert is not hidden behind other sources.

Can I have multiple alert styles for different events?

Yes, you can use CSS classes to differentiate. For example, add a class like follow-alert to the container and style it differently from sub-alert.

How do I change the duration of the alert?

In most services, there’s a setting for alert duration (e.g., 5 seconds). In CSS, you can also control the animation duration with the animation-duration property.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →