Chat Scene Creator

Create and manage chat scenes for your stream.

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

Chat Scenes

Scene list stored in

This browser only

Optional. Keeps your scenes on every computer you use.

Select or Create a Chat Scene

Basic Information

Scene Name

Sync Token

Channel Connection

Twitch Channel

YouTube Channel ID or Handle

Chat Scene OBS URL

Paste this URL into your OBS Browser Source:

chat.html?scene=example

Live Preview

Background:

Changes in this form update the preview in real time.

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

Skip the Chat Scene Creator →

OBS Setup and 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 the Sources list and select Add → Browser.
Enter a name for your source (Example: "Twitch Chat - Gaming").
Paste the copied URL into the URL field.
If you cannot paste: Clear the Local file checkbox.
If you run the overlay locally, change the URL path to the saved file location on your computer.
Set Width to 320 and Height to 600. Adjust these values if necessary.
Select OK to add the browser source.
Move and resize the chat overlay in your scene.
For background live sync: Do not select "Shutdown source when not visible" and "Refresh browser when scene becomes active" in Browser Source properties.

Configure Your Chat Overlay in OBS

To open the configuration controls, right-click the Browser Source in OBS and select Interact.
In the interaction window:
- Enter your channel name and select Connect.
- Move your pointer over the chat area and select the settings gear icon () in the top-right corner.
- Use the settings panel to select themes, change colors, choose fonts, and set display modes.
OBS saves these settings automatically for this browser source.

Chat does not connect: In the OBS Interact window, verify the channel name and make sure that your computer is connected to the internet.
Settings do not save: OBS saves settings in the browser cache. Make sure that OBS has permission to write cache files. If you clear the OBS cache, OBS resets your settings.
Text size is incorrect: Change the font size in the overlay settings in the Interact window, or scale the Browser Source in OBS.
Overlay is empty: Right-click the Browser Source in OBS, select Interact, and enter your channel name to connect.
Chat does not update: Right-click the Browser Source in OBS and select Refresh. If the problem continues, delete and create the source again.

To optimize performance, configure these settings in your OBS Browser Source:

To reduce system load, select Shutdown source when not visible.
To load recent messages when scenes switch, select Refresh browser when scene becomes active.
To hide scrollbars, add this code to Custom CSS:
body { overflow: hidden; }

Overlay on gameplay: Select the Transparent theme, or set the border to None and reduce the background opacity.
Font size: Use a font size of 12px or larger for readability.
Positioning: Place chat where it does not cover game elements, or use popup mode to show messages temporarily.