How to add Discord StreamKit overlays to Streamlabs

The short answer

Discord StreamKit has no separate Streamlabs installer. You use the OBS version of the overlay. On Discord's StreamKit overlay page, choose the OBS install option and authorize it in the Discord desktop app. Then pick a widget, such as voice, chat or status, and copy the address StreamKit generates. In Streamlabs Desktop, add that address as a Browser Source. This works because Streamlabs Desktop accepts the same kind of browser source that OBS does.

Before you start, know what the overlay does and does not do. A StreamKit overlay only shows on screen who is in a Discord channel, who is speaking, or recent text messages. It does not add Discord voice audio to your stream. If viewers need to hear the call, you have to capture that audio separately in Streamlabs.

What you need first

• The Discord desktop app installed, signed in and running on the computer that runs Streamlabs Desktop. StreamKit connects through the local Discord app, so it will not work with Discord in a browser tab alone.
• Streamlabs Desktop installed and a scene ready to add the overlay to.
• Access to the Discord server and the voice or text channel you want to display.

Step-by-step: add a StreamKit overlay to Streamlabs

• 1. In a web browser, open Discord's StreamKit overlay page and choose the option to install for OBS.
• 2. Discord will show an authorization prompt, either in the desktop app or in the browser. Approve it. Success check: the StreamKit page now offers widget choices instead of asking you to connect.
• 3. Choose a widget. The Voice widget shows members of a voice channel and highlights whoever is speaking. The Chat widget shows messages from a text channel. The Status widget shows server information.
• 4. Select the server and channel the widget should follow.
• 5. Adjust the display options StreamKit offers. These can include hiding names, showing only people who are speaking, or adding custom CSS (style code that changes the overlay's appearance). The preview on the page updates as you change settings.
• 6. Copy the overlay address shown on the page. StreamKit also suggests a width and height. Note these.
• 7. In Streamlabs Desktop, open your scene. Add a new source, choose Browser Source, and name it something like "Discord Voice".
• 8. Paste the copied address into the source's URL field. Enter the width and height, then confirm.
• 9. Move and resize the overlay in the editor preview so it sits where you want it on screen.

How to confirm it is working

• Join the voice channel you selected in the Discord desktop app. Your avatar or name should appear in the Streamlabs preview.
• Speak, or have someone else in the channel speak. The speaker's entry should highlight. This proves Discord is detecting voice activity and passing it to the overlay.
• For the Chat widget, post a test message in the chosen text channel and check that it appears in the preview.

These checks show that the overlay is connected and tracking the channel. They do not show that your microphone sounds clear, or that viewers can hear Discord. A speaking highlight only means Discord registered input activity. Listen to a short test recording or stream to check that voices come through and are intelligible.

Getting Discord audio into the stream

Streamlabs captures audio separately from any overlay. If you want viewers to hear the call, Discord's output has to reach Streamlabs. One way is through your desktop audio source. Another is a source that captures audio from the Discord app directly, if your version of Streamlabs offers one. Watch the Streamlabs audio mixer while people talk to confirm the signal is arriving, then listen back to judge quality. The supplied material includes no recommended mixer levels or loudness targets, so none are given here.

If the overlay is blank or not updating

• Check that the Discord desktop app is running and signed in on the same computer as Streamlabs.
• Check that you are in the exact server and channel the widget was set to. The overlay follows only the channel it was created for, so switching channels may require a new address.
• Go back to the StreamKit page and repeat the authorization if the connection seems to have expired.
• Reload the browser source. Use a refresh option in its properties if one is available, or remove the source and add it again with the same address.
• Compare the address in the source's URL field with the one StreamKit generated. Make sure nothing was cut off when you pasted it.

Privacy and limitations

The Voice and Chat widgets can show other people's names, avatars and messages to your audience. Make sure the people in the channel are comfortable with that. Use the hiding options where they help.

StreamKit is also separate from Discord's in-game overlay, which only appears on your own screen. The steps above follow how StreamKit has generally worked. No current documentation was supplied, so exact button labels, widget options and authorization screens may differ from what you see.