Adding Discord Voice Reactive Images to OBS

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:

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

For a roll-your-own solution, the images need to be hosted online in order for them to work. How you do that is up to you. There are plenty of image hosting services out there, up to and including having your own hosting.

A common 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. Keep in mind that the image will have to be publicly accessible for it to work, and there’s no guarantee how long a site will host your image. 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 thes 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, but 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.

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

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:


li.voice-state:not([data-reactid*=”Discord ID“]) { display:none; }

.avatar {

content: url(URL of Passive Image);

height: auto !important;

width: auto !important;

border-radius: 0% !important;

filter: brightness(50%);

}

.speaking {

border-color: rgba(0,0,0,0) !important;

position: relative;

animation-name: speak-now;

animation-duration: 1s;

animation-fill-mode:forwards;

filter: brightness(100%);

content:url(URL of Active Image);

}

@keyframes speak-now {

0% { bottom: 0px; }

15% { bottom: 10px; }

30% { bottom: 0px; }

}

li.voice-state{ position: static; }

div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }


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.

A Touch of Customization

By default, using the CSS above, the passive image will be dim, while the active image will be brighter and bounce a bit when audio is detected. There also won’t be a username displayed. If you’d like to change these things, you can adjust the following lines:

  • Passive Image Brightness

.avatar {

content: url(URL of Passive Image);

height: auto !important;

width: auto !important;

border-radius: 0% !important;

filter: brightness(50%);

}

  • Active Image Brightness

.speaking {

border-color: rgba(0,0,0,0) !important;

position: relative;

animation-name: speak-now;

animation-duration: 1s;

animation-fill-mode:forwards;

filter: brightness(100%);

content:url(URL of Active Image);

}

  • Bounce Height

@keyframes speak-now {

0% { bottom: 0px; }

15% { bottom: 10px; }

30% { bottom: 0px; }

}

  • Adjust Name Plate

li.voice-state{ position: static; }

div.user{ position: absolute; left:100%; bottom:100%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

To be clear, I barely know anything about CSS, but I was able to figure this out without too much trouble. There’s a lot more you can do with a little bit of knowledge or like 30 minutes of web searches. Customize to your heart’s content! Just keep a backup of what you know works in case something goes wrong.

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 8-person raid group 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 – and the websites that power them – do. If something’s not displaying right, see if you can still access the image or site that you’re using as a host.

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 600px 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 larger images are typically better, as well.