configure-twitchalerts-with-obs

How To Set Up TwitchAlerts with OBS

by Streamplay in Guides on November 9, 2018

If you’ve ever wondered how streamers get those fancy Twitch alerts to pop up whenever one of their viewers, donates, follows, or subscribes, then wonder no more!

In this easy-as-pie tutorial, I’ll be showing you how to get those same alerts showing up on your stream using TwitchAlerts, and OBS.

TwitchAlerts isn’t the only way to get your new follower, donator, or subscriber notifications to show up during your stream, but it’s one of the easiest, and most popular methods. But if for whatever reason you don’t want to or can’t use TwitchAlerts I’ll be creating tutorials on how to accomplish the same effect using the other apps like TeeBoard, TNotifier and more.

So stay tuned for those (or just contact me directly and I’ll help you out)

Anyways, let’s begin this guide on how to set up TwitchAlerts with OBS.

I’m going to assume you already have Open Broadcast Software (OBS) installed. If you don’t – grab it here.

 

TwitchAlerts Video Tutorial:

Step 1 Download CLR Browser Source Plugin

There’s a plugin for OBS, called, CLR Browser Source Plugin. We’ll need that…

So head over to this link, and download the appropriate files based on whether you’re using the 32bit, or 64bit version of OBS.

Once you’ve downloaded the plugin, you’ll need to extract the files into the plugins folder found under C:\Program Files\OBS\Plugins for 64bit and for C:\Program Files (x86)\OBS\Plugins for 32bit.

side note: Make sure you’re actually using the version of OBS you think you’re using. In my case, I thought I was using the 64bit version of OBS, so naturally I downloaded and extracted the CLR plugin into the 64bit folders, but for some reason the plugin wasn’t showing up in my OBS sources.

After about an hour of frustration and trying to Google my way out of this problem, I finally figured out that when I first installed OBS, the shortcut it gave me on my desktop was actually for the 32bit version…. so all this time I’d been using the 32bit without even knowing.

To fix this issue, all I had to do was go into the 64bit OBS folder, find the launch icon and replace it with the 32bit shortcut on my desktop. Now it opens up the correct 64 bit version and I can see the CLR Browser Source Plugin just fine. Derp.

So ya, make sure you’ve downloaded and extracted the plugin into the correct plugins folder, and make sure you’re actually using the version of OBS that you think you are :P. You can verify this by looking for the 32bit or 64bit at the top of the OBS window.

And then to make sure you’ve got everything working correctly – open up OBS, and under Sources, right click>Add, and you should see the CLR Browser in that list.

verify-clr-browser

 

Step 2 Connect Your Twitch Account With TwitchAlerts

Alright if this is your first time using TwitchAlerts, you’ll need to connect your Twitch account with their app.

Simply head over to their website here – click the green Launch TwitchAlerts button on the top right, and then click the purple Connect with Twitch button.

connect-twitchalerts-with-twitchlaunch-twitchalerts

Once you’ve connected your account, you’ll be taken to their dashboard. On the left-hand side of that page you’ll see a menu with a bunch of options – click the Alert Box button, under Stream Widgets.

alert-box

Now you’ll find yourself in front of a bunch of settings for your notifications. They’re all pretty self-explanatory so I won’t waste your time going through each individual setting.

In this tutorial we’re going to be using the Follow Alerts – so play around with the settings for a bit until you come up with something you think would look cool on your stream.

If you need a TwitchAlert image, you can head over to our premade Twitch Alert selection here, where you’ll find plenty of options.

Once you’ve figured out how you want your Follow Alert to look, it’s time to test it out!

 

Step 3 Testing TwitchAlerts

In order to test your new TwitchAlert, look for the LAUNCH button near the top of the page in the Alert Box settings.

launch-twitch-alerts

Click it, and you’ll see a new, bright green window open up.

Now to test your Follow Alert, click the Test Follow Alert button found under Alert Previews.

test-follow-alert

You should now see the alert that you created pop up in the green window!

Chances are you didn’t get all the settings down perfect your first try, so play around with the settings until you get your Follow Alert just they way you want it. (make sure to hit Save after you’ve made the changes in order for the tests to show up accurately).

Once you’ve perfected the look of your Follow Alert, we can now set up TwitchAlerts with OBS.

 

Step 4 Adding Your TwitchAlerts To OBS

Begin by opening up OBS, then with a scene already created, right-click under sources > Add > CLR Browser.

verify-clr-browser

If you don’t see the CLR Browser option, make sure you downloaded and extracted the plugin correctly like explained in Step 1. If you did and you’re still running into issues just leave a comment below this guide and I’ll help you out.

When you click the CLR Browser option, a window will pop up.

You’ll see an option to add a URL – so what we wanna do is head back over to your TwitchAlerts Dashboard and copy that URL you see that’s in the Alert Box widget. It’ll be at the top, next to where you hit the LAUNCH button earlier.

copy-twitchalerts-url

Once you’ve copied that URL, paste it in the CLR Browser Configuration window where it says URL, then hit OK.

paste-url-clr-browser-plugin

Now we want to see how the Twitch Alert looks…

Click Preview Stream in OBS and then go back and click that Test Follow Alert button in your TwitchAlerts dashboard. You should see the Follow Alert popup in your OBS preview.

If you wanna move it around or resize it, simply hit the Edit Scene button and click and drag it to your desired spot.

And that’s it! You now know how to set up TwitchAlerts with OBS.

 

Common Questions about setting up TwitchAlerts with OBS

Do I always need to have the green TwitchAlerts window open while streaming in order to receive the notifications?

Nope! It’ll work just fine without that extra window.

Do I need to add a new CLR Browser source in OBS for each type of notification? (new follower, subscriber, donation).

Nope! Once you’ve created that first CLR Browser source, you’ll receive all of your TwitchAlerts notifications through that one. (unless you want them to show up in different areas – see below).

How do I make it so my new follower alerts show up in one area of my stream, and my new donation/subscriber alerts show up in a different area?

Easy! In your Alert Box settings in TwitchAlerts you’ll see checkboxes at the top found under How To for each type of notification.

So what you wanna do is uncheck all of them except for the one you want displayed in a specific area on your stream. This will change the URL below that you paste in your CLR Browser Source plugin.

how-to-make-twitchalerts-show-up-in-different-spots

Copy and paste this new URL in your CLR Browser Configuration and then hit OK.

Now repeat this same process for the other notification(s) you want to show up in your steam. But this time you need to add a new CLR Browser Source for each notification, and paste that unique URL in each one.

Then to move the alerts in separate locations, just hit Edit Scene while selecting the appropriate CLR Browser Source and move them around!

 

That’s Everything

If you have any other questions or problems I didn’t cover in this guide, then please leave a comment below and I’ll help you out.

And if you’re in the market for new Twitch alerts graphics, or any new graphics for your stream, then you can check out our premade alerts here – and other graphics like overlays, panels, offline screens, etc… here!

Streamplay at 4:18 pm

Hope this tutorial helped! Again, if you have any questions just comment below.

Reply
AL at 6:57 pm

Dear Sir,

Great tutorial! can not fault it, The issue I have is ( And I can not seem to find an answer for !) Is when I go to OBS, Right click Sources and then Add, CLR IS IN the list, And it comes up with the ( Please Enter Name ) Window. I press OK and get nothing after that! The CLR Browser Settings Window ( Where you need to put the Twitch Alert Link ) Will not come up! I have tried about 8 tutorials, Uninstalled everything, re-installed everything Made sure I had 64bit Version of OBS, Waited 30 seconds to 2 minutes, And it just will not come up.

If you can advise me on this issue, I would me eternally grateful!

Al

Reply
Streamplay at 4:38 pm

Hey Al, quite the frustrating issue you’ve got there! It’s a little out of my realm of expertise for OBS – Have you asked the OBS support team about it?

Reply
Churchill1997 at 3:32 pm

What you need to do is first move your window to the side of the screen then and the clr browser source, hit OK then it should show up for you to move it to the side

Reply
LadyStyx at 1:08 am

Thanks so much for this detailed tutorial. I seem to be having an issue I can’t find any fix for online. Since you offered so nicely in your article, I was hoping maybe you have an idea:

I’m using OBS MP on MacOS. I’ve installed the browser plugin, set everything up, connected TwitchAlerts etc. Now, if I do a test of any notification, it will work just fine. But if someone actually follows (or anything else) while streaming, nothing happens. I don’t get an error message either, it just won’t do anything. Then again test works both in OBS interface and while streaming live in Twitch.

Since I’m not getting any error or anything I don’t even know where to start debugging. Ever heard of this issue before? Any clue what might cause it? Any idea for a potential fix?

Help greatly appreciated! Thanks so much!

Reply
Streamplay at 4:43 pm

Hey LadyStyx, I wish I could say I’ve run into that issue before. You’d think it’d work if the tests are showing up… Have you tried contacting TwitchAlerts support? I know they have a forum. Sorry I couldn’t be of much help today!

Reply
Necrotoxin at 11:53 am

Hey, I’m having the exact same issue as yours except I’m using OBS Classic on Windows 10. Did you manage to find a solution? I can’t seem to find a fix anywhere.

Reply
Pingback: Cıvata
Stawer19 at 4:24 pm

Hello, thank you for you’re tutorial, but I got a problem. When i put the link it supposed to show a preview but i don’t have anything : http://puu.sh/pLyr4/1b6960dba8.png

And in the preview it don’t show anything : http://puu.sh/pLyIf/2404908e39.jpg

Well i think i said everything, and sorry for my english, I speak french.

Reply
Mitch at 5:18 am

My problem is with actual follows and donations. When I test it in the launch window on Twitch Alerts, it works. Like when I click “Test Follow Alert”. But when someone actually follows me, it does not show up in the launch window, but it does show up on stream. Help?

Reply
chris at 6:08 pm

CLR Browser option, still running into issues …cannot find in OBS sources menu…Downloaded the 32…Can you help?

Reply
Yoan Drumev at 10:40 pm

hi great tutorial am when a download the 64 bitrate that a use and after ttat a look at add and crl browcer is nothing there what have a done wrong plz help

Reply
Chase at 10:32 pm

How do you get alerts to appear in a single line of text instead of a block?

Reply
ricecakes__ at 3:16 pm

So I have the alerts setup and i can see them on strem… BUT i cannot see them whilst playing a game… Do i have to ctr+tab every time i want to see a notification?? bc if so that is EXTREMELY iritating… please respond??

Reply
Daniel at 3:59 pm

Hey, so I am having a bit of trouble with not seeing the CLR Browser when I right click the Sources area. I don’t really know what to do with the files, and this is all really confusing. I have a different style of OBS, it is 18.0.1 and it is 64bit and Windows. I would really appreciate some help with the files…

Reply
beep beep lettuce at 9:34 am

Okay,so,i have a problem,just like everyone else:
I did(n’t finish) step 1 (because of my problem), i installed the browser plug-in, i extracted it to the Plugins folder, and i went to OBS and clicked the little + icon, but the “CLR Browser” option wasn’t there. I opened and closed OBS multiple times,but it still isn’t there. I could use some help,please?

Reply

Share Your Valuable Opinions