For anyone having issues where the nickname is always showing over your image, in the URL you put into the browser source, capitalize the 't' in 'false&hide_names=true' into 'false&hide_names=True'. This will fix the nickname showing over your image even if you have hide nicknames enabled.
Thank you so much for making this video and making it simple and straight forward, especially the part about putting your images in a text channel in your discord so they won't be lost somehow. I have been trying for months to do this and I was totally overthinking/overengineering it.
Whew, thank you. Only had half of the instructions before lol. Also they might change it again in the future, but they've since moved the developer mode to a separate "advanced" tab instead of appearance. At least on my discord. Just in case any one else gets stuck looking for it. Thanks for making this so quick and to the point, that's very much appreciated.
For those of you that had trouble having the avatar show up make sure the browser source dimensions are what the picture is. For me I had to make the browser source 4000 x 4000 for the avatar to show up and i just croped it down to fit better on the screen.
@@pandaxwo1033 i have a tip size the browser scene to the size of the png character so for example for me I draw it my character on 1500 - 1900 so that's what my browser scene size is
THIS IS FANTASTIC!!! This solves a problem I was going to have to tackle for a friend-based stream I'm trying to set up... Thank you so much for this tutorial!!!
you saved may ass just now with this, as of this post, the site i was using for my reactive pngs went down and idk if it will be back up, but this tutorial definatly saved my ass and i appreciate it
Thanks for making such a clear and concise tutorial! I'm using this for my Dungeons and Dragons recordings on OBS and this was super short and to the point. I needed that cause I had 5 people to add! So thanks for making it easy and clear. :D
I got a single one working, but then when I added the rest for my party members mine froze and none of them show up. Is my PC not able to handle this or something? Or did I do something wrong?
I have a problem: When I copy and paste my friend's ID in the code, for some reason his character doesn't appear (we are in the same channel, I did everything right). Like only appears his user in the left corner above. When I put MY ID, my friend's character appears!, but I don't know why it doesn't work with his ID. Could you help me?
Thanks for This Video Its been a big help I making a custom overlay for a chat room and turn every that know talk in to finsh in a river an i fishing them out to chat going make 22 of them.
For anyone who made the mistake like me of using your discord name, rather than your discord ID, don't put your regular discord name in it, the ID is actually a number.
hello! how did you set up the avatar that is mirroring your movements/talking? I want to stream on twitch but I do not want to use my actual face... if you have made a video on it already, could you point me in the right direction to watch it?
This worked perfectly! thank you so much! though just wanted to add if its possible to adjust to make the avi more bouncy when i talk? and which setting or code do i tweak? thanks!
Thank you so so much for this! I've really been enjoying having this on my stream! I do have a question-- do you know if it's possible to inject the CSS with a local file instead of directly in the browser source? It would be great just to have a "player 2" browser source that points to a CSS file on my hdd that I can swap out depending on who I'm playing with...
how can you use an avatar as overlay on streamlabs? im using an apple computer. but idk if i need a WEBCAM that runs AI FACE TRACKING, or if i just need a whatever webcam. I really dont know but i want to learn how to use this. i investigated but the apps for the apple computer they seem to not run correctly, or do i need hardware?
if I go live on tiktok,how can I see the comments,but my gaming is on the whole screen,while I put my character in the screen to,basically.i wanna see the comments in a small section while my gaming screen is on the screen,hopefully you understand!!
Thanks for the epic tutorial! however im having the issue of our names are displaying over the model and i cannot for the life of me figure out a solution- any ideas would be great!
That's so odd that's happening; it must be their newest update or something. I actually found a different way to do this, and am using that method. Check out that new tutorial
hi, anyone can help me? i created 4 avatars. copy thier id and paste into the code but only detect me and all 4 avatar is moving when i am talking, but my friends voice is not detected and not moving.
So with the new OBS Update, The Discord overlay still works but for some reason the code does not work. Has anyone else run in to this? I have tried uploading new pics for it, Not just on Discord and Imgur as well, And it still will not register the images I use in this code. Any help would be most apricated.
Ma Queen! i have a question: many streamer also have Avatar while they have direct calls with each other. So they dont use a Server/voicechat room imn that moment. How does that work ?
I feel like I already know the answer to this question, but do you know if this would work on Lightstream? I stream off my PS4 and I'm lost on how to get a similar effect on there! Thanks in advance for any help!
Are you able to do this for mutliple channels, but the same friends? Sometimes my friends and I will talk and play in one channel in one server, but other times, we'd be in a different channel in a different server 🤔
No idea how to or if im just a bit dummy, but is the .png a drawing or.. cuz i'd like to know if you used vroid or something to take the picture and added a transparent background
thanks for this, super useful! i do have a question though, the avatar displays my discord tag as a label on my reactive avatar. do you know how to remove this?
ive seen some streamers have a talking animation rather than just lighting up, any insights as to what would be required? im wondering if you could do a .gif and since they are non-transparent you could chroma-key the background out, potentially, but i havent seen if this works with .gif
I followed along and it works but the images appeared only on the Streamlabs OBS and not on my screen/desktop. How can I make the images appear on my screen as well?
Hi! this tutorial was a really good but I'm running into a small problem that the picture doesn't stay on the screen when you're silent, it blinks instead when you talk?? If anyone knows how this work plz help
Sounds like a text/code error. Double check that you didn't erase anything incorrectly when you inputted your own codes, and that your images are correct
Thank you so much for this tutorial! Something that I can't seem to figure out what went wrong is that the audio doesn't actually get recorded, despite the fact that my avatar moves when I speak :( I don't know if it's something to do with my settings on Discord or Streamlabs. If anyone has the solution to this please lmk!
i'm having trouble. after adding the code and setting the browser source to the same resolution as my picture there's nothing there. I'm not sure what I'm doing wrong
Hi, I'm having trouble having the non talking one show up, the images pops up when I talk but when I'm not talking it doesn't show up at all, I even tried using Jiinh's website to get the exact coding but it still did the same thing. would anyone be able to help?
When I'm not speaking the image of my avatar not speaking doesn't show up, I didn't delete anything (except for the /*Change brightness to 100%, if you don’t want the image to dim*/), why is it like that?
hey! i was wondering how to make this apply to discord calls when im streaming my screen. id like my little guy to show at the bottom when im screensharing
You can look on Booth for a fully finished avatar, but I always see girl avatars and not guys on there. I have a tutorial on how to make one yourself for free and in 15mins.
HELLO!!! IDK IF U KNOW THIS BUT DO U KNOW A WAY TO MAKE DISCORD CALL OVERLAYS LIKE THOSE SQUARE BOX BOUNCING?? (WITHOUT FUGITECH) I CAN SEND U AN EXAMPLE IF U NEED ONE BECEAUSE I REALLY NEED THAT KIND OF DISCORD OVERLAY THANK U
hi! i followed all the steps, including the height & width, and it didnt work? it worked the first time but i forgot to change the height & width then so it was cropped weird so i went back and changed it and now my images dont appear at all
hey I'm a little late but I have a question, so when I go into the stream kit and put in my server and channel the url doesn't pop up in the right under the example picture. How can I make the link come up? ( after I followed the rest of the steps btw )
how do we get the obs for the voice chat for us to put the browser source? also mine doesnt show up on my screen but it shows it when im dragging it around?
can i set this up for friends somehow aswell? or is it only for me? Usually i set up everything for my friends, because they are not into streaming, so they dont have to do that on their own
For anyone having issues where the nickname is always showing over your image, in the URL you put into the browser source, capitalize the 't' in 'false&hide_names=true' into 'false&hide_names=True'. This will fix the nickname showing over your image even if you have hide nicknames enabled.
Thank you so much for the sharing that info
@@NinjaDee No worries love! It looks like it's a bug affecting all of the streamkit right now so hopefully they just fix it anyway. :D
Where does the 'false&hide_names=True' Go? I cannot find where it belongs
Where do you put it though?
@@LeeSweetGames in the url
Thank you so much for making this video and making it simple and straight forward, especially the part about putting your images in a text channel in your discord so they won't be lost somehow. I have been trying for months to do this and I was totally overthinking/overengineering it.
I'm so happy it helped!! 😁
Whew, thank you. Only had half of the instructions before lol. Also they might change it again in the future, but they've since moved the developer mode to a separate "advanced" tab instead of appearance. At least on my discord. Just in case any one else gets stuck looking for it. Thanks for making this so quick and to the point, that's very much appreciated.
Thank you so much for this, I could not for the life of me figure out how to do it lol
You're very welcome!
For those of you that had trouble having the avatar show up make sure the browser source dimensions are what the picture is. For me I had to make the browser source 4000 x 4000 for the avatar to show up and i just croped it down to fit better on the screen.
how do you know what dimensions you need
@@pandaxwo1033 i have a tip size the browser scene to the size of the png character so for example for me I draw it my character on 1500 - 1900 so that's what my browser scene size is
@@Aru_beeee doesnt work for me
Dear Ninja-Dee,
You're awesome. NerdistBeach recommended your tutorial, now I feel smarter and found another cool streamer to watch. Thank you ^_^
Thank you so much!! Happy to have you here 🤗
they have added a new setting called advanced so its no longer in apearance
To anyone not knowing why your closed mouth image isn't showing. Turn off "Show speaking users only" and re-copy and paste the browser code.
Best video on the topic on whole YT! ^^
Aw, thank you! 🙌
This is so fun to play around with friends with, thank you for making this video
You're very welcome!
Bless your soul thank you so much!!! Simple, straightforward, easy to follow, and exactly what I was looking for. Thank you thank you thank you!
You're very welcome! ☺️
*Noice*
The intro(s) never get(s) old
THIS IS FANTASTIC!!! This solves a problem I was going to have to tackle for a friend-based stream I'm trying to set up... Thank you so much for this tutorial!!!
You're very welcome! I also have an updated tutorial that's easier
tysm i had a lot of trouble finding a tutorial that made sense for me but this one really helped
Yay! Glad it helped 👌
you saved may ass just now with this, as of this post, the site i was using for my reactive pngs went down and idk if it will be back up, but this tutorial definatly saved my ass and i appreciate it
Glad to hear that! I also have a new tutorial that is simpler than this way ☺️
Thanks for making such a clear and concise tutorial! I'm using this for my Dungeons and Dragons recordings on OBS and this was super short and to the point. I needed that cause I had 5 people to add! So thanks for making it easy and clear. :D
You're very welcome! ☺️
I got a single one working, but then when I added the rest for my party members mine froze and none of them show up. Is my PC not able to handle this or something? Or did I do something wrong?
This was super easy and helpful thank you for this!
You're so welcome!
I was looking for this forever! Thank you for this!
You're very welcome! I have an updated and easier version of this too
ooo this was a lot easier than i imagined thank you!!!
You're very welcome! There is even an easier way which I show in my latest tutorial
whoa, you have made this such an easy process! Thank you so much
You're very welcome! I released an updated way to do this that's even easier 🙌
best, quickest tutorial !!! you rock!!
Thank you so much! ☺️
Outstanding. Thanks
The website where the css code generator wasn't available for some reason. Thank you so much for having the code available!
Glad it worked for you!
Finally I was looking for this tutorial!!! Thank you!!!!
You're very welcome!
Awesome! Thank you for uploading!
I'm glad it was useful! 🥺
this video helped out a ton, thank you!!
THANK U SO MUCH FOR THIS!!!
Thank you for the video! really helpful and grateful for this tutorial
I have a problem: When I copy and paste my friend's ID in the code, for some reason his character doesn't appear (we are in the same channel, I did everything right). Like only appears his user in the left corner above. When I put MY ID, my friend's character appears!, but I don't know why it doesn't work with his ID. Could you help me?
Thank you sooo much!!! I've been wanting to get this done, but didn't know how ofc. THANK YOU!!!
You're very welcome!! ☺️
Thanks Dee, much appreciated.
Anytime!
This is so cool. Thank you for this video.
If you can’t find developer mode go to advance and it should be there :)
omg this is so useful thank you!
Glad it was helpful!
Gonna use this thank u
So simple and so useful. Thank you very much for this.
You're very welcome! 😊
Helpful as always
Yay~
Thanks for This Video Its been a big help I making a custom overlay for a chat room and turn every that know talk in to finsh in a river an i fishing them out to chat going make 22 of them.
Thank you, just thank you
Your very welcome!
Thanks so much, youre an absolute life saver!!
You're very welcome!
Thanks for the awesome video!! It helped a bunch
Happy to hear that!
thanks for this, was helpful!
Happy to hear that! ☺️
For anyone who made the mistake like me of using your discord name, rather than your discord ID, don't put your regular discord name in it, the ID is actually a number.
Oooh my gosh, is that why people have been saying their name is showing- l o l
Great Tutorial! Thank you so much!!
You're very welcome! I released an updated version of this as well that's even easier to set up
I will have to check it out!
Just want to inform, on my discord, the developer mode setting had being separated, it in advanced now
super helpful thank you!
You're very welcome! Feel free to check out my latest tutorial as that is actually easier to do reactive images
this does not work for me
Do you know how to maybe do this for ipad? :')
I do not. But if you're able to download all the nessecary programs on an ipad, then I don't see why it wouldn't work.
Amazing! Thank you so much!
You're very welcome!
Thank you very much!
very helpful ong thx!
You're very welcome!
thank you so much for this video
Happy to help!
hello! how did you set up the avatar that is mirroring your movements/talking? I want to stream on twitch but I do not want to use my actual face... if you have made a video on it already, could you point me in the right direction to watch it?
THank you so much!
I would love to do this to troll but I’ll do this for fun tbh ty for the video
Thank you so much!!
You're very welcome! I recently released a new tutorial on an easier way to do this ☺️
wasup my ninja
This worked perfectly! thank you so much! though just wanted to add if its possible to adjust to make the avi more bouncy when i talk? and which setting or code do i tweak? thanks!
Check out my latest tutorial on reactive images! That version has a way to add a bounce
@@NinjaDee thank you so much! imma check it out!
What if is for a UA-cam video and not streaming it works with regular UA-cam videos to right because I'm kind of confused
It will also work with UA-cam; like how I made this YT video without streaming
@@NinjaDee ohhhh yeah true I should have thought of that thank you for answering and thank you for this tutorial
@@NinjaDee one more question do you have to have streamlabs up all times?
Thank you so so much for this! I've really been enjoying having this on my stream!
I do have a question-- do you know if it's possible to inject the CSS with a local file instead of directly in the browser source? It would be great just to have a "player 2" browser source that points to a CSS file on my hdd that I can swap out depending on who I'm playing with...
I personally have never tried doing local file; but I wouldn't expect it work. I make multiple browser sources for each individual person I play with
@@NinjaDee Ok, I was wondering if that was the best way to do it. Thanks!
how can you use an avatar as overlay on streamlabs? im using an apple computer. but idk if i need a WEBCAM that runs AI FACE TRACKING, or if i just need a whatever webcam. I really dont know but i want to learn how to use this. i investigated but the apps for the apple computer they seem to not run correctly, or do i need hardware?
THANKS FOR THE TUTORIAL... but my friends image sizes are all messed up and one gets really large when she talks
You can resize the browser sources in Streamlabs
if I go live on tiktok,how can I see the comments,but my gaming is on the whole screen,while I put my character in the screen to,basically.i wanna see the comments in a small section while my gaming screen is on the screen,hopefully you understand!!
THANKS
thank you
Thanks for the epic tutorial! however im having the issue of our names are displaying over the model and i cannot for the life of me figure out a solution- any ideas would be great!
That's so odd that's happening; it must be their newest update or something. I actually found a different way to do this, and am using that method. Check out that new tutorial
aw for me it just shows their discord pfp and not the images idk what i did wrong
hi, anyone can help me? i created 4 avatars. copy thier id and paste into the code but only detect me and all 4 avatar is moving when i am talking, but my friends voice is not detected and not moving.
So with the new OBS Update, The Discord overlay still works but for some reason the code does not work. Has anyone else run in to this? I have tried uploading new pics for it, Not just on Discord and Imgur as well, And it still will not register the images I use in this code. Any help would be most apricated.
Check out my newest video on how to do this. The code in this vid is outdated now
@@NinjaDee My friend fixed the discord code, Its worked and tested. Wondering if you want the updated code?
@@brimstone9060 Hi! I'd love the updated code if you could send it to me!
@@brimstone9060 If it isn't a bother, I would also like the updated code
@@brimstone9060 If I could have the code as well I'd appreciate it
Ma Queen! i have a question: many streamer also have Avatar while they have direct calls with each other. So they dont use a Server/voicechat room imn that moment. How does that work ?
Check out my updated tutorial! In that version, you can be in any discord server or private chat room, and it will still react to you and the friends
I feel like I already know the answer to this question, but do you know if this would work on Lightstream? I stream off my PS4 and I'm lost on how to get a similar effect on there!
Thanks in advance for any help!
I don't believe it will. You would need to get a game capture device in order to use a vtuber & discord along with playing on a console
Are you able to do this for mutliple channels, but the same friends?
Sometimes my friends and I will talk and play in one channel in one server, but other times, we'd be in a different channel in a different server 🤔
Yes, but each server has their own unique url, so you'll need to make a separate URL/Browser scene for each discord server you're chatting in
is there a tool kit that grabs otheres screen share like having 3 live vtubers?
No idea how to or if im just a bit dummy, but is the .png a drawing or.. cuz i'd like to know if you used vroid or something to take the picture and added a transparent background
I used 3tene to take the PNG photo. I have a tutorial on how to use 3tene too
@@NinjaDee tysm
thanks for this, super useful!
i do have a question though, the avatar displays my discord tag as a label on my reactive avatar. do you know how to remove this?
Nps! I haven't seen that before hmm. The reactive image is showing whatever is linked to your discord, so maybe check your discord settings?
ive seen some streamers have a talking animation rather than just lighting up, any insights as to what would be required?
im wondering if you could do a .gif and since they are non-transparent you could chroma-key the background out, potentially, but i havent seen if this works with .gif
I've seen people use a gif or looping video. The background just needs to be transparent for either
im having troubles with the browser source for the streamkit as the custom CSS isnt working and its just displaying the normal discord VC
This is an old tutorial. Check the video description for the update tutorial!
thank you :)
You're very welcome! Check out my updated tutorial that's actually simpler that this way
I followed along and it works but the images appeared only on the Streamlabs OBS and not on my screen/desktop. How can I make the images appear on my screen as well?
You can't make the image appear on the screen/desktop. What you're seeing on my YT video is what my stream/OBS shows.
this worked before, I tried it again and now even when I follow it step by step, it just shows me regular streamkit overlay instead of the photo
It's gone through some updates so I made a newer tutorial on my channel
Hi! this tutorial was a really good but I'm running into a small problem that the picture doesn't stay on the screen when you're silent, it blinks instead when you talk?? If anyone knows how this work plz help
Sounds like a text/code error. Double check that you didn't erase anything incorrectly when you inputted your own codes, and that your images are correct
Thank you so much for this tutorial! Something that I can't seem to figure out what went wrong is that the audio doesn't actually get recorded, despite the fact that my avatar moves when I speak :( I don't know if it's something to do with my settings on Discord or Streamlabs. If anyone has the solution to this please lmk!
Nps! That's likely a streamlabs mic issue
@@NinjaDee Wow, yeah I managed to get it to work! It was simpler than I thought T.T Thank you again tho for the great video!
Hello good video!
I have a doubt, the same avatar appears for the 6 people despite having put the id
How do I put an avatar per person?
The ID is definitely incorrect in each browser source. Try it again
i'm having trouble. after adding the code and setting the browser source to the same resolution as my picture there's nothing there. I'm not sure what I'm doing wrong
Double check that the discord or user code is correct.
Hi, I'm having trouble having the non talking one show up, the images pops up when I talk but when I'm not talking it doesn't show up at all, I even tried using Jiinh's website to get the exact coding but it still did the same thing. would anyone be able to help?
Having the same problem. It worked fine for my first character but when I added another it only pops up when talking and disappears after that
hey, you must uncheck the "Show Speaking Users Only" in the StreamKit website in order for the not talking image to show up
@@suki346 i did that, but it still now shown up, any idea?
can you make an obs tutorial (if you havent)
Yeah! I can do that this week
When I'm not speaking the image of my avatar not speaking doesn't show up, I didn't delete anything (except for the /*Change brightness to 100%, if you don’t want the image to dim*/), why is it like that?
Sounds like one of the pasted codes is incorrect. Maybe the user ID or the discord source link
i can only see the voice channel we are in (our names) and not the images and did everything by the book..?
In the video description there is a link to an update tutorial
hey! i was wondering how to make this apply to discord calls when im streaming my screen. id like my little guy to show at the bottom when im screensharing
you can download VirtualCam for OBS and set it up. Discord will identify the virtualcam plugin as a source so you can stream it on any voice channel
Thank you for this! One question, where can I find good avatars?
You can look on Booth for a fully finished avatar, but I always see girl avatars and not guys on there. I have a tutorial on how to make one yourself for free and in 15mins.
@@NinjaDee thank you so muchh
This seems to be having issues now. I used to have it working awhile back. Was there a change that made the CSS not work anymore?
Yes, as noted in the video description, there is an updated tutorial
@@NinjaDee oh shoot. I was so focused on the Css I missed that. Sorry for being totally blind there lol. Thank you for the response though!
It still will not show up for me. I added everything, and I tried fixing the dimensions but it still doesn't show up ;-;
Check out my newer tutorial! I heard streamlabs has been weird
hello, i followed everything even changed the browser source size, my photo never shows up.. does it have to be a specific type of photo?>
It takes png or jpeg. The problem is most likely one of those codes was pasted incorrectly, or the discord server url that was generated is wrong
HELLO!!! IDK IF U KNOW THIS BUT DO U KNOW A WAY TO MAKE DISCORD CALL OVERLAYS LIKE THOSE SQUARE BOX BOUNCING?? (WITHOUT FUGITECH) I CAN SEND U AN EXAMPLE IF U NEED ONE BECEAUSE I REALLY NEED THAT KIND OF DISCORD OVERLAY THANK U
This tutorial doesn't use Fugitech
hi! i followed all the steps, including the height & width, and it didnt work? it worked the first time but i forgot to change the height & width then so it was cropped weird so i went back and changed it and now my images dont appear at all
Check out my latest tutorial on a different way to do this! There is some thing new with streamlabs that has been effecting some users
i love you
Aww, happy to help 😁
@@NinjaDee it helped me so much, I used it right away in my last video. Tell me if you want some candy maybe i can give you :)
@@NinjaDee +1 Subscribe ~
hey I'm a little late but I have a question, so when I go into the stream kit and put in my server and channel the url doesn't pop up in the right under the example picture. How can I make the link come up? ( after I followed the rest of the steps btw )
I am unsure where the problem is occuring. If you follow the steps correctly, everything will work. I'm guessing the wrong link was copy and pasted
wish i could do this in regular obs
You can
how do we get the obs for the voice chat for us to put the browser source?
also mine doesnt show up on my screen but it shows it when im dragging it around?
I don't understand your question. OBS is a software that is used to stream. Voice chat is through Discord.
can i set this up for friends somehow aswell? or is it only for me?
Usually i set up everything for my friends, because they are not into streaming, so they dont have to do that on their own
You can make it for them! They just need to send you their png images to use for the code
@@NinjaDee thanks for the quick reply, but since streamlabs update, the code doesnt work anymore