How to Add Streamlabs Alerts to XSplit Broadcaster

Last Updated on August 20, 2020 by Michael Brockbank

The Streamlabs overlay is among some of the most popular tools when streaming to Twitch. Using web-based data, you can use it to show a variety of things during the live show. All it takes is a simple URL from your account.

So, how do you add Streamlabs alerts to XSplit Broadcaster?

I’m going to assume you already have a Streamlabs account and XSplit Broadcaster. If you don’t, either of these tools are free to use.

However, you get far more options if you pay the $15 for three months of XSplit. And even though I use OBS quite often for some videos, I still use the premium XSplit Broadcaster to stream on Twitch.

 

What is Streamlabs?

Formerly known as Twitch Alerts, Streamlabs is a collection of tools that are easy to implement for live streaming on Twitch. You can set up alerts, goals, moderate the channel messages, show a tip jar, and much more.

The system also has a minor capacity to display analytics for your channel, such as follows, subscribers and total tips.

It’s the “go-to” tool for many Twitch users to set up donations or tips through PayPal and other payment gateways. Using the Streamlabs overlay essentially spices up your broadcast.

Today, though, we’re just looking at adding the alert box to your live stream.

Getting the Alert Box from Streamlabs

After logging into Streamlabs, click the “Alert Box” under Features in the left panel.
Alert Box

For security reasons, Streamlabs will automatically hide the URL for the alert box widget. This is to protect you in case you accidentally stream your account page – which happens far more than you might think.

You don’t really need to see this URL, but you can click the area to show the link.
Show Alerts URL

However, let’s just click the “Copy” button to the right of the URL space.
Copy Alerts URL

Adding the Streamlabs Alerts Overlay to XSplit Broadcaster

Load into your XSplit Broadcaster application.

In the scene you want to add the alert box, go to the “Add source” option and click “Webpage…” This is because Streamlabs technically creates a page for your data. It’s all web-based and works very well.
Add Source Webpage

Paste the URL you copied from Streamlabs and click, “OK.”
Paste Alert Box URL XSplit

Now you can grab the box in XSplit and resize it to fit your needs. You can make it large or small depending on how you want it to show during the Twitch stream.
Resize XSplit

You can also move the box around the screen and place it where you want alerts to appear.

Testing the Alert Box

Before you start streaming, it’s probably a good idea to test how the alert box is displayed in your game play. After all, you don’t want something to look or sound horrible when you have people watching.

Go back to the Alert Box section of Streamlabs and click the “Test Follow” button.
Test Follow Alert Box XSplit

This will send test data to the widget in XSplit Broadcaster. It will show your image as well as yourself as the follower.
Alert Box Test Follow

At this point, you can reshape the widget or move it to a new location. This is all personal preference. Place it somewhere you want everyone to see it.

I suggest placing it somewhere that doesn’t take away from the action. Some viewers may not appreciate the disruption of a follower alert.

Making Changes to the Alert Box

So now you have a follower alert in XSplit broadcaster, but what if you want to make a few changes? What can you do to make your alert box in XSplit stand out more to the audience?

You don’t want to be generic and use the same default images and sounds everyone else does, right?

These changes are done directly from your Streamlabs dashboard in the Alert Box widget screen.

Click any of the headings available under the different test buttons. By default, General Settings is already selected. However, you can customize things like the Follows alert by clicking the heading.
Alert Headings

For this tutorial, I’m clicking into “Follows.”

This area lets you change images, sounds, the layout of the alert box, sound volume, fonts and more. You can even upload animated gifs if you want to go beyond a simple still image.
Customize Alert Box

When you’re done with your changes, click the “Save Settings” button on the bottom. The alert box will not update your adjustments until you do.
Save Alert Box Settings

I suggest going through each option carefully for each alert type. It’s easy to spend hours fine-tuning the perfect look and feel for your alert box in XSplit Broadcaster, but it’s worth the effort if you build something engaging for your audience.

Remember to periodically test your changes in Broadcaster before you stream live.

Can you change the font of the Alerts Box?

Absolutely. Click the “Font Settings” tool when editing an alert type and use the drop-down window to choose a font. Streamlabs Alerts uses Google Fonts, so you have access to a long list of styles.

You can change the font on each individual alert as well as any Alert Variations you set up for your live stream.

What are “Alert Variations” for?

Alert Variations let you change what is seen and heard from the widget based on specific criteria. For example, you can set a picture and a sound effect to only show in the Streamlabs overlay if someone donates more than $10.

You can also set variations to happen randomly while changing how often its shown from very frequently to very rarely.

Can you add your own HTML or CSS to the Alert Box?

Yes. Under your settings for each alert type, you’ll see a radio button to “Enable Custom HTML/CSS.” When you enable it, a window will expand allowing you to input custom coding.

Get the Most Out of the Alert Box Overlay

Adding the Streamlabs Alerts Box Widget to XSplit Broadcaster is the easy part. It’s going through your settings to customize it that is time-consuming. Luckily, it’s easy to set up and understand.

In literally minutes, you can have something to show visitors when you get follows, tips, subscribers, and more.

It’s just something extra to add to your stream to engage the audience.

Michael Brockbank
(Visited 4,826 times, 5 visits today)

Michael Brockbank

Michael developed ColoradoPlays to help various charities through his favorite pastime. Since then, the blog and Twitch channels have donated several hundred dollars to Extra Life, Geeks of Grandeur and Operation Supply Drop to name a few.

LIVE NOW! CLICK TO VIEW.
CURRENTLY OFFLINE
%d bloggers like this: