What are Reactive Images?
Images that react to voice – or, more accurately, audio – in Discord. When you or others speak, that person’s icon will light up, move, or otherwise change to indicate someone is speaking, then revert back when they’re done.
You know how a little green circle appears around someone’s icon when they’re talking on Discord? Think of something like that, but with avatars of any shape, size, or design. They’re great for representing individual people in Discord chats on streams, recordings, and the like.
Getting Started
Open Notepad
There’s a couple URLs and lengthy numbers you’ll need to copy, so have something open that you can easily paste this information into. (I recommend Notepad++, personally. You do you.)
Enable Developer Mode in Discord
Discord IDs will be vital to ensuring that your avatar and the avatar of other people in a voice call are displaying correctly, and you’ll need to enable Discord’s Developer Mode to get at what these IDs are for you and other people:
- Pop open Discord on PC or via the web app, then go to Settings > Advanced.
- Turn on Developer Mode (you may need to click it a few times or hold it down to get it to turn on).
Note: As of this writing, Developer Mode isn’t available on mobile – you have to go through the desktop or browser app.
Copy Discord ID(s)
Once Developer Mode is on:
- In any server or DM, right click on your icon or the icon of the person whose ID you need, and click Copy ID.
- Paste this number into your Notepad – I recommend including info on which number belongs to who, since each ID is unique to that person and won’t change.
Note: You’ll need to do this for every person you want represented by an avatar, so don’t get these numbers mixed up!
Prepare Your Images
For reactive images to work, you’ll need two images to work with – a passive (standby) image and an active (speaking) image. Typically these will be PNGs with transparent backgrounds, but your needs may differ.
These can be the same image, but if you’re looking for a little more pop, you can make the active image different to imply speaking or motion. Get creative! Don’t worry about making the passive image dimmer than the active image. That part will be handled later.
Now, here’s where things get technical. The steps will be different depending on your needs…
Option 1: Quick Setup
FugiTech’s Discord Reactive Images offers an easy setup option that handles image hosting and puts everything into one browser source, but can be a bit inflexible as a result.
Set up Discord Reactive Images
Connect Discord to Discord Reactive Images via one of the two options below:
- https://discord-reactive-images.fugi.tech/
- This is the current version of Reactive Images (as of this writing). The page has a tutorial to explain how setup works.
- https://reactive.fugi.tech/
- This is the “v3” version of Reactive Images. It has a few more options, but lacks a tutorial to explain setup (as of this writing).
Either one you choose, you should be prompted to add the Reactive Images app to Discord.
Once the app is added, you can quickly and easily upload images for your own avatar as well as other people who you’ll be on a call with via the links above. There are several options to adjust, though to set up or adjust individual avatars for other people, it requires they currently be in the call. If you’re just setting up an avatar for yourself, you’ll have everything you need out of the gate.
This is a great option for setting up reactive images for yourself and a few friends without much fuss, but it does lack the ability to fine-tune the layout. It also requires everyone to be in the same call to make sure it all works. Avatars will re-arrange automatically based on who’s in the call, too, so this may not be ideal for every situation.
From here, add the browser source(s) you want to use to Discord:
- In OBS, go to Sources, then Add > Browser.
- Name the source whatever you’d like.
- In the window that comes up, paste the URL generated by Reactive Images into the URL line:
From here, you can adjust the width and height to whatever you need. Hit OK to add the source.
Note: It’s recommended to adjust thes size and ratio here, as using the Transform tool in OBS can – and probably will – distort images or cause other weird problems, including ones that may not be immediately obvious.
Option 2: More Complex, Greater Flexibility
Host Your Images
Updated April 3rd, 2022
The only current working method is to share the image on Discord via posting to a server or DM, then copy the image URL(s) to Notepad or something similar. If your image disappears from OBS and you’re not sure why, see if it’s still visible at the link you’re using first.
If you’re using separate Passive and Active images, make sure they have different names with URLs you can easily remember or make a note of – that’s going to be important a bit later on.
Set up Discord StreamKit Overlay
Grab the official Discord StreamKit Overlay:
On the StreamKit website:
- click over to “Voice Widget”, then select the Server and Voice Channel that you’ll be using for your avatar(s).
- Copy the link in the lower right:
From here, go back to OBS and add the browser source to Discord:
- In OBS, go to Sources, then Add > Browser.
- Name the source whatever you’d like.
- In the window that comes up, paste the URL generated by StreamKit into the URL line:
Don’t worry about setting the width and height yet, particularly if you’re setting up multiple avatars for yourself and others. We just want to make sure it works for now. Hit OK to add the source.
Note: It’s recommended to adjust the size and ratio here, as using the Transform tool in OBS can distort images or cause other weird problems.
Another Note: The link generated by Discord StreamKit is only for the Server and Voice Channel you selected. This shouldn’t be an issue if you only have one voice channel that you’ll be using regularly, particularly if you’re just using it for your own streams. If you want your avatar to show up elsewhere, you’ll need to set it up for each Server / Voice Channel you want it to display in – so for collabs, it may be best to use FugiTech instead.
Now, join the voice channel you selected for StreamKit. At this point, you should see your current Discord icon. If you don’t see your icon, check Discord StreamKit to make sure it’s set up for the right channel, and check OBS to see if the Browser Source you added is on-screen. Once you’ve confirmed your icon is displaying, it’s time for the next step.
Adding Custom CSS
Updated April 3rd, 2023
Surprise! It’s time for CSS. Re-open the Browser source you just created, then go to the Custom CSS box and post the block of CSS below. We’ll get at the bolded sections in a minute:
img.Voice_avatar__htiqH:not([src*=”YOUR DISCORD ID“]) { display:none; }
body {
–bounce-height: 10px;
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
overflow: hidden;
}
img.Voice_avatar__htiqH {
content: url(PASSIVE IMAGE);
height: auto !important;
width: auto !important;
border-radius: 0% !important;
border: none;
margin: 0;
padding: 0;
filter: brightness(50%);
}
img.Voice_avatarSpeaking__lE\+4m {
content: url(ACTIVE IMAGE);
border-color: rgba(0,0,0,0) !important;
position: relative;
animation-name: speak-now;
animation-duration: 1s;
animation-fill-mode: forwards;
filter: brightness(100%);
}
@keyframes speak-now {
0% { bottom: 0px; }
15% { bottom: var(–bounce-height); }
30% { bottom: 0px; }
}
li.Voice_voiceState__OCoZh{
position: absolute;
top: var(–bounce-height);
left: 0;
}
div.Voice_user__8fGwX{ position: absolute; left:40%; bottom:5%; }
span.Voice_name__TALd9 { display: none; }
Making it Work – For Yourself
You’ve probably guessed this by now, but at this point, you can drop in the Discord ID you copied from Discord, and add the URLs of the Passive and Active Images you created earlier.
Now, hop in the voice channel you set up with StreamKit, make sure your passive image displays, and talk a bit to make sure the active image displays, too – it should light up and bounce a bit when you start talking. If you see both images, you’re all set! If not, make sure the Discord ID and URLs are correct and that the images are viewable in a web browser via the direct URL.
At this point, you can go in and adjust the Width and Height, and move the Browser source wherever you’d like. The image should automatically resize (and keep its proportions) based on the width and height set in the Browser source.
I gotta stress here again that the Transform tool can add unforeseen complications, so I highly recommend that you set width and height in the Browser source.
Making it Work – For Everyone Else
To add avatars for other people, repeat the above steps for each person you want to add – that includes hosting the images, gathering up their Discord ID, and adding a Browser source. It’s extra work, but gives you far greater flexibility over where they display on-screen, and ensures their avatar will always be in the same location whenever they’re in chat.
Wrap-up and Extra Thoughts
Hopefully this has helped you add a bit of flair to your streams, videos, or other general recordings! While Option 2 is decidedly more work, it’s what I ended up using to set up an overlay for my friends and myself when we raid in FFXIV, and I’ve found the flexibility it offers was well worth the hour or so it took me to set it all up.
Browser Sources
Keep in mind that both methods use a Browser source, so it’ll last as long as the links to the images do. If something’s not displaying right, see if you can still access the image directly via its URL. If not, you’ll probably need to re-upload it.
Browser Properties vs. Transform Tool
I said this a couple times above, but I also highly recommend making any adjustments to Browser sources via the source itself and not OBS’ Transform tool. Setting a Width and Height via the Browser Properties ensures that your source is displaying correctly and scaling well. Using the Transform tool can distort the image or display it at the wrong resolution, and that can introduce problems with scaling and other adjustments.
Image Sizes
Keeping a consistent image size for OBS seems particularly handy; if you know all your images are going to be 400px wide, for example, you can plan in advance and easily resize each source so that they all display the same way. As a general rule, images will scale down better than they scale up, so starting with a larger image is going to give you better results.
Updates / Changelog
Updated April 3rd, 2023
Discord no longer seems to allow external images aside from Discord itself and select sites (such as Twitter), and returns a policy violation if you try to use something off-site. As a result, your best option is to host your images via Discord itself, either by posting them in a server or sending them to someone via a DM. I’ve removed references to using off-site hosting since that’s no longer a possibility.
Updated March 3rd, 2023
After getting things up and running with new CSS based on new class types, Discord seems to have broken this method yet again. I once again don’t have a fix for it.
Updated December 29th, 2022
After various testing, the updated method below seems to still have some issues with displaying avatars correctly. I’m continuing to look into why.
Updated December 18th, 2022
According to this OBS Project forum thread, Discord released an update that breaks the original CSS I included in this blog. The CSS has been updated, and I apologize to everyone who’s followed the steps below and has had this method suddenly stop working on them – or not work at all.
