Chat Scene Creator

Create and manage chat scenes for different parts of your stream

Docs • ← Back to Overlay Hub • Skip to Chat →

Chat Scenes

Select or Create a Chat Scene

Basic Information

Scene Name

Sync Token

Channel Connection

Twitch Channel

YouTube Channel ID / Handle

Chat Scene OBS URL

Paste this URL into your OBS Browser Source:

chat.html?scene=example

Live Preview

Background:

Form changes stream into the preview in real-time.

No chat scene selected. Create a new chat scene or select one from the list.

Skip the Chat Scene Creator →

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.
For Instant Background Sync: Leave "Shutdown source when not visible" and "Refresh browser when scene becomes active" unchecked in Browser Source properties.

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.

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.

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; }

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.