In case any of you had issues creating the chat widget please check out my new video where I walk through the instructions and create it from scratch :) ruclips.net/video/98-bafp0HIc/видео.html
it took me a while to figure out, that i have to open the files with a texteditor and copy it out of the texteditor. thank you for these infos. such an upgrade
How are we as coders supposed to know which CSS classes / etc. to use when customizing CSS in building our own widget design? I don't see any documentation about which css classes the chatbox actually uses...
I was able to adjust some of the CSS/HTML to my liking and I think it looks GREAT! I appreciate the files so much, as they helped make my stream look just a *little* more special! 💖
hey i watched both videos and did everything like you said copied all links imported added all this and my chat is like cut off from the chat box and it wont work there's no tutorials on this and it looks like no one else has this problem but me i was wondering if theres a tip for this i like this chat alot and i just want it to work im losing my sanity
I currently use this and I love it! I recently started multistreaming on TikTok and Twitch, do you know of anyway that I can add a combined chat to the overlay versus only the twitch chat?
I can't seem to be able to get the css to edit the width of the chat bubble border. Is it possible underneath all the other code? I tried setting it just after border radius in .container-message section
This worked great. Just to break it a further, once you download file and open editor in side Stream elements just drag the files to the right sliders and drop them in. Easy Peasy!
Hiya! I'm trying to adjust the distance between one message and the next, it seems to be at about 60px right now but the fiddling with the CSS doesn't seem to yield what I'm after. Got any idea how to adjust this?
Thanks for these files :) it works flawlessly and is just what i looking for. I just have one question: Is it possible to hide messages/delete after some time? If so, how. I looked up t he code, but it seems like i cant trigger it
You should be able to delete messages via OBS or Streamlabs as the widget is integrated with those platforms. I believe the chat widget would remove the deleted messages
@@OVERKLOC first of all thanks a lot for your reply ! sorry, i just described my problem wrong. I meant, that the messages dissapear after a time. Lets say someone writes something and it dissapears after 2 mins. So that the screen isnt bloated all the time
hey man appreciate the different look for the chatbox. got 1 question tho. changed everything over and it looks great however my commands arent working such as !socials and things like that.. i know this vid is a year old but just wondering
Hi! The only time I've had issues with chat commands are due to my chatbot (cloudbot from Streamlabs in my case) being inactive. Sometimes it will switch off so I have to log into my Streamlabs account and turn on the bot Hope that helps!
@OVERKLOC well I checked it showed it was active cuz it still worked on my twitch chat but I'll disconnect and reconnect it again and see if that works
I got it to work! Thank you very much! One question: how to get the chat direction to appear in the reverse. I.e., from top-down (new chat appear as the top of the column) instead of the standard "new chat text starts at the bottom"?
Sure thing! You should be able to modify the username and username2 code sections in the CSS adjusting the top attribute. Right now its set to -30 but if you set it to -25 or -20 it gets closer to the message. Be sure to update the top attribute for both username and username 2. Otherwise there is a misalignment. I think there may be some code clean up required. I'll likely rewrite the widget at some point to provide more customization and make the code more readable but since this was my first crack at widgets and it was a modification of someone else's I didn't dive too deep into it
Also when performing this change you'll want to adjust the bottom margin for each user message in the CSS to avoid large gaps when there is more than one: #log>div { position: relative; padding-top: 22px; margin-bottom: 40px; }
Hi. The overlay works good, thanks a lot! I want to change the font to Space Mono, and trying to change it inside streamlabs overalays, but cant find it inside the code.. Any tips?
Maybe im the crazy one but I thought the before was much better than the after. The before one with a simple faded backround is pretty much what im looking for.
Thanks! You might be able to apply a margin and set it to a value of "right" - not sure if it will give you the exact look you're going for but should be a start
Please refer to my pinned comment that will direct you to another video that goes into detail on setting up a new chat overlay in StreamElements. When I created this video my widget was submitted for review but StreamElements never got back to me and as far as I know the only way to browse community widgets is via their Discord which is kinda gross so just creating your own custom widget and then copy/pasting the code files into it is easier IMO
@UncsIsBetter I thought i had this issue, unsure if yours may be the same, it is just my messages that aren't showing however, when i stream, everyone else's messages show fine
Hello I am trying to do this and when I follow your steps in your description it does not work on my end do you have any idea what I need to do? it just shows up blank in SE, and when i go to do a test message nothing happens. Let me know if I have to explain this better but this is the best that I can describe so far. I hope you are having a great day!
Sometimes you need to play with the sizing of the OBS browser source height and width and match that to the stream elements widget height and width. If you can try adding the original widget and get it working then apply the changes as per the video description that's probably the best bet for getting it to work as expected
Does OBS allow you to test a chat message? I know Streamlabs OBS does, that's what I use. If you can type a test message when not live you should be able to see it.
Hi, I believe I've now enabled sharing of overlays on my account, please try again streamelements.com/dashboard/overlays/share/6209764d6193b1aad5025ce6
I have also submitted the overlay to Stream Elements. If it is approved it will be available via their Discord widget-share channel Will provide an update when they get back to me 🙂
@@Pyrouku noted... Looks like the instructions I found online via Reddit aren't correct... Once the overlay is approved I'll get a new share link that will work... Appreciate your patients... Will message and change video description as soon as I get the correct link
The HTML, CSS, JavaScript, etc. are all inputs you can provide in the settings of a custom stream elements overlay. There are instructions in the video description that outline the steps for getting to the necessary point to input the downloadable document content Hope this helps
Yeah, sorry about that. I sent a request Sunday to have the widget added publicly to Stream Elements and another one this morning so fingers crossed it goes through sooner rather than later
Instead of waiting to get a widget/overlay share link from Stream Elements I've zipped the necessary overlay files (HTML, CSS, JS, etc.) into a package you can download from the video description to create your own instance of the overlay. Instructions on using the files are in the description as well, happy streaming!
I loved it, I'm using it and highly recommend it!! I've only encountered 2 issues happening with me: 1- Messages from one of my mods are not showing up in the chat (xGrazi is the user). 2- A follower with the username 'eco_da_muda_desaplaudida' has her name repeated under the name in the chat bubble. Can you help me with this issues??!! Thank you!!
In case any of you had issues creating the chat widget please check out my new video where I walk through the instructions and create it from scratch :)
ruclips.net/video/98-bafp0HIc/видео.html
it took me a while to figure out, that i have to open the files with a texteditor and copy it out of the texteditor. thank you for these infos. such an upgrade
I couldn't find a link to the stream overlay I only see the google drive and i can't do anything with it
how do I add the overlay into my account mentioned at 0:12?
no shot did I find a 1 min video with exactly what I needed. can't wait to get home and try this out.
I was not able to set this there are missing steps to set everything on the coding
Please take a look at my new video where I walk through the instructions: ruclips.net/video/98-bafp0HIc/видео.html
How are we as coders supposed to know which CSS classes / etc. to use when customizing CSS in building our own widget design? I don't see any documentation about which css classes the chatbox actually uses...
I was able to adjust some of the CSS/HTML to my liking and I think it looks GREAT! I appreciate the files so much, as they helped make my stream look just a *little* more special! 💖
I don't see the "overlay link" in the description of this video? just the files you hosted on google drive
the only thing i dont like is that after some time lets say 20 seconds, the message does not disappear, how can i fix that?
If you have figured that out, I would love to know.
how am i able to limit the character length to 50 before making a new line and make the txt vanish after a few seconds?
thx for this video! how do you change the background color of the username?
im sorry i might be stupid but i didnt understand ANYYY of this
Please take a look at my new video where I walk through the instructions: ruclips.net/video/98-bafp0HIc/видео.html
he talks way too fast and skips steps.
I love this chat overlay. Is there an easy way to get this right aligned instead of left aligned?
I tried the new method but all I'm getting is basic text with a giant moderator and streamer icon. What am I doing wrong?
does this work with youtube chat?
hey i watched both videos and did everything like you said copied all links imported added all this and my chat is like cut off from the chat box and it wont work there's no tutorials on this and it looks like no one else has this problem but me i was wondering if theres a tip for this i like this chat alot and i just want it to work im losing my sanity
I cant get it to work either
Can someone help me figure out which file I need to download the Google File? I've downladed the file and it is not showing up on StreamElements
for some reason, all my dubs don't appear on the chatbox.. anyone else with this problem?
I currently use this and I love it! I recently started multistreaming on TikTok and Twitch, do you know of anyway that I can add a combined chat to the overlay versus only the twitch chat?
I can't seem to be able to get the css to edit the width of the chat bubble border. Is it possible underneath all the other code? I tried setting it just after border radius in .container-message section
Bro can you tell me how to use this for RUclips streams? I tried it as is but then the names are getting kinda jumbled.
Awesome Video! thanks for the help.
video posted long time ago but wonder if u can still write back, how do i add the mask on OBS.
how to you actually add the custom overlay?
HTML wont open
This worked great. Just to break it a further, once you download file and open editor in side Stream elements just drag the files to the right sliders and drop them in. Easy Peasy!
hello where does the data file go? i cant seem to get it to work
does this work for youtube??? pls tell me i didnt just spend 2 hours for it to be twitch only
Tiktok brought me here :) I love your videos!
Hiya! I'm trying to adjust the distance between one message and the next, it seems to be at about 60px right now but the fiddling with the CSS doesn't seem to yield what I'm after. Got any idea how to adjust this?
Thank yoy ! It will help me a lot, I'll try to adjust it by myself 😊
Thanks for these files :) it works flawlessly and is just what i looking for. I just have one question: Is it possible to hide messages/delete after some time? If so, how. I looked up t he code, but it seems like i cant trigger it
You should be able to delete messages via OBS or Streamlabs as the widget is integrated with those platforms. I believe the chat widget would remove the deleted messages
@@OVERKLOC first of all thanks a lot for your reply ! sorry, i just described my problem wrong. I meant, that the messages dissapear after a time. Lets say someone writes something and it dissapears after 2 mins. So that the screen isnt bloated all the time
@@Chrizzlify in streamelements, go to settings, configureations then remove msg and change that to however long you want the messages to stay up
I can't see the overlay link in the description.
hey man appreciate the different look for the chatbox. got 1 question tho. changed everything over and it looks great however my commands arent working such as !socials and things like that.. i know this vid is a year old but just wondering
Hi! The only time I've had issues with chat commands are due to my chatbot (cloudbot from Streamlabs in my case) being inactive. Sometimes it will switch off so I have to log into my Streamlabs account and turn on the bot
Hope that helps!
@OVERKLOC well I checked it showed it was active cuz it still worked on my twitch chat but I'll disconnect and reconnect it again and see if that works
Got it working my bot was connected but had to connect it in settings not just from the dashboard...thx alot!!!!
im a lil confuse!! so i opened the link and then what? how will I have it in stream elements? sorry T^T
in the comment pinned he give de step by step
I got it to work! Thank you very much! One question: how to get the chat direction to appear in the reverse. I.e., from top-down (new chat appear as the top of the column) instead of the standard "new chat text starts at the bottom"?
thanks a alot, my tchat looks better now !
Thanks for that video! Can you tell me where in the code I can reduce the distance between name and message? Best regards
Sure thing!
You should be able to modify the username and username2 code sections in the CSS adjusting the top attribute. Right now its set to -30 but if you set it to -25 or -20 it gets closer to the message. Be sure to update the top attribute for both username and username 2. Otherwise there is a misalignment. I think there may be some code clean up required. I'll likely rewrite the widget at some point to provide more customization and make the code more readable but since this was my first crack at widgets and it was a modification of someone else's I didn't dive too deep into it
Also when performing this change you'll want to adjust the bottom margin for each user message in the CSS to avoid large gaps when there is more than one:
#log>div { position: relative; padding-top: 22px; margin-bottom: 40px; }
Great work dude and thank you 👍
Hi. The overlay works good, thanks a lot! I want to change the font to Space Mono, and trying to change it inside streamlabs overalays, but cant find it inside the code.. Any tips?
Using the custom code editor in StreamElements updating the default font in the CSS should do the trick
Maybe im the crazy one but I thought the before was much better than the after. The before one with a simple faded backround is pretty much what im looking for.
Does this includes custom animations for the scroll of the chat and if not where can we get the code for that? Thanks!
Very Good video ! Do you know how to change the orientation of the overlay (to put it at the right of the screen) ? Thank you !
Thanks! You might be able to apply a margin and set it to a value of "right" - not sure if it will give you the exact look you're going for but should be a start
is streamelement safe?
what do i do with the file?
Please refer to my pinned comment that will direct you to another video that goes into detail on setting up a new chat overlay in StreamElements.
When I created this video my widget was submitted for review but StreamElements never got back to me and as far as I know the only way to browse community widgets is via their Discord which is kinda gross so just creating your own custom widget and then copy/pasting the code files into it is easier IMO
@@OVERKLOC ok thank you
thx bro
how to get chat to come through. only message coming through is test message
did you find a fix
@UncsIsBetter I thought i had this issue, unsure if yours may be the same, it is just my messages that aren't showing however, when i stream, everyone else's messages show fine
@@camminajane nope no message shows except for test message
@UncsIsBetter nope
Hello I am trying to do this and when I follow your steps in your description it does not work on my end do you have any idea what I need to do? it just shows up blank in SE, and when i go to do a test message nothing happens. Let me know if I have to explain this better but this is the best that I can describe so far. I hope you are having a great day!
Please take a look at my new video where I walk through the instructions: ruclips.net/video/98-bafp0HIc/видео.html
ty very much
No problem!
@@OVERKLOC but the box is not showing in obs screen even after the link is kept in browser source
Sometimes you need to play with the sizing of the OBS browser source height and width and match that to the stream elements widget height and width. If you can try adding the original widget and get it working then apply the changes as per the video description that's probably the best bet for getting it to work as expected
@@OVERKLOC i did nothing worked 😞
Does OBS allow you to test a chat message? I know Streamlabs OBS does, that's what I use. If you can type a test message when not live you should be able to see it.
Does it work on mobile
I cannot get it to show in 'my overlays'
Hi, I believe I've now enabled sharing of overlays on my account, please try again
streamelements.com/dashboard/overlays/share/6209764d6193b1aad5025ce6
I have also submitted the overlay to Stream Elements. If it is approved it will be available via their Discord widget-share channel
Will provide an update when they get back to me 🙂
@@OVERKLOC I still cannot get it to show It just prompts me to login and I still don't see it in my overlays..
@@Pyrouku noted... Looks like the instructions I found online via Reddit aren't correct... Once the overlay is approved I'll get a new share link that will work... Appreciate your patients... Will message and change video description as soon as I get the correct link
@@OVERKLOC Okay! 👍
does this work for youtube?
Yup, should work regardless what platform you're streaming on
it isnt exactly working... is there something i need to do different or...?@@OVERKLOC
Wish i can do it on mobile i dobr have a oc
does this work this youtube chat?
does it work for you bc it doesnt for me???
i put everything ! except HTML ! How to do those ?
The HTML, CSS, JavaScript, etc. are all inputs you can provide in the settings of a custom stream elements overlay. There are instructions in the video description that outline the steps for getting to the necessary point to input the downloadable document content
Hope this helps
Unfortunately the link is bugged, but can't wait to try it :)
thank you!
Yeah, sorry about that. I sent a request Sunday to have the widget added publicly to Stream Elements and another one this morning so fingers crossed it goes through sooner rather than later
Instead of waiting to get a widget/overlay share link from Stream Elements I've zipped the necessary overlay files (HTML, CSS, JS, etc.) into a package you can download from the video description to create your own instance of the overlay. Instructions on using the files are in the description as well, happy streaming!
plz do a step by step
“Could someone tell me why some of my weed-related videos aren’t showing up? They’re not restricted, though.”
якаж параша використовуй обс звичайне
I loved it, I'm using it and highly recommend it!! I've only encountered 2 issues happening with me: 1- Messages from one of my mods are not showing up in the chat (xGrazi is the user). 2- A follower with the username 'eco_da_muda_desaplaudida' has her name repeated under the name in the chat bubble. Can you help me with this issues??!! Thank you!!
im having the same issue and cant seem to find a fix. looked over all the files as well :(
Found the solution! They have to change their color of their nickname on Twitch (to the basic one probably, not from Prime palette), u welcome ^ ^
thank you