FREE Twitch Chat Overlay Setup Instructions

Here are some setup instructions from one of my previous videos on getting an updated and professional looking Twitch chat widget using Stream Elements by inserting the code directly without having to visit the Stream Elements widget Discord channel

It's completely FREE and customizable, if you dare venture into the realm of HTML and CSS 😊

Please use the files below to create your chat widget. Any code editor will allow you to view and copy the file data into a brand new Stream Elements overlay that you can then use/customize

New Overlay Setup Instructions: My Overlays ➜ New Overlay ➜ Add Widget ➜ Static/Custom ➜ Custom Widget ➜ Settings ➜ Open Editor (Copy & Paste File Contents To Corresponding Tab Here)

#twitch #chat #overlay

[yomarcelojeje]

"some of us". Come on, I suffered from the bottom of my heart to understand what on earth was going on on that vod. Thank you for this one, truly.

[Warhammer_Actual]

For anyone still having trouble following the tutorial. He's deleting ALL the data (text) in each of the fields. Then pasting or just drag the files into the fields and the new code (text) will be imported. When all are finished hit done to save and it works. He just moves fast in the video and you cant tell he's over writing all the text so that is where some confusion occurs. Hope this helps

[AgathaDanglapin]

If you have Mac and you're trying to open the HTML file but can't see anything:
1. Open TextEdit Application
2. Click 'Open...'
3. Select the file (but don't hit open yet).
4. Click 'Show Options' button on the bottom panel of that pop-up.
5. Check 'Ignore rich text commands' box. Keep Plain Text Encoding to 'Automatic'
6. Hit 'Open'

[MikeH]

bro show exactly how u do everyhthing i have no idea how you were copying and pasting things like really

[WarrenPete]

That's pretty fantastic! I didn't even know you could get into the nuts and bolts so much with Stream Elements! Pretty much the only thing that I was stuck on was not realized I could just say "open with notepad" and then copy and paste. Thanks for the detailed walkthrough!

[LittleMsJester]

For anyone still struggling, right click on the file and go to edit in notepad. That’s where you get the html code

[Cazoolo]

Thank you! This tutorial has been amazing! Do you know where in the code I can change the color of the box surrounding the username? I would like to make it purple instead of blue.
Thanks again!
(Edit: I found it! It's in the JS code line 36. I changed the hex Code to the purple i wanted to use)

[grayphobe]

A little confusing for a non coder like me. had to download notepad ++ for my system but after that I managed to figure it out. thanks for this cool text box !

[Marvda]

Thank you, it works. But please make it easier to understand next time, just show everything you doing

[chancedavidanderson]

thank you a ton for sepicting what needs and is needed to be done to have a chat overlay :)

[netanelashlag]

For those who have issues with the editor copy using control/command c then on the editor do control/command a then control/command v that way it goes correctly it worked well for me after I did that goodluck!

[Minatar]

it was a little hard at first but i got it the files are not labeled clearly but if you follow and copy and past all the files onto notepad the copy and past after you delete old stuff from each section you should be fine just match what the scran says on each section when looking at the file

[Ayeorlando]

Hey good video. I got it to work. Question, how do you change the color of the text bubble? Mine are showing an orange color. I'd rather it show blue, like the test message. Also how do you change the color of the camera icon next to the username? Hopefully I'm not asking too much lol

[yoroshie]

Thank you! I learn something and added new on my stream

[LoganFritts]

It's not working for me. I'm copying and pasting everything right but every time I press done, it just shows as if I didn't do anything.

[sparrowbeeyoutube]

This is amazing - thank you for this additional breakdown of the steps, I was super confused before but now I mostly have it figured out. One issue I'm running into tho is that when I test in the Streamelements, everything looks fine but when I actually test it with in Twitch chat, it doubles up the username and has it floating in white under the regular username in the colored area. Very odd. Any idea why this might be happening?

[rowellamalipot]

i still cant huhu what did u copy and paste cannot figure it out

[crowlad]

Hey boss I just finished the tutorial easy and simple enough to follow thanks a lot man

[AlexR..]

yeah, i tried to do this and it refuses to work for me. files wont open so i can copy and paste no matter what i do. wanted something different but this aint gonna work for me

[IBeSimmerz]

Great Video! Thanks For The Assist Video