If you liked this widget, I release more widgets over on Patreon. The $10 tier gives you access to all my widgets along with written and video instructions on how to install them all. www.patreon.com/nuttylmao --- UPDATE: I have completely rewritten the widgets since making this video. You no longer need StreamElements - just make sure to have Streamer.bot running and add a browser source, and you're good to go!
This is super helpful! ONE suggestion… the graphics make it seem like the stream itself is an ad. Could confuse (dumb) subscribers when they see “Ad 1 of 4” in the corner of your stream. Might be less confusing to say “Non-subscriber ad break” or something customizable that make subscribers feel more special.
Hey there! So this is actually possible really easily done once you install the widget. Once you get to the step at 5:20 and have pasted the code from the 'Index' file into the HTML tab all you have to do is modify the text to what you want it to say. Specifically look for the word 'Ad' in the hilariously named div lol, you'll know it when you see it. If you want to modify the text for the mid-roll warning to be the same just modify the text that says "Ads starting in..." in the div named "midRollContainer". Nutty made the widget responsive so everything should adjust size accordingly. Just make sure to click "Save" in the top-right of the StreamElements page in order to see the changes you made. Hope this works out for you!
This is awesome! I think a great addition to this would also be a countdown whether it be 1 minute or 5 minutes (or let us choose) of when ads are going to start too so people on stream can know when it's coming! Great video!
So I uh, showed this to my buddy at streamelements, hopefully he sees it haha Edit: he saw it and approved the widget for sharing and responded to the email XD we did it bois
I think this is brilliant, so I don't want anyone to think otherwise when I say this lol. So on the flip side, say you as the streamer sees the timer and you decide to just sit there for 3 minutes or however long the ad-break is. The paid subs paid to remove those breaks and it's just replacing one break with another break essentially. I love the widget though, it's such a good idea, I just try to look at both sides of stuff haha. At the end of the day, this is Twitch's idiot money-grab tactics, so huge kudos for making this. Also can't count how many times I laughed at this video. That "goes to a good cause" hahahahhaha.
I hear you on this. I think it is a good thing to call out. For me what I started doing is a 90 second sketch, so I challenge myself to draw a picture in 90 seconds using a web based drawing canvas during the ad break so that way the subs see something and we aren't completely stopping the show. Not to say this is a perfect solution but maybe the solution here is to find a short activity you can do to reward your subscribers?
I've been concerned about Ads after I started streaming, especially because I don't really care about the ad revenue, I just want peeps to come chat with me and hangout. This widget is very helpful especially since I can actually see it on my SLOBS when ads are running, and it works better than the timer Twitch has for you. Thank you so much, this widget is clean!
I think we need to acknowledge the "hugeTittiesContainer" in the codes, which is as surprising (well, not THAT much to be fair) that it is funny 👌 Thanks for the hard work Nutty!
This worked wonderfully for me for a while but then suddenly the widget stopped working. It shows the countdown timer to let me know when an ad is starting but then does not follow through with the yellow bar and the top left says "1 of NaN·NaN:NaN". I'm not sure where it is messing up since I had not changed anything in any of my settings.
I personally prefer the mid-roll ads. Cause nothing sucks more when you want to check out a new stream but have to sit through ads first. Super appreciate this widget though! I try to make sure my viewers know when an ad is upcoming becuase i don't want people to be 'punished' for not being subbed. I really just want to have fun
Not only you are an amazing person! You intelligent and think outside the box! Thanks for sharing this legend! BY THE all the Notifications alert are active (the only channel I have this enable for) amazing stuff!🎉❤
This widget is AMAZING!!!🤩 Such a HUGE help, Nutty! Been strugglin with Ads for a long time now😅 Lol Thank you for all your hard work! I will for sure be using this on my streams from now on!🥰
Update: I just wanted to let you know I deleted my old comment because the streamer bot is now working after their new update dropped. So the widget is now working for me and I really love it keep up the good work I appreciate you doing all the hard work to make cool stuff. I also enjoy watching your live stream when you're doing this stuff life like making widget, overlays, alerts and so much more and I also recommend y'all to go watch him live.
Looks and works great.. i bypassed the stream elements part and just put it as a local browser source... i felt it was better since kinda the point of using something like streamer bot is to not use another bot or platform.
Unfortunately, that's a waste. The pre-roll disable...ation? Only caps at 30 minutes, so you're still getting pre-rolls for the last 30 minutes of that hour and running ads twice as long as you need to for it to have the same effect.
@@RinzyOtt Is this still true? How many minutes of ads do you run and how often? it seemed that 3 minutes of ads in an hour (however you space out the 3 mins) is the only way to disable pre-rolls. Let me know! thanks :)
I avoid all of this by manually playing all of my ads in between games. My viewers never have to miss gameplay - but they might miss conversation from time to time. I'm surprised so many people either keep prerolls on or schedule ads. Manual is the way to go.
Just started following and you are a golden idol my friend. I'm hoping to implement this soon and now I need to look into streamerbot. The bot I've been using is Mix it up, so not sure how different they are from one another but I will learn. Thanks.
Just a FYI: Seems the written instructions on Kofi have style.css → CSS style.css → JS Assuming the second listing JS was Script.js instead. If not, my bad lol Thanks for all the hard work on stuff like this!
Thanks for the video and the widget! FYI for anyone new, the video is a little old, you don't need to download any zip files anymore, everything is already in the overlay when you import it. Also.. at least for me I don't know why it never connects, it's always "connecting" and the test buttons don't work 95% of the time. Idk what I'm doing wrong so.. I'll put a pin on it for something to add later to my stream. EDIT: Fixed it! The port 8080 was already in use, so I changed it to 8000
Great job! The only changes I noticed were not seeing the CONNECTED... message (since I already had SB open and connected) and I had to rename the overlay after creating it.
what did u rename it to? cuz it wont work for me. i got the same issue u did where it never showed the "connected" box and keeps showing the "connecting" box
You are the best Nutty, always making cool stuff for making the life of streamers a little better, greetings from Argentina bro, i really admire your work!
this is one of the coolest widgets you've ever done but could you maybe make some more preset positions for the timer? I wanna put it in the top-middle part of the screen
Yes. You can skip SE altogether by simply dragging the html file into OBS. It will be a bit harder to customize it but if you are okay with the default look, go for it.
Very cool! 😎 I'm definitely going to apply this. *Random question about a potential plug-in. Is there any sort of detextor that can monitor, say a specific color pixel at a specific choosing that can act as a prompt for source or scene trigger? I've been looking for something like this to create a dynamic overlay to game content. I came across Pixel Match Switcher, but that seems to have issues, doesn't get updates, and may not fulfill the same mechanics. Anyway, love the content! 👌
For some reason after following your instructions I can get the test & mid roll tests to work, but it doesn't work live. I even turned off Hardware Acceleration in OBS Advanced settings and restarted OBS. Been affiliated for 5+years, so it's not that reason, lol. Streamer bot is working well and the widget is fully connected too. I have it as a browser source like shown too, even refreshed the cache of the browser source too, still no go. Is it working on OBS version 27.2.4?(Which is what I'm using) Just hoping it's an OBS version thing though. I've seen it work on your live streams as well as others, which looks amazing, btw, great work Nutty.
Hey, is anyone else getting an issue where the ad widget itself shows up but the sound effects don't play? They play when tested in streamerbot but not when I test the ads.
@@nuttylmao Ah ok, that answers the only question I had. Will test it tonight, thanks for this widget dude, it should be an immense help. I hate running ads but not having any idea when they were running doesn't help
This might be a stupid question, but is there any way to hook up SAMMI's streamer bot-like connections to this widget? Wasn't sure if it would work with its webhooks too.
omg...I do tarot readings, and this is a huge thing for me! I hate it when a viewer is getting a reading, only to be interrupted by ads =( Thank you so much for this!
I am expecting an elgato streamdeck plugin to know when ads are gonna play and be able to skip ads if you are in game and be able to play them later when you ended the game. I play br games so it fits my content.
Thank You for this tool! Note: to get it working I had to go to OBS Setting, Advanced and under Sources turn off "Enable Browser Source hardware Acceleration".
If you liked this widget, I release more widgets over on Patreon. The $10 tier gives you access to all my widgets along with written and video instructions on how to install them all.
www.patreon.com/nuttylmao
---
UPDATE: I have completely rewritten the widgets since making this video. You no longer need StreamElements - just make sure to have Streamer.bot running and add a browser source, and you're good to go!
Comment was 2 weeks before the video
Widget look at that
@@sxi_ Yes.
Twitch also now allows a 3 minute block of ads every hour to disable pre rolls too!
With the new update, how can I test the ad widget?
In the editor -> HTML tab you can change line 17 and/or 24
CSS tab -> Line 49 to change the color of the ad square
This is great to keep consistency with one's brand. Thank you!
Can i ask a more technical question? What if i want to change the coordinates of the Ad box?
thanks for that, now it all matches my stream ❤
This is super helpful! ONE suggestion… the graphics make it seem like the stream itself is an ad. Could confuse (dumb) subscribers when they see “Ad 1 of 4” in the corner of your stream. Might be less confusing to say “Non-subscriber ad break” or something customizable that make subscribers feel more special.
Hey there! So this is actually possible really easily done once you install the widget. Once you get to the step at 5:20 and have pasted the code from the 'Index' file into the HTML tab all you have to do is modify the text to what you want it to say. Specifically look for the word 'Ad' in the hilariously named div lol, you'll know it when you see it. If you want to modify the text for the mid-roll warning to be the same just modify the text that says "Ads starting in..." in the div named "midRollContainer". Nutty made the widget responsive so everything should adjust size accordingly. Just make sure to click "Save" in the top-right of the StreamElements page in order to see the changes you made. Hope this works out for you!
This is awesome! I think a great addition to this would also be a countdown whether it be 1 minute or 5 minutes (or let us choose) of when ads are going to start too so people on stream can know when it's coming! Great video!
It's only possible to do 5 seconds since Twitch only notifies me through the API 5 seconds before every ad. There's no way for me to change that.
as a streamer: thankyou. this widget has been shared to my discord of other streamers. htis is such a small and appreciated thing. thanks man!
So I uh, showed this to my buddy at streamelements, hopefully he sees it haha
Edit: he saw it and approved the widget for sharing and responded to the email XD we did it bois
Ayo, it actually might have worked!
Yay and thank you for doing this TwoFace!
It auto added the widget in StreamElements for me!!!!!!
@@jevvvNZ YAY! Glad I could help in some way!
It did work! Just clicking loaded it right into my overlays - great job! :)
did they removed it? cant find it :/
Thank you Nutty! your vids have helped a ton, keep up the great work!
Brother this is actually awesome! added to my stream today going to tell all my Aussie mates that stream to do it.
I think this is brilliant, so I don't want anyone to think otherwise when I say this lol. So on the flip side, say you as the streamer sees the timer and you decide to just sit there for 3 minutes or however long the ad-break is. The paid subs paid to remove those breaks and it's just replacing one break with another break essentially. I love the widget though, it's such a good idea, I just try to look at both sides of stuff haha. At the end of the day, this is Twitch's idiot money-grab tactics, so huge kudos for making this. Also can't count how many times I laughed at this video. That "goes to a good cause" hahahahhaha.
I hear you on this. I think it is a good thing to call out. For me what I started doing is a 90 second sketch, so I challenge myself to draw a picture in 90 seconds using a web based drawing canvas during the ad break so that way the subs see something and we aren't completely stopping the show. Not to say this is a perfect solution but maybe the solution here is to find a short activity you can do to reward your subscribers?
dude this is amazing, congrats for the works !
“ I’m also just tryna get hella views on this video “ 😂😂😂 . I love the honesty ! Best believe I’m sharing this to every streamer friend 🔥🔥🔥😂
I've been concerned about Ads after I started streaming, especially because I don't really care about the ad revenue, I just want peeps to come chat with me and hangout. This widget is very helpful especially since I can actually see it on my SLOBS when ads are running, and it works better than the timer Twitch has for you. Thank you so much, this widget is clean!
I think we need to acknowledge the "hugeTittiesContainer" in the codes, which is as surprising (well, not THAT much to be fair) that it is funny 👌 Thanks for the hard work Nutty!
This worked wonderfully for me for a while but then suddenly the widget stopped working. It shows the countdown timer to let me know when an ad is starting but then does not follow through with the yellow bar and the top left says "1 of NaN·NaN:NaN". I'm not sure where it is messing up since I had not changed anything in any of my settings.
I have the same problem, I can't see the number of seconds left. Were you able to solve it?
Same problem. With test button it works, but I guess that data mocked - so doesn't work for now :(
I was able to fix it. If you go to the discord, someone has instructions for adjusting the code to fix this.
@@nekobeko Where in discord did you see this? Having the same issue T-T
I stopped using it months ago, I need to check the discord 🤣🤣
I personally prefer the mid-roll ads. Cause nothing sucks more when you want to check out a new stream but have to sit through ads first. Super appreciate this widget though! I try to make sure my viewers know when an ad is upcoming becuase i don't want people to be 'punished' for not being subbed. I really just want to have fun
This is incredible!!! I will definitely be getting the rest over on Patreon. Thank you so much, set up was a breeze! Can't wait to try it out!
Great widget, just setup it up. Also joined the patreon. Worth supporting this content!
I appreciate how minimal the timers for ads are on this widget!
Adding this as soon as I am done eating... I was looking for something like this last week.
Thank you man for this widget! It means a lot for streamers on Twitch who just really wish to connect to people online.
Not only you are an amazing person! You intelligent and think outside the box! Thanks for sharing this legend! BY THE all the Notifications alert are active (the only channel I have this enable for) amazing stuff!🎉❤
This is amazing, man! Thank you for what you do for the streaming community!
This is the best widget ever. Thank you sir!
Dude thank you for this !! cant wait to try it out !
0:57 the delivery on this line is perfect LOL
I love it, congrats on your work!
Already share with everybody 🥰🥰
This widget is AMAZING!!!🤩 Such a HUGE help, Nutty! Been strugglin with Ads for a long time now😅 Lol Thank you for all your hard work! I will for sure be using this on my streams from now on!🥰
Thanks for the quality content and widgets as always! I'll definitely have it set up for my stream tomorrow!
Update: I just wanted to let you know I deleted my old comment because the streamer bot is now working after their new update dropped. So the widget is now working for me and I really love it keep up the good work I appreciate you doing all the hard work to make cool stuff. I also enjoy watching your live stream when you're doing this stuff life like making widget, overlays, alerts and so much more and I also recommend y'all to go watch him live.
Looks and works great.. i bypassed the stream elements part and just put it as a local browser source... i felt it was better since kinda the point of using something like streamer bot is to not use another bot or platform.
Dude, you are seriously the best ever. Thank you so much
I love when people explain things step by step.
absolutely brilliant. changes the way I handle ad breaks.
Thanks for this. It's such a simple thing but adds some nice depth to the stream.
Thank you so much for offering this one for free. It's so useful and I appreciate it so much.
Wow what a coincidence. I was looking for an ad timer overlay and nutty came to the rescue! Pog
Awesome stuff man! Love it.
omg nutty is too funny, thanks for the widget i've been looking for something like this for ages
I dig the phub aesthetic of it as well! I might add the drum fill sound effect when it runs an ad for all the subs who don’t see them 😂
I actually asked my community and they want 3 minutes of ads at a time every hour. This widget is awesome!
Unfortunately, that's a waste. The pre-roll disable...ation? Only caps at 30 minutes, so you're still getting pre-rolls for the last 30 minutes of that hour and running ads twice as long as you need to for it to have the same effect.
@@RinzyOtt Is this still true? How many minutes of ads do you run and how often? it seemed that 3 minutes of ads in an hour (however you space out the 3 mins) is the only way to disable pre-rolls. Let me know! thanks :)
I avoid all of this by manually playing all of my ads in between games. My viewers never have to miss gameplay - but they might miss conversation from time to time. I'm surprised so many people either keep prerolls on or schedule ads. Manual is the way to go.
This will also work for manual ads.
@@nuttylmao This is AWESOME news!
TYSM for this Nutty!!
thank you so much for bringing us this widget, it is really useful
Hey Nutty, Thanks for the widget, it looks awesoma nd cant wait to see it in my next stream.
I can't wait to use this, thank you!
This was super helpful! Thanks for making this 😍
“ all this does go to a good cause … ME “ 😂😂😂😂 I love it 😂😂😂😂🔥
Just started following and you are a golden idol my friend. I'm hoping to implement this soon and now I need to look into streamerbot. The bot I've been using is Mix it up, so not sure how different they are from one another but I will learn. Thanks.
I think they seen it.... it installed almost automatically for me!! Good job man!!
Just a FYI: Seems the written instructions on Kofi have style.css → CSS style.css → JS Assuming the second listing JS was Script.js instead. If not, my bad lol
Thanks for all the hard work on stuff like this!
Yep, I will fix that.
@@nuttylmao Lol Just wanted to catch it before ya had a flood of people confused poking you. Thanks again for everything
Thanks for the video and the widget! FYI for anyone new, the video is a little old, you don't need to download any zip files anymore, everything is already in the overlay when you import it. Also.. at least for me I don't know why it never connects, it's always "connecting" and the test buttons don't work 95% of the time. Idk what I'm doing wrong so.. I'll put a pin on it for something to add later to my stream.
EDIT: Fixed it! The port 8080 was already in use, so I changed it to 8000
just installed it! thanks Nutty!
NUTTY! Thank you for this. This is amazing!!!
Great job! The only changes I noticed were not seeing the CONNECTED... message (since I already had SB open and connected) and I had to rename the overlay after creating it.
what did u rename it to? cuz it wont work for me. i got the same issue u did where it never showed the "connected" box and keeps showing the "connecting" box
@@machochaos I just named it the same as Nutty did. I didn’t see Connecting or Connected.
Works like a champ you're the Nut Nutty!! Thanks!
You always have such simple instructions. Thanks.
You are the best Nutty, always making cool stuff for making the life of streamers a little better, greetings from Argentina bro, i really admire your work!
That prediction is dope keep up the great work bud going to that patreon now
Awesomw widget nutty!! thanks for makin the stream world better! ❤
Widget added, cant wait to give it a try!
this is one of the coolest widgets you've ever done but could you maybe make some more preset positions for the timer? I wanna put it in the top-middle part of the screen
Hey Nutty! Great stuff btw! Also, does it work just using the HTML as a Browser Source?
Yes. You can skip SE altogether by simply dragging the html file into OBS.
It will be a bit harder to customize it but if you are okay with the default look, go for it.
Thank you so much for making such a useful tool I can't wait to use it
Omg dude you are the man! Doing this as soon as I get home from work! I'll drop you 10 bucks and a free trial link to my OF 😘
Thanks Nutty, amazing as always ❤
This is awesome! Thank you nutty!
thanks Nutty for this Ads overlay
Nutty you're an absolute genius thank you for everything you do
Nutty your page is so helpful for an aspiring streamer like me, thank you!
Sheesh.... Nutty! That`s widget is awesome! Unbelievable!
Very cool! 😎
I'm definitely going to apply this.
*Random question about a potential plug-in.
Is there any sort of detextor that can monitor, say a specific color pixel at a specific choosing that can act as a prompt for source or scene trigger?
I've been looking for something like this to create a dynamic overlay to game content.
I came across Pixel Match Switcher, but that seems to have issues, doesn't get updates, and may not fulfill the same mechanics.
Anyway, love the content!
👌
I would prefer if it was all inside streamer bot, without streamelements... However, thank you for offering this for free, super kind from you!
Same. or even within OBS and streamerbot. I hate having ANOTHER thing to manage.
This is awesome, I know we didn't nave to pay, and it wasn't much but I did pay for this! Was worth it!
Streamers should be watching this versus the superbowl. Thanks @Nutty
This is awesome! Thank you!
yo everytime I watch ur vids you make me laugh I love it "it goes to a good cause ME" lol
Awesome widget, as per usual!
Is it possible to replace streamer bot with aitum?
Or Touch Portal...
Thanks for the helpful vids
For some reason after following your instructions I can get the test & mid roll tests to work, but it doesn't work live.
I even turned off Hardware Acceleration in OBS Advanced settings and restarted OBS. Been affiliated for 5+years, so it's not that reason, lol.
Streamer bot is working well and the widget is fully connected too.
I have it as a browser source like shown too, even refreshed the cache of the browser source too, still no go.
Is it working on OBS version 27.2.4?(Which is what I'm using) Just hoping it's an OBS version thing though.
I've seen it work on your live streams as well as others, which looks amazing, btw, great work Nutty.
Great Video and Widget!!!! Is it possible to use it like a "Countdown" also?
I love ur honesty the views
thank you nutty you rule 💜
This is huge, will be fore sure integrating it into my stream
This was working great.. until it wasn't. Do we have to update? Thanks for all your work. Appreciate it.
I can't love this widget enough
nutty out here showing twitch how to handle viewer UX for ads
Hey, is anyone else getting an issue where the ad widget itself shows up but the sound effects don't play? They play when tested in streamerbot but not when I test the ads.
It will play when the real ad starts, but not from the test button. I will fix this when I get back from vacation.
@@nuttylmao Ah ok, that answers the only question I had. Will test it tonight, thanks for this widget dude, it should be an immense help. I hate running ads but not having any idea when they were running doesn't help
Well, I'm adding that widget for sure. Thank you
You earned my subscription, excellent job! Once I'm affiliate, I'll start using this! Thank you 😊
Thank you my dear friend :)
This might be a stupid question, but is there any way to hook up SAMMI's streamer bot-like connections to this widget? Wasn't sure if it would work with its webhooks too.
omg...I do tarot readings, and this is a huge thing for me! I hate it when a viewer is getting a reading, only to be interrupted by ads =( Thank you so much for this!
Is there a way to do this with SAMMI instead of streamer bot?
great one Nutty but i got one problem it's not connecting to SB not sure what's wrong
I am expecting an elgato streamdeck plugin to know when ads are gonna play and be able to skip ads if you are in game and be able to play them later when you ended the game. I play br games so it fits my content.
Do you know one with a plugin like that?
@@taronix no, I didn't find one which does that yet
I love your content. I just wish you were able to help us Mac OBS users out with some of your cool stuff.
the best there was, the best there is , the best there ever will be
Thanks!!!Nutty❤❤❤❤
This is one of my fav widgets
Thank You for this tool! Note: to get it working I had to go to OBS Setting, Advanced and under Sources turn off "Enable Browser Source hardware Acceleration".