How to Add a Discord Overlay to OBS

Open streamkit.discord.com/overlay, click Install for OBS, authorize it in your Discord app, choose the Voice widget, pick your server and voice channel, then paste the generated URL into an OBS Browser source at 312 × 600. The Discord desktop app has to be running on the same PC as OBS.

What you need

• The Discord desktop app, open and logged in on the same computer as OBS. StreamKit connects to the local app, not to your browser tab. If it can’t find it, the page shows Can’t Connect to the Discord Client.
• OBS Studio (any recent version) with its built-in Browser source.
• A server and voice channel you can see in your Discord app. You don’t need to own the server.

Step 1: Install and authorize StreamKit

1. With Discord running, open streamkit.discord.com/overlay in your browser.
2. Click Install for OBS.
3. Your Discord app pops up an authorization request. Click Authorize. While StreamKit is connected, Discord shows a banner at the top of the app. You can close it.
4. The StreamKit page switches to the configurator with three tabs: Status, Chat and Voice.

StreamKit then appears in your Discord User Settings under authorized apps. Remove it there if you stop using the overlay.

Step 2: Set up the Voice widget

1. Click the Voice tab.
2. Choose your server from the Server dropdown (Select a Server).
3. Choose the channel from Voice Channel (Select a Voice Channel).
4. Adjust the options below. The live preview updates as you go.

Voice widget options

The person speaking gets a green ring around their avatar. Your choices are saved into the URL as query parameters, so the link you copy already contains all of them.

Step 3: Add it to OBS as a Browser source

1. At the bottom of the StreamKit page, click the URL box to select it and copy it. StreamKit also lists the size: width 312 px, height 600 px for the Voice widget.
2. In OBS, click + under Sources and pick Browser. In OBS 32.2 and newer this opens the Add Source window: choose Browser and click Add a new Browser. In older versions choose Create new. Name it (for example “Discord Voice”) and click OK.
3. Paste the link into URL, set Width to 312 and Height to 600, then click OK.
4. Drag the source into place in your scene. Hold Alt while dragging an edge to crop instead of scale.

Each widget has its own URL, so repeat these steps for every widget you want. All three can run at the same time.

Chat and Status widgets

The Chat widget is handy for a Discord-based community or a sub-only text channel. To put your Twitch chat on stream instead, use our free Twitch chat overlay or follow how to add Twitch chat to OBS.

Custom CSS ideas for the Voice widget

The OBS Browser source has a Custom CSS box that applies to the page. Keep the default line that makes the background transparent and add your rules below it. StreamKit’s class names end in random suffixes that can change when Discord updates the page, so match them with partial selectors like [class*="Voice_avatar__"] rather than copying full class names from older tutorials.

Brighter speaking glow

[class*="Voice_avatarSpeaking"] {
  border-color: #34d399 !important;
  box-shadow: 0 0 12px #34d399;
}

Dim everyone who isn’t talking

[class*="Voice_avatar__"] {
  opacity: 0.5;
  transition: opacity 0.2s;
}
[class*="Voice_avatarSpeaking"] {
  opacity: 1;
}

Remove the dark name bubbles

[class*="Voice_name__"] {
  background-color: transparent !important;
}

Horizontal row of avatars

Turn on Hide Names in StreamKit, widen the Browser source (for example 600 × 80), then add:

[class*="Voice_voiceStates__"] {
  display: flex;
  gap: 8px;
}

If a rule stops working after a StreamKit update, the class names have probably changed. Open the widget URL in Chrome (with Discord running), right-click an avatar → Inspect, and update the selector to match.

StreamKit vs. Discord’s in-game overlay

They’re two different features. Discord’s Game Overlay (User Settings → Overlay → Enable Overlay) draws Discord on top of your game so you can see who’s talking and reply to messages without alt-tabbing. It’s Windows-only and isn’t designed as a stream graphic. StreamKit is a web page made for broadcasting software: it lives in its own OBS source, so you control exactly where it sits on stream, it looks the same on every scene, and it stays visible even when you switch from game capture to a webcam or “Just Chatting” scene.

Many streamers use both: the in-game overlay for themselves and the StreamKit Voice widget for viewers. For the rest of your scene, see Twitch overlay sizes.

Sources: Discord: Using Discord’s OBS Streamkit Overlay · Discord StreamKit Overlay · Discord: Game Overlay 101 · OBS Knowledge Base: Browser Source