Twitch Chat Overlay HD

App Features ✨

• Free to use
• Easy setup
• High Resolution Text
• Customizable font-color & background-color
• No ads or watermarks
• Doesn't collect any data

Content

• Installation
• Customization settings
• Credits

Installation

1. Open your OBS program & add a new Browser source to your scene. image here

2. Set a name for the source (ex. Chat Overlay HD) and click OK.

3. Set the URL to https://www.twitch.tv/popout/USERNAME/chat

4. replace USERNAME with your Twitch username.

5. Set the width to 600 and the height to 600. (adjust to your liking)

6. Delete the code from within the Custom CSS section.

7. Copy all code from the chat.css file and paste it into the Custom CSS section. Link to the file here -> chat.css

• OPTIONAL: Hide your chatbot messages. Follow the instructions at the bottom of the chat.css file to learn how to hide chatbot messages.

8. Click OK to save and close the window.

9. Last step! Right-click on the Chat Overlay HD source and click on Interact. The chat will appear in a new window - click on the cogwheel and select Chat Appearance. Set font-size to "Biggest" and set Replies in Chat to "Minimum". Close windows to save. Crop the bottom of the chat to remove the Twitch chat bar. Done!

Customization settings

You can customize the appearance of the chat overlay by changing the CSS code in the chat.css file. Use https://rgbcolorpicker.com to find the color you want.

• Font Color: You can change the font color by changing the color property. (default: #ffffff)

• Background Color: You can change the background color by changing the background-color property. (default: rbga(0, 0, 0, 0))

• Font Size: You can change the font size by changing the font-size property. (default: 28px)

  • don't go below 28px or it will lose text clarity in OBS.

• Link Color: You can change the color of links posted in chat by changing the color property of the a selector. (default: #ab80eb - Twitch purple)

Credits

Author:

• Twitch @JujocoCS