Lightstream Studio on Mixer
PART 2: ALERTS AND NOTIFICATIONS
This is Part 2 in a series of tutorials covering the basics of setting up and streaming using Lightstream. If you’re new to this series, we recommend going back and reading through our previous guides in this series.
PART 1
Welcome to Part 2 of our Lightstream Studio on Mixer tutorial series. This time we’re going to be taking a look at how to integrate some 3rd Party Alerts into our broadcasts so we can give our loyal viewers some recognition when they follow, host or donate to us on stream!
At this point, we’ve looked at how to get our Mixer streams running through Lightstream, we’ve added our Starting Soon and our Main Gameplay scenes and looked at how we can start adding elements to our Lightstream scenes.
By now, we can happily start broadcasting our gameplay through Mixer and have a couple of dynamic scenes that we can switch between.
I’ve used the techniques we discussed in the previous tutorial to add in the matching Be Right Back and Stream Ending scenes into our Lightstream Scene Editor, so right now this is how our scenes are looking:
We’ve got our default scene set up to display our Staring Soon image, our Main Gameplay scene pulling in our Xbox game feed and our Be Right Back and Stream Ending scenes set up and ready to go.
Now we want to start adding some interactions to our stream, so we can thank our viewers for Following, Hosting or Donating live on our stream. To do that, we’re going to make use of Lightstream’s 3rd Party Integrations.
Setting Up Our Alerts
We’ll be using Streamlabs Alert Box widget to set up or custom alerts for Lightstream. There are other supported 3rd parties that can be used for alerts, overlays and more, but Streamlabs is one of the most popular and the simplest system for new streamers to get set up using.
The first thing we’re going to need to do is link up our Mixer account with Streamlabs. To do that, we’re going to head over to https://streamlabs.com and hit the “Login” button in the top right corner.
On the Streamlabs login screen, we’re going to want to connect our Mixer account, so click on the Mixer logo in the bottom left under the “OR” heading:
Once you click that option, you’ll be taken to Mixer to authenticate your account. Simply click on the “Approve” option at the bottom of the screen and you’ll be taken back over to Streamlabs.
At this point, we should be taken to the Streamlabs Dashboard page. This is where you can get an overview of all your Mixer activity since adding Streamlabs to your account.
From here, we’re going to want to scroll down in the left hand sidebar until we find the “Alert Box” option under the Widgets heading:
Right now we’re not worried about customizing the Alert Box widget, we’re just going to get the widget showing in our Lightstream scene. We’ll look at customizing the widget in a future tutorial series.
For now, we’re going to scroll down a little until we can see the Widget URL section. This is the link that Streamlabs generates to display your notifications in a Browser Source. This is a specially set up web page that will appear with a transparent background when we add it to our scene in Lightstream.
By default, the URL of your widget will be hidden, this is just for security reasons and not something we need to worry about. For now, all we want to do is copy the Widget URL, so go ahead and click on the “Copy” button to the right of the URL.
Next up, we’re going to head back into Lighstream and get our alerts appearing in our scene.
Adding Streamlabs Alerts to our Lightstream Scene
Back over in Lightstream, we’re going to add our Streamlabs Alert into our Main Gameplay scene that we set up in the previous tutorial.
Just like we did before, we’re going to make sure our Main Gameplay scene is active by clicking on the pencil icon above the scene name in the scene list at the bottom of the screen.
Next, we’re going to add a new layer to our scene by clicking on the green “+” icon in the left sidebar, and this time we’re going to choose “3rd Party Integrations”
In the 3rd Party Integrations list that appears in the left sidebar, we’re going to pick the Streamlabs option.
Lighstream will now add a new Streamlabs Alert layer to our scene and ask us to enter a valid Streamlabs URL.
In the URL box, where it asks us to “Enter a Streamlabs URL…”, we’re going to paste in the URL that we copied from the Streamlabs Alert Box Widget earlier.
A success message should pop up telling us that the Alert Box has been loaded.
We can test that everything’s working correctly by heading back over to Streamlabs and clicking on one of the “Test” buttons below the Widget URL section.
If we switch back over to Lightstream once we’ve clicked on one of the “Test” buttons, we should hear our Alert sound play and see our Alert Animation pop up in the Streamlabs Alert Box Container in our scene.
That’s the basics of adding our Alert Box widget from Streamlabs into our Lightstream scene!
From here, you can start to play around with positioning and resizing your Alert Box in your scene, or start changing some of the default widget options in Streamlabs.
You can add your Alert Box widget to any of your other scenes by simply copying the URL, adding a new Streamlabs 3rd Party Integration to another scene and pasting in the URL in the Alert Box widget.
In Part 3 of our Lightstream Studio on Mixer series, we’ll be looking at how to start customizing your gameplay scene with basic overlay elements like your name and some built-in graphics to make your stream stand out.
If you need any more help setting up your Lightstream integration with Mixer, feel free to join The Real World community on Discord here. We have channels set up for Streamer Support and Lighstream integration.
