Chat Overlay

Although not too common, especially with the recent 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”).TwitchAlerts Chat
  • 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.KapChat
  • RutonyChat
    • Cost $15
    • Includes 70+ themes, notifications for follows, subs, donations
    • Chat pollsRutonyChat
  • BraneBot
    • On your Console page, click the URL button under Brane Chat and paste it into your Browser Source.BraneChat
    • To make the chat transparent add &style=transparent to the end of your URL.
    • Automatically removes command inputs and bot command output.
    • Displays prestige level system.
  • Direct using Custom CSS
      • Create a Browser Source with your popout chat url (https://www.twitch.tv/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.