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.
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:
Twitch Alerts
Twitch Chat Viewer via HTML5
Twitch Cheers Alert
Twitch IRC Chat Viewer
Click here to learn the best way you can use XSplit Broadcaster to stream to Twitch
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
You need to link your Twitch Account with the Source by clicking the Authorize XSplit to use Twitch button under the General Tab
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
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
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.
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
Sound
Choose a sound effect for your Twitch alert. You can set the volume and test out the alert from here as well.
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
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.
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
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
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
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
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
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
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
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 a user from being displayed in XSplit's Chat IRC Viewer]](https://storage.crisp.chat/users/helpdesk/website/567507547fcdcc00/293b-twitch-irc-chat-viewer-bl_5ajior.png)
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.
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:
Twitch Alerts
Twitch Chat Viewer via HTML5
Twitch Cheers Alert
Twitch IRC Chat Viewer
Click here to learn the best way you can use XSplit Broadcaster to stream to Twitch
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
You need to link your Twitch Account with the Source by clicking the Authorize XSplit to use Twitch button under the General Tab
Twitch Alerts Properties
General 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
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
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
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
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
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
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)
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
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
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
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
Thank you!