Show the conversation with Streamlabs Chat Box.
Viewers watching a replay cannot see your chat unless you put it in the video. Streamlabs Chat Box places messages on your scene in a style that matches your brand and stays readable.
Three ways to place chat on screen
Side column
A tall strip along one edge. It suits games where the action stays in the centre of the screen.
Bottom ticker
A wide, short area under the gameplay. Good for just-chatting streams with a large webcam.
Floating corner
A small box that fades older messages. The least intrusive choice for fast, busy games.
Connect Streamlabs Chat Box as a browser source
Copy the widget URL
Open Chat Box in your dashboard and copy the private link. Treat it like a password and never post it publicly.
Create a browser source
In your broadcasting software add a new browser source and paste the link into the URL field.
Match width and height
Set the source size to the numbers shown in the dashboard so text does not stretch.
Position and lock
Drag the box to its place on your scene, then lock it so it cannot move during the stream.
The options that change how chat reads
Open each group to see what it controls and a sensible first value.
Font and size
Choose a clean sans-serif and start at 28 pixels. Text that looks big on your monitor is usually just right on a phone.
Message hide delay
Messages can disappear after a set time. Thirty seconds keeps the box tidy without removing replies too quickly.
Badges and emotes
Subscriber badges and emotes add personality. Turn them off only if the box becomes too cluttered.
Ignored accounts
Hide messages from your bots and any account you do not want shown, so commands do not fill the screen.
Background and shadows
A soft dark backdrop keeps white text readable on bright scenes. Use transparency so the game still shows through.
Style the Streamlabs Chat Box with a few lines of CSS
Paste the snippet into the custom code field. It rounds the message bubbles, softens the background and highlights the username.
.message {
background: rgba(10, 23, 30, 0.72);
border-radius: 14px;
padding: 8px 14px;
margin-bottom: 8px;
}
.name {
color: #ffd479;
font-weight: 700;
}
.text {
color: #ffffff;
font-size: 26px;
}
Recommended chat box dimensions by scene type
| Scene | Width × height | Font size |
|---|---|---|
| Gameplay with side chat | 400 × 900 | 26–28 px |
| Just chatting | 1920 × 260 | 30 px |
| Fast action in a corner | 520 × 420 | 24 px |
Streamlabs Chat Box FAQ
Why is my chat box empty?
Make sure your channel is connected in the dashboard and that somebody has actually written in chat. Refreshing the browser source also helps.
Can I hide bot commands from the chat box?
Yes. Add the bot account and the command prefix to the ignore list, and those messages will not appear on screen.
Does the chat box work with the alert box on one scene?
Yes. They are separate sources, so place each one where it does not overlap the other.
How do I make the text easier to read?
Increase the font size, add a semi-transparent background and keep the contrast high against your game.
Will custom CSS break after an update?
Basic selectors like name and message stay stable. If a style stops working, preview it again and adjust the selector.
Let your whole audience see the chat
Pick a layout, paste the link into your scene and your chat is part of the show.
Open Chat Box