Chat Scenes
Select or Create a Chat Scene
Basic Information
?
A recognizable name for this instance
?
Unique identifier used in the URL parameter
Chat Scene URL
Copy this URL to use in your OBS Browser Source:
file:///path/to/chat.html?scene=example
OBS Setup Steps:
- In OBS, add a Browser Source.
- Paste the URL above into the URL field.
- IF YOU CAN'T PASTE: Uncheck "Local file" option.
- Set Width: 320px and Height: 600px (recommended).
- Click "OK".
⚙️ Configuring in OBS: This creator only manages the scene's URL. All chat settings (channel, theme, colors, fonts, etc.) are configured inside OBS:
- Right-click -> interact, or click the Interact button with the browser source selected in the monitor/preview.
- In the interaction window:
- Enter your Twitch channel name and click "Connect".
- Hover over the chat and click the settings gear (⚙️) to customize appearance (themes, colors, fonts, etc.).
- Settings are saved automatically within OBS for that specific source.
To preview your chat scene, add it to OBS as a browser source.
No chat scene selected. Create a new chat scene or select one from the list.
OBS Setup & Configuration
Chat Scene URL
Copy this URL to use in your OBS Browser Source:
file:///path/to/chat.html?scene=example
Steps to Add in OBS:
- In OBS Studio, right-click in the Sources panel and select Add → Browser.
- Name your source (e.g., "Twitch Chat - Gaming").
- Paste the URL copied above into the URL field.
- IF YOU CAN'T PASTE: Uncheck "Local file" option.
- If running locally, adjust the file path in the URL to match where you saved this overlay on your computer.
- Set Width: 320 and Height: 600 (recommended, adjust as needed).
- Click "OK" to add the browser source.
- Position and resize the chat overlay as needed in your scene.
Configuring Your Chat Overlay in OBS:
- To connect and customize the overlay: Right-click the Browser Source in OBS and select Interact.
- In the interaction window:
- Enter your Twitch channel name and click "Connect".
- Hover over the chat area and click the settings gear icon (⚙️) in the top-right corner.
- Use the settings panel to select themes, customize colors, fonts, opacity, display mode (window/popup), and other options.
- Settings are saved automatically within OBS for that specific browser source.
Troubleshooting Tips
▼- Chat not connecting: In the OBS "Interact" window, double-check the channel name and ensure you have an internet connection.
- Settings not saving: Settings are saved in OBS's browser cache. Ensure OBS has permissions to write cache files. Clearing OBS cache might reset settings.
- Text too small/large: Adjust the font size in the overlay's settings (via "Interact") or scale the Browser Source itself in OBS.
- Empty overlay: Right-click the Browser Source in OBS, select "Interact", and enter your channel name to connect.
- Chat not refreshing: Try right-clicking the Browser Source in OBS and selecting "Refresh". If issues persist, try recreating the source.
Advanced OBS Settings
▼For optimal performance, configure these additional settings in your OBS Browser Source:
- Check "Shutdown source when not visible" to save resources.
- Check "Refresh browser when scene becomes active" for the most up-to-date chat.
- Set "Custom CSS" to remove scrollbars if needed:
body { overflow: hidden; }
Customization Tips
▼- Overlaying on content: Use the Tranparent theme, or adjust the opacity slider features while setting the "none" border option for seamless integration with your gameplay.
- Font size: Keep at least 12px for best readability.
- Positioning: Place chat where it won't overlap important game elements, or use popup mode for temporary chat message appearance.