💬 Chat Overlay
Display your chat messages directly on your stream with a customizable overlay.
Overview
The Chat Overlay shows chat messages on your stream, useful for:
- Full-screen gameplay
- VOD viewers who can't see chat
- Multi-platform chat unification
Features
- Real-time chat display
- Multi-platform support (Twitch, Kick)
- Customizable fonts and sizes
- Text effects (stroke, shadow)
- Platform selection
Settings
Chat Settings
| Setting | Description | Default |
|---|---|---|
| Font | Text font style | 7 (Roboto) |
| Size | Text size | 3 |
| Stroke | Text outline thickness | 2 |
| Shadow | Text shadow depth | 2 |
| Platforms | Which platforms to show | Twitch |
Setup Instructions
Step 1: Configure Chat Settings
- Go to Utilities → Chat Overlay in your dashboard
- Select your font and size preferences
- Adjust stroke and shadow for readability
- Choose which platforms to display
Step 2: Add to OBS
- Copy the Chat Overlay URL
- In OBS, add a Browser Source
- Paste the URL
- Set dimensions: 400 x 800 (adjust to fit)
- Position where you want chat to appear
Step 3: Test
- Send test messages in chat
- Verify they appear on the overlay
- Adjust styling as needed
Styling Options
Font Selection
Choose from various fonts:
- Clean, readable options
- Different styles for different vibes
- Select by number (1-10+)
Size
Adjust text size:
- Smaller = more messages visible
- Larger = easier to read
- Balance based on your layout
Stroke (Outline)
Add a text outline:
- 0 = no outline
- Higher = thicker outline
- Helps readability on varied backgrounds
Shadow
Add drop shadow:
- 0 = no shadow
- Higher = more pronounced shadow
- Adds depth and readability
Platform Selection
Show messages from specific platforms:
| Platform | Status |
|---|---|
| Twitch | ✅ Supported |
| Kick | ✅ Supported |
| YouTube | 🔜 Coming Soon |
Multi-Platform Display
Enable multiple platforms to unify chat:
- Messages from all enabled platforms appear together
- Platform badges/icons indicate source
- Great for simulcasting
Customization Tips
For Gaming Streams
- Position in corner (less intrusive)
- Smaller size, larger stroke
- Semi-transparent background if available
For Just Chatting
- Larger, more visible
- Central or prominent position
- Match your brand colors
For Readability
- High contrast colors
- Adequate stroke/shadow
- Appropriate font size
Troubleshooting
Chat Not Showing
| Issue | Solution |
|---|---|
| No messages | Check platform is selected |
| Delayed | Normal slight delay, refresh if excessive |
| Wrong platform | Update platform settings |
Styling Issues
| Issue | Solution |
|---|---|
| Hard to read | Increase stroke/shadow |
| Too small | Increase size setting |
| Wrong font | Change font number |
Connection Issues
| Issue | Solution |
|---|---|
| Disconnected | Refresh browser source |
| Missing messages | Check platform connection |
Best Practices
- Test Visibility: Make sure chat is readable over your content
- Don't Block Content: Position where it doesn't interfere
- Match Your Style: Consistent with your brand
- Consider VOD: Help replay viewers see chat
- Mobile-Friendly: Ensure readable on small screens
FAQ
Q: Does the overlay show all messages? A: Yes, all messages from enabled platforms appear.
Q: Can I filter certain messages? A: Not in the overlay itself; use moderation to filter chat.
Q: Can I change colors? A: Currently uses default colors; custom colors coming soon.
Q: Does it show emotes? A: Yes, platform emotes display as images.
Q: How many messages does it show? A: Scrolls automatically; recent messages always visible.
Q: Can I remove my own messages? A: All messages display; no per-user filtering.