You can use Discord's XSplit Streamkit Overlay as an awesomely-customizable additional browser source to depict your voice / text chat activity while in game. This'll 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 Ovelay for XSplit:
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 XSplit logo, you'll have the option to customize 3 separate widgets: Status, Chat, and Voice.
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 XSplit
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, and pasting it as a new browser source within your XSplit stream client. Each separate widget will yield a separate installation code, so just repeat the installation process for each individual widget you want to use. Here are the steps:
XSplit Setup:
1. Copy the installation link under the image preview:
2. In the "Add Source" menu, select "other", then select "Webpage URL":
3. Paste the installation link in the URL box, then adjust the dimensions to your desired size:
4. Since the overlay is a custom resolution, you'll want to adjust this manually in your XSplit client. To do so, right click the source in the source menu, then select the HTML tab. In the Display window, type in the dimensions give directly under the streamkit link:
5. You're All set! You'll see the overlay in your stream preview now.
Comments
9 comments
Where is the overlay webpage?
@Linux you can find it as streamkit.discordapp.com/overlay!
I get the error
Discord StreamKit Overlay
despite the client running and available. Same result on Firefox and Admin Mode Internet Explorer. What's up with this?
@Doq if you go into your user settings > connections > authorized apps, do you see anything there? If not, fully restart Discord and give it another shot.
Same issue here with "Can't connect to the Discord Client".
Have restart discord fully, but with no change.
Chrome dev tools log shows multiple attempt at a web socket connection which fails due to missing DNS entry
WebSocket connection to 'wss://3ee2e267-51f3-43ce-b808-87aa8e075dd1.discordapp.io:6467/?v=1&client_id=207646673902501888' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED
WebSocket connection to 'wss://3ad35f90-7122-4079-ad79-ceef2902ed3d.discordapp.io:6468/?v=1&client_id=207646673902501888' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED
@elsewhat Try using Google's public DNS real quick: https://developers.google.com/speed/public-dns/docs/using
The voice and status widget are working fine. My chat overlay shows the channel name at the top of the box on my stream but typing in the channel does not show up. Font is white with 100% opacity black background and still can't see anything when typing in the specified channel. Any suggestions?
Recap: I restarted Discord and the app definitely has permission because the voice and status work fine. Also the chat channel is displayed on the overlay but no text from the channel when typing in Discord.
Help,I don't see any link and Size. I restarted Discord and nothing.
And if I scroll nothing.
For streaming is there a way to "offset" the Voice widget?
Article is closed for comments.