How to Show Chat on Stream

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.

Reasons to Show Chat

• Splash screens
  • Intro scene
  • AFK screen
  • Talking with chat
• YouTube videos
  • Highlights – chat reaction
  • Playthroughs – people can follow who you were talking to
• Poker streamers or other interactive streamers who run a delay on their cast

Cons to Showing Chat

• Can take away valuable screen space, potentially blocking the game or making it look too cluttered
• 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.
• 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

Ways to Show Chat

• TwitchAlerts
  • TwitchAlerts has a section called Chat Box that will very easily allow you to display chat on your stream using Browser Source. Read: How to Set Up Browser Source
  • Simply add the 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”).
• KapChat by Nightdev
  • Click the install button for the streaming software you use.
  • You’ll be walked through a step by step guide, configuring your options, and then getting a url to add to Browser Source.
• RutonyChat
  • Cost $15
  • Includes 70+ themes, notifications for follows, subs, donations
  • Chat polls
• Direct using Custom CSS
  • 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=)
  • 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.
  • Make sure to crop and chroma key the chat as needed (Right-click -> Filters).
  /*change font-size as needed
  font-family can be changed with common fonts, haven’t tested more advanced fonts
  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.