You can use Discord's new OBS Streamkit Overlay as an awesomely-customizable additional browser source to depict your voice / text chat activity while in game. This will help you display vital server information to your viewers without using up valuable stream real estate for the whole client. You can set up the overlay in three simple steps: installation, customization, and implementation.
1. Installing and Authorizing the Streamkit Overlay
When you open the overlay webpage, you'll see the choice to install the Overlay for OBS:
Clicking install will let the overlay access your Discord client and control certain aspects of it. You'll see this information reflected under User Settings > Connections > Authorized Apps.
Specifically speaking, the permissions granted allow overlay to perform an action in your client, specifically generating an invite to use (if you choose) in the status widget.
Side note: You can tell when an app like the Streamkit Overlay is connected and accessing parts of your client by the blue banner on the top of the client window. You can close it by clicking the X in the corner:
2. Customizing your overlay
Once you've authorized the overlay in your client, you'll be taken right to the customization page. Directly under the OBS logo, you'll have the option to customize 3 separate widgets: Status, Chat, and Voice.
To get started with the preview, you'll want to first choose which server the overlay is showing, by selecting the server in the server dropdown menu.
Each separate widget is customizable in different ways, and all 3 can be used simultaneously! As you adjust the text color, size, shadow size, and icon visibility, you'll see a live preview of that widget display in the preview window.
3. Implementing your overlay in OBS
Once you've got your ideal overlay setup all decked out, be sure to check out the link in the installation panel:
Installation is as simple as copying the link provided in the installation panel, pasting it as a new browser source within your OBS stream client, and adjusting the height and width to match the dimensions given by the overlay website. Each separate widget will yield a separate installation code, so just repeat the installation process for each individual widget you want to use.
To add the overlay, you'll need to have the latest version of OBS Studio installed! Head over to the OBS website and grab the latest updates.
Side Pro Tip: If you're super-duper tech-savvy, you can make the Streamkit Overlay work in OBS Classic, but you'll need to download the necessary plugins from OBS' website. Not much we can help with there, unfortunately.
Let's check it out:
Implementation:
1. Copy the installation link:
2. Click the Add Source icon, and add a "BrowserSource":
3. Select "Create new", then name it:
4. Enter the installation link in the URL box, then adjust the Height & Width as needed:
Make sure your entered width & height measurements are the same as provided by the Streamkit website:
5. You'll see the overlay live on your stream preview now! You can drag & adjust it as you need.