How to Show Chat on Stream
By Lowco There are many ways to show your chat on stream. You can embed your Twitch chat directly or use one of many tools to customize your chat to match your overlays. Although not critical, especially with the addition of chat replay in Twitch VoDs, some streamers like to show their chat on stream.
Here, we’ll go over pros and cons of displaying chat on stream and a few easy ways to add your chat to your own stream.
Putting chat on screen can provide the best communication with your community! This also lets you utilize chat in recycled content like videos on YouTube or funny clips.
Reasons to show chat?
1. Splash screens (i.e. Intro, AFK, Just Chatting, Ending)
2. YouTube videos or clips
3. Highlights – chat reaction
4. Playthroughs – people can follow who you were talking to
5. Interactive streamers who run a delay on their cast
What are the cons to showing chat?
1. Can take away valuable screen space, potentially blocking the game or making it look too cluttered.
2. Can appear sloppy if not properly set up! Don’t just window capture your chat. If you do, please disable mod icons, timestamps, and crop it appropriately.
3. Potential for spoilers or nasty comments to show on stream if moderators are not quick, potentially upsetting people watching in fullscreen or ruining highlight moments
How to show twitch chat on screen?
You can follow our guide below and use any of the following third-party tools to show chat on your stream!
1. Streamlabs
2. KapChat by NightDev
3. Rutony Chat
4. Zaytri’s Chat Bubbles
5. Custom CSS
Ways to Show Chat on Screen
1. Streamlabs Chat on Screen
Streamlabs has a section called Chat Box that will very easily allow you to display chat on your stream using Browser Source.
Not sure how to use browser sources? We’ve got you covered. Just check out our article on How to Set Up Browser Source for a more detailed explanation and walkthrough.
Does Streamlabs cost money?
Streamlabs has a free Starter membership that includes access to free overlays – including the ability to show chat on screen. There is also a paid membership for $149 USD per year with access to Streamlabs entire database.
How much does Streamlabs cost?
You can sign up for the FREE Streamlabs Starter membership, or upgrade to Streamlabs Ultra for $19USD monthly or $149USD annually.
How to use Streamlabs to show chat on screen?
Simply add the widget URL provided to your streaming software and configure the options such as colors, styles, and display settings. CSS wizards can choose to add their own custom CSS (under “Theme”)
2. KapChat by Nightdev Chat on Screen
Does KapChat cost money?
No, this is a free service.
How to use KapChat by Nightdev to show chat on screen
1. Click the install button for the streaming software you use.
2. You’ll be walked through a step by step guide, configuring your options, and then getting a URL to add to Browser Source.
3. RutonyChat on Screen
RutonyChat is a program specifically built to promote chat interaction through notifications and direct communication.
What’s the cost of RutonyChat?
$15 USD
What is RutonyChat?
This program includes:
1. 70+ themes
2. Notifications for follows, subs, donations
3. Chat Polls and raffles
4. BTTV Support
5. Rank system, remote control, and so much more!
4. Zaytri’s Chat Bubbles by Zaytri on Screen
A free browser source built in Stream Element’s overlays but can be used in any broadcast software.
Does Zaytri’s Chat Bubbles cost money?
No, this service is free.
What is Zaytri’s Chat Bubbles extension?
This extension provides four kinds of bubbles themes and works with Alejo’s pronoun extension.
How do you use Zaytri’s Chat Bubbles?
Copy the browser source URL provided into your broadcast software and configure it within the Streamelements Overlay website.
If you’re stuck, Zaytri made a whole walkthrough video to make setting up this extension super easy!
5. Direct Chat Messages Using Custom CSS
How do you use CSS to make Chat visible on screen?
1. Create a Browser Source with your popout chat URL. Your Twitch chat URL can be found by clicking on the cogwheel next to the Chat button and clicking Popout chat. Your Twitch chat URL looks like this: (https://www.twitch.tv/popout/yourusername/chat?popout=)
2. If you’re knowledgeable with CSS, you can use the code below as a template to add directly to your Browser Source. Tweak it as you’d like.
3. Make sure to crop and chroma key the chat as needed (Right-click -> Filters).
font-family can be changed with common fonts, haven’t tested more advanced font
change color # code to affect the color of chat messages
*/
span.message {
font-family: Verdana !important;
font-size: 20px;
color: #ffffff !important;
line-height: 25px;
}
/*
change font-size under .from to change size of username
change font-family as needed, I match with whatever I use for chat font
*/
span.from {
font-family: Verdana !important;
font-size: 25px;
}
/*
change #code for color of links in chat
use
a:hover {
color: #ff0000 !important;
}
and change the color as needed for changing colors when your mouse over the link in chat
*/
a {
color: #0ff !important;
}
/*
everything below here affects the transparent background. If you wish to change the overall color of the background change the entire “rgba(0, 0, 0, 0.4)” to a normal #code. The opacity is affected by the 0.4, 0.0 is more transparent, 1.0 is filled black, adjust as need in combination with chroma key filter.
*/
div#ember560.ember-view.ember-chat-container {
background-color: rgba(0, 0, 0, 0.4) !important;
}div#ember574.ember-view.ember-chat.roomMode {
background-color: rgba(0, 0, 0, 0.4) !important;
}div.chat-room {
background-color: rgba(0, 0, 0, 0.4) !important;
}.tse-scroll-content {
background-color: rgba(0, 0, 0, 0.4) !important;
Have we missed one? Tweet us @StreamerSquare.
