Free twitch alerts. Overwatch inspired

Hello! I was a bit obsessed with overwatch lately, so I made a big Overwatch-inspired stream alerts pack, which work perfectly with If you don't know what that is, then I really recommend you to check it out. It's just really great for creating awesomely styled alerts for your streams and all that good stuff.

Anyway, onto the alerts themselves. I shared a little sneak-peek on the twitter a couple of days ago, so you might want to follow, to keep up with the new stuff =)

So, now to the fun stuff. Open up your dashboard and click Alerts one the left panel, then click Create new alert package.

Now name your new package something creative, "Stream alerts" will do.

The next step would be to configure your follow alerts. Also name them something cool, like "Follow alert" (that joke is getting old), and click on the Simple switch, to make it Advanced. You will see the buttons HTML and CSS appear on the top right, leave them for now. There will also be Animation and Display Time fields, set them to "No Animation" and 10 seconds respectively. Click the Save button afterwards.

Now you will need to copy the code from the panel below. Click on the Jade tab and move your mouse over the code itself. The Show Compiled button should appear - click it. Then select all the code by either right clicking and choosing Select All, or just placing your cursor inside the code and using CTRL+A key combination. Then just copy the code with right click - copy, or CTRL+C.


See the Pen Overwatch follow animations by Anton (@orels) on CodePen.

Back in muxy dashboard, select the HTML tab, delete everything in there and paste what you have just copied. Click Save afterwards.

Now you will need to repeat previous steps for SASS tab on this page and CSS tab on muxy. Don't forget to Save afterwards.

If you want to add sounds to your alert - then just navigate to the Media tab and select one of the premade sound effects. If you want to use custom sounds - click on the big black bar to the left and upload your own sound. When you're done, click Save.

You're done with this one! You can now click Open Preview Window button, if you want to see how it all turned out.

Repeat the above process for each type of alert (since they have a bit different look - the code is different).


See the Pen Overwatch donation animations by Anton (@orels) on CodePen.


See the Pen Overwatch sub animations by Anton (@orels) on CodePen.


See the Pen Overwatch host animations by Anton (@orels) on CodePen.

Now. when you've set this all up - it's time to add it to OBS!

Add new Browser Source in OBS.

At the muxy dashboard - copy the alert package URL.

And paste it into the OBS Browser Source URL field. Set the width and height to be 500 by 100 and click OK.

You're done! Place the alert anywhere on your stream and test it by clicking on the little icon near alert at muxy dashboard.

Your alert should appear on your stream in a moment.

Hope you like the style. If you have anything to say - leave it in the comments down below, and tell me what to make next. Also, no credit is required, all the stuff I make is completely free, but if you share a link to this tutorial with your friends or subscribers - it will help me big time!

Anyway, that's all for now, video guide on that is coming soon, until then I wish you good luck!