Hey everyone, I’m going to show you how to set up free custom designed alerts for
Muxy.io . Let’s get right into it.
Alright, so with the recent release of our Overwatch themed overlay - I wanted to make
a custom alert design that fits the overall theme.
Of course this can work with other stream designs as well, so feel free to use as needed.
Also, towards the end of this video I’ll talk about customize the look of the alert
a bit.
This tutorial will cover the setup for Muxy.io - but I’ll also be linking another video
in the description that will work for TwitchAlerts.
So, to start - you can head over to the Nerd or Die store, and you’ll find the the files
needed for this notification setup.
This will be a pay what you want item, so please feel free to set your price to $0.
Once you checkout, you’ll be presented with download links, and you’ll also be Emailed
these links as well.
The most important file here is the Custom Alerts file.
Once you’ve downloaded it, you can double click it to open it up in your default web
browser, or simply just drag it into your browser to open as well.
This file is a basic HTML page that contains the code needed to set up your alerts.
You will not need to know anything about HTML or CSS to set up these alerts, you’ll just
need to be able to copy and paste.
On the downloaded page you’ll see a couple of things, written instructions on how to
set up these alerts, HTML code on the left, CSS code on the right, and some helpful links.
Let’s go ahead and walk through the instructions.
-------- Before we get started, you’ll want to make
sure to install the Big Noodle font, the link will be in the description of this video - as
well as in the download links form checking out.
Let’s login to your Muxy account and head to the Alert packages area.
Let’s create a new alert package and then rename it to something like “Custom Alerts”.
We’ll see all the different types of alerts that we can set up here.
In this example, let’s start with the follow alert - but every alert type will be set up
in the same way.
Click the “Simple” switch button to change it to “Advanced”.
Now, under the general tab, set your display time to at least 8 seconds.
Let’s go back over to the webpage that we downloaded and opened, and under the HTML
section click “Copy follower HTML”.
If for some reason the copy button doesn’t work, you can always right click inside the
box, hit select all, and then copy the code this way.
Back inside of Muxy, change to the HTML tab, select everything inside the HTML area and
delete it, now just paste in the HTML code that you just copied.
Next, we need to set up the CSS - I want to mention that you’ll copy and paste the same
CSS for each alert, but the HTML will be different.
Let’s go over to the download page and click the “Copy CSS” button.
In Muxy, change to the CSS tab and remove all the current CSS and paste in what we just
copied.
We’re pretty much done at this point, but let’s head over to the media tab - you can
remove this default image if you’d like, but you’ll also be able to enable a sound
for your alert here, as well as adjust the volume.
Simply click the audio box and upload any sound you’d like to use.
Now, just hit “Save Changes” and use the “Open Preview Window” to verify that everything
is working properly.
If the alert looks good, then simply repeat the previous steps for the other types of
alerts you’d like to add.
Let’s say you don’t want to use the host alert, you’ll want to make sure to select
that alert and hit “Delete Alert”.
Remember, when repeating the process for any alerts you’d like to add in, makesure to
select the proper HTML for each one.
Let’s talk about how you can customize these files just a bit.
If you look at the top of the CSS you’ll see selectors for line, name, and tagline.
Line makes up the background color that appears.
Name will be the person’s name, and tagline will be the text below it.
So, if we’d like to change the background of the alert to a different color, we can
do so by entering in a new RGBA color, meaning red, green, blue, alpha.
Let’s drop the alpha, or opacity, down from 80% to 20% by change the .8 to .2 - you can
change the other colors at the top as well, simply by putting in a new color hex code.
I included a color picker on this page, to help you determine what colors you’d like
to use.
I’ll change the name color to red, as an example.
Once you have the colors you like, you can recopy the CSS and paste it into my alert
just like before.
It’s extremely important to note, that you change your CSS colors here, you cannot use
the copy button.
You must right click inside the box, hit select all, and copy from here.
If you need to go back to the default colors, simply refresh the page.
Finally, we need to actually add our alerts inside inside of OBS Studio.
Let’s copy the URL towards the top of the page, and go into OBS Studio and add in a
new browser source.
Paste in the URL we just copied, and set the width and height to 1920 x 1080.
Now, back in Muxy we can use the test features to make sure that everything is working properly.
I’ll set up a few more alerts, while we wrap up this video just to show you how quickly
it can be done.
That pretty much wraps up what you’ll need to know about setting up these custom alerts.
I designed them to very noticeable, so you might want to consider only using them for
events that you consider special - whether it’s getting a new follower, or a subscriber
- all streams are different.
If you have any questions at all, please leave them in the comments below.
If you liked this video, please give it a like, and if you really liked the content,
make sure to subscribe and share.
Thanks for watching.