How to Add Twitch Chat to Screen Overlay

Complete Step-by-Step Guide Using Chatis

Adding Twitch chat to your screen overlay is essential for creating engaging streams that keep viewers connected to your community. Whether you’re streaming gameplay, just chatting, or hosting events, displaying chat on screen helps viewers follow conversations and makes your stream more interactive.

In this comprehensive guide, we’ll walk you through how to add Twitch chat to your screen overlay using Chatis, a powerful and free browser source overlay that works with OBS, XSplit, and other streaming software.

What is Chatis?

Chatis is a fork of the popular jChat overlay tool that allows streamers to display their Twitch chat directly on screen. It’s completely free and offers extensive customization options to match your stream’s aesthetic.

Key Features of Chatis:

• Full emote support: BetterTTV, FrankerFaceZ, and 7TV emotes
• Auto-refresh: Automatic updates for 7TV emotes
• Username paints: Support for 7TV username colors
• Smooth animations: Configurable message animations
• Message fading: Automatic removal of old messages
• Bot filtering: Hide bot and command messages
• Custom fonts: Use system fonts or web fonts
• Responsive design: Works on all screen sizes

Prerequisites

Before getting started, make sure you have:

• A Twitch account and channel
• Streaming software (OBS Studio, XSplit, or similar)
• Basic knowledge of your streaming software’s browser source feature

Step-by-Step Guide: Adding Twitch Chat Overlay

Step 1: Access Chatis Website

1. Open your web browser and navigate to https://chatis.is2511.com/
2. You’ll see the main Chatis interface with various customization options

Step 2: Enter Your Twitch Channel Information

1. In the Channel field, enter your Twitch username (without the @ symbol)
2. Make sure to use your exact Twitch username as it appears in your channel URL

Step 3: Customize Your Chat Appearance

Basic Styling Options:

• Theme: Choose between light, dark, or custom themes
• Font: Select from available fonts or use a custom font from your system
• Font size: Adjust text size for better readability
• Chat width: Set the width of your chat overlay
• Message limit: Control how many messages appear on screen

Advanced Customization:

• Animation: Enable smooth animations for new messages
• Fade messages: Set messages to fade out after a specified time
• Hide bots: Filter out bot messages and commands
• Username colors: Enable or disable username coloring
• Emote settings: Configure BTTV, FFZ, and 7TV emote display

Step 4: Generate Your Browser Source URL

1. After customizing your settings, the URL will automatically update at the top of the page
2. Copy the complete URL – this is what you’ll use in your streaming software
3. The URL will look something like: https://chatis.is2511.com/?channel=yourchannelname&theme=dark&font=arial

Step 5: Add Browser Source to OBS Studio

For OBS Studio:

1. Open OBS Studio
2. In your scene, click the + button in the Sources panel
3. Select Browser Source from the list
4. Click Create New and give it a name (e.g., “Twitch Chat”)
5. Click OK

Configure Browser Source Settings:

1. URL: Paste the Chatis URL you copied earlier
2. Width: Set to 400-600px (adjust based on your layout)
3. Height: Set to 600-800px (adjust based on your layout)
4. Custom CSS: Leave blank unless you want additional styling
5. Shutdown source when not visible: Check this box
6. Refresh browser when scene becomes active: Check this box
7. Click OK

Step 6: Add Browser Source to XSplit

For XSplit:

1. Open XSplit
2. Click Add Source in your scene
3. Select Webpage from the media sources
4. Enter the Chatis URL in the URL field
5. Set appropriate width and height dimensions
6. Click OK

Step 7: Position and Resize Your Chat Overlay

1. In your streaming software, drag the chat overlay to your desired position
2. Resize using the corner handles to fit your stream layout
3. Common positions include:
   • Right side of the screen
   • Bottom overlay
   • Corner placement
   • Separate chat scene for full-screen chat

Step 8: Test Your Chat Overlay

1. Start a test stream or use your streaming software’s preview mode
2. Open your Twitch channel in another browser tab
3. Send a few test messages to ensure the overlay is working
4. Check that emotes display correctly
5. Verify animations and styling appear as expected

Pro Tips for Better Chat Overlays

Optimize for Readability

• Use high contrast between text and background
• Choose fonts that are easy to read on stream
• Adjust font size based on your stream resolution
• Consider your audience’s viewing devices (mobile vs desktop)

Manage Chat Flow

• Set appropriate message limits to prevent screen clutter
• Use fade timers to keep chat current
• Enable bot filtering for cleaner chat display
• Consider hiding commands during important stream moments

Styling Best Practices

• Match your overlay colors to your stream brand
• Use consistent styling across all overlays
• Test different themes to find what works best
• Consider seasonal or event-specific customization

Troubleshooting Common Issues

Chat Not Showing

• Verify your Twitch username is spelled correctly
• Check that your browser source URL is complete
• Ensure your streaming software allows browser sources
• Refresh the browser source if chat stops updating

Emotes Not Displaying

• Confirm you have the correct emote extensions enabled
• Check that BTTV, FFZ, or 7TV settings are configured properly
• Try refreshing the browser source
• Verify emote permissions on your channel

Performance Issues

• Reduce message limits if experiencing lag
• Disable unnecessary animations
• Check your streaming software’s hardware acceleration settings
• Consider lowering chat refresh rate for older systems

Advanced Customization Options

Custom CSS Styling

If you’re comfortable with CSS, you can add custom styling to further personalize your chat overlay:

• Custom fonts from Google Fonts
• Unique color schemes
• Modified message layouts
• Special effects and animations

Multiple Chat Displays

• Create different chat overlays for different scenes
• Use separate overlays for subscriber-only chat
• Set up moderation-specific chat displays
• Create highlight reels with chat replay

Conclusion

Adding Twitch chat to your screen overlay using Chatis is a straightforward process that can significantly enhance your streaming experience. The tool’s extensive customization options allow you to create a chat display that perfectly matches your stream’s aesthetic while providing viewers with an engaging way to follow conversations.

Remember to regularly test your chat overlay settings and adjust them based on your community’s needs. As your channel grows, you may want to experiment with different styling options and features to keep your stream fresh and engaging.

Start implementing these steps today, and watch as your stream becomes more interactive and community-focused. Your viewers will appreciate being able to follow chat conversations, and you’ll find it easier to engage with your audience during streams.

Frequently Asked Questions

Q: Is Chatis completely free to use? A: Yes, Chatis is completely free with no hidden costs or premium features.

Q: Can I use Chatis with streaming software other than OBS? A: Yes, Chatis works with any streaming software that supports browser sources, including XSplit, Streamlabs, and others.

Q: How often does the chat update? A: Chatis updates in real-time, displaying new messages as they appear in your Twitch chat.

Q: Can I hide specific users or types of messages? A: Yes, you can filter out bot messages, commands, and configure various message display options.

Q: Does Chatis work with mobile streaming? A: Chatis is designed for desktop streaming software, but the generated URL can be used in mobile apps that support browser sources.