Articles on: XSplit Broadcaster

Twitch Widgets

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



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



Display


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)




Twitch Cheers Alert - Customize Tab


Customize


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.








Updated on: 11/08/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!