How To Create Custom Alerts For Your Twitch Stream

Having custom alerts show on your Twitch stream is the perfect way to encourage engagement from your viewers. One of the great benefits of using alerts whether you're using Streamlabs or Streamelements is the ability to use code. Therefore giving you full control over how your alerts will look.

This tutorial will focus on creating alerts for Streamlabs. The goal is to clear up the approach for custom coded alerts. In order to fully utilize coded alerts you will need a basic understanding of code, specifically HTML, CSS and Javascript. However most of the code used for creating alerts is straightforward enough.

Twitch Alert Basics

You can set code at an individual level for each alert. This allows for full customization and control over each alert type. In order to start using custom code for your alerts, it needs to be enabled within the alert settings.

Go to your Streamlabs dashboard and on the left sidebar select "Alert Box". Start by selecting the "Follows" tab. Scroll down and look for an option called "Enable Custom HTML/CSS" and enable it. More options will now show below it and there will be tabs called HTML, CSS, JS and Custom Fields. These sections will be populated with the default code for an alert.

You can now begin by adding or changing code to build out custom alerts for your Twitch stream. As previously mentioned you should already have a basic understanding of how to code in order to fully utilize this tutorial.

Streamlabs Variables

Streamlabs provides variables that you can use within your code. If you look through the default HTML code you will see variables such as "{AlertType}". They are placeholder variables that get replaced with real data at run time. Below lists the most common Streamlabs variables and their uses.

messageTemplate : This variable will be replaced with the text that you filled into the "Message Template" text box in the alert settings.

userMessage : If the user leaves a message this variable will be replaced with it's text.

img : When you upload a GIF or WEBM to the image section, Streamlabs generates a unique URL for it. This variable returns the URL of the uploaded content.

Custom Fields

Custom fields are a great way of adding extra settings to your Twitch alert. Therefore they are easy to use allowing for quick testing of your alerts. To enable custom fields look for a button named "Add Custom Fields" beside the test alert button.

This will then generate a default layout of every field type. To see how each field type is create select "Edit Custom Fields". This will show you the source code for the fields.

7 Custom Field Types

Color Picker : Allows you to easily select a color. Returns a hex code value.

Slider : Allows you to define a custom min max slider. The steps option defines the minimum value of which the slider can move.

Text Field : As the name suggests this is a text field for holding text data.

Font Picker : A drop-down selection populated with google fonts.

Drop Down : Custom drop down selection, populated with your own options.

Image Input : Allows you to select an image from your library. Returns it's URL as a value.

Sound Input : Similar to the image input except you will select sounds from your library.

Conclusion

You should now have a starting point for creating custom coded alerts within Streamlabs for your Twitch stream. However if you have never coded before, it's best to learn the basics of HTML, CSS and JS to get the most out of this tutorial.

Using custom code is the perfect way to have full control over your alerts. In addition to control, by using custom fields, you can quickly and easily change the look of your alerts to find the perfect setup and match with your stream overlay aesthetic.