Using Discord's XSplit Streamkit Overlay

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 Overlay 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.