XSplit Logo
XSplit Logo

Twitch Widgets

XSplit Broadcaster offers a collection of cool built-in widgets to go with your Twitch livestream!

XSplit Broadcaster’s built-in Twitch widgets makes it very easy for you to show real-time alerts and messages to your audience.

Twitch Alerts and Chat Widget being used on a livestream

These widgets are not pre-installed, but you can install them through the Plugin Store.

Once installed, go to Add Source > Twitch Widgets to gain access to these widgets:

Click here to learn the best way you can use XSplit Broadcaster to stream to Twitch


Twitch Widgets are found by going to Add Source > Twitch Widgets from the Sources Menu


Twitch Alerts

Display an alert in real-time when you get cheers, subscribers, followers, and more.

Go to Add Source > Twitch Widgets > Twitch Widgets

Right-click on the source to show the Twitch Alerts properties

Twitch Alerts source properties can be accessed when you right-click on the source after adding it to the XSplit Stage

You need to link your Twitch Account with the Source by clicking the Authorize XSplit to use Twitch button under the General Tab
The Authorize XSplit to use Twitch button to link your Twitch account with the Twitch Alerts source


Twitch Alerts Properties

General Tab

Twitch Alerts properties - General Tab overview


Source

Account
shows the Twitch Account username currently linked to the widget

Change
Click to change the account linked to the widget

Remove
Unlinks the Twitch account from the widget


Alert

Type
Shows which type of alert needs to be triggered in your Twitch livestream Available alerts: Cheer, Follower, Host, Raid, Re-sub, Subscriber

Theme
The Twitch Alerts widget comes with a variety of themes to match your livestream's preferred look and feel.

Color
Choose from 6 different color themes for your Twitch Alerts

Layout
Changes the alignment of texts in your widget


Animation

Duration
Adjusts how long an animation will be displayed

Display Time
Adjusts how long the alert will be displayed on screen before it disappears

Animate In
The animation effect used when the widget appears on screen

Animate out
The animation effect used when the widget disappears on screen

Preview
Displays a static preview of how your widget will look like on screen

Test Alert
Simulates an event that triggers the widget to appear on screen, based on your animation settings.


Customize Tab

Twitch Alerts properties - Customize Tab overview


The type of the alert should be displayed on top (Cheer appears on the image above as an example)

Name
Changes the color and animation for the name within the Alert widget

Min. cheers
Determines the minimum number of cheers needed as a condition for the Alert display to on screen

This setting can differ, depending on the type of Twitch alert you've set


Audio

Sound
Choose a sound effect for your Twitch alert. You can set the volume and test out the alert from here as well.


Twitch Chat Viewer via HTML5

Twitch Chat Viewer via HTML5 source with an active live chat

This widget allows you to display live chats by adding the Twitch channel name

Go to Add Source > Twitch Widgets > Twitch Chat Viewer via HTML5

Right-click on the source to show the Widget properties


Twitch Chat Viewer via HTML5 Properties

Chat Tab

Twitch Chat Viewer via HTML5 source properties - linking xsplitsupport's Twitch channel


Source

Here you can add the Twitch channel name and click on Connect. This channel's live chats should appear in the chat box once live.

When connected, clicking the Disconnect button unlinks the channel from the widget.


Display

Chatbox
Determines the color of the chatbox

Opacity
Allows you to adjust the opacity of the chatbox. 0 renders the chat box invisible.

Viewers
Adjusts the viewer names' display color and font

Message
Adjusts the message display color and font

Text Size
Determine the size of the messages in the chat box (in px)

Use Twitch chat colors
Check this to display the chat colors as they appear on Twitch. This overrides the chat color setting you have set for the widget.

Hide user icons
Check this to hide the Twitch icons next to a user's name in chat


Twitch Cheers Alert

Twitch Cheers Alert as shown on a livestream

This widget notifies your viewers with the most recent and top cheers you got from your viewers!

Go to Add Source > Twitch Widgets > Twitch Cheers Alert

Right-click on the source to show the Widget properties


Twitch Cheers Alert Properties

Alert Tab

The Twitch Cheers Alert Properties - Alert Tab


Source

Account
shows the Twitch Account username currently linked to the widget

Change
Click to change the account linked to the widget

Remove
Unlinks the Twitch account from the widget


Notifications

Lock Components
Check this to disable the mouse hover, resizing and repositioning of the widget components

Show Stats
Shows the latest and top cheers you got. Here you can change the font color, type and opacity of the Username and labels of the stats overlay

Show Alert
Shows an alert when you get a cheer. Here you can change the font color, type and opacity of the Username and labels of the alert

Show Message
Check this to display the viewer's message in the alert

Duration
Here you can adjust how long the alert will be displayed on screen (in milliseconds)

Sound
Choose from a variety of sound effects that plays automatically when the cheer alert appears

Show Alert
Shows a static preview of your cheer alert

Test Alert
Simulates displaying of the cheer alert similar to when it happens during a livestream


Twitch IRC Chat Viewer

Twitch IRC Chat Viewer with live messages displayed

The Twitch IRC Chat Viewer links to your Twitch account to how your live chats during stream.

Go to Add Source > Twitch Widgets > Twitch IRC Chat Viewer

Right-click on the source to show the Widget properties


Twitch IRC Chat Viewer Properties

Chat Tab

Twitch IRC Chat Viewer chat Tab with a linked account


Source

Account Here you can link your Twitch account. When connected, the option to Change (change the account linked to the widget) and Remove (unlinks a connected account) becomes available


Display

Chatbox
Determines the color of the chatbox

Opacity
Allows you to adjust the opacity of the chatbox. 0 renders the chat box invisible.

Viewers
Adjusts the viewer names' display color and font

Message
Adjusts the message display color and font

Outline
Adds an outline around the texts

Text Size
Determine the size of the messages in the chat box (in px)

Hide usernames
Check this to hide the usernames from the Chat box

Hide user icons
Check this to hide the icons next to the usernames

Hide chat when idle for xx sec
Check this and adjust the number (in seconds) to automatically hide the widget after a set amount of time


Animation

Set this to Scroll to show extra settings

Direction
Set the direction upon which the messages will scroll to

Duration
Sets the amount of time for the scrolling animation

Randomize
Overrides Duration, Text Size, and Text color settings and displays randomly generated settings instead


Blocking Tab

Blocking a user from being displayed in XSplit's Chat IRC Viewer

Here you can add a Twitch viewer username to prevent his/her messages from being displayed in the widget. Click the Remove button to easily remove them from the block list.

Still having issues?