Settings
Add to OBS
You opened the builder from a file on this PC, so the Local file setup comes first. The URL setup further down works too.
Loaded the settings.js from this folder.
Browser source with a URL Recommended
This is a file:/// URL because the builder is running from disk. OBS accepts it in the URL box with Local file unticked, and because the settings stay in the URL, each source can have its own.
- In OBS, click + under Sources and choose Browser.
- Leave Local file unticked and paste the URL into URL.
- Set Width to 450 and Height to 700 (the preview size).
- Untick Shutdown source when not visible and Refresh browser when scene becomes active. Both reconnect and wipe the chat on every scene switch.
- Leave Custom CSS at its default and click OK.
To change it later, paste the URL into “Edit an existing overlay” above, adjust, then replace the URL in OBS.
OBS “Local file” with settings.js
Local file mode can’t take URL parameters, so the settings go in a settings.js file next to overlay.html.
- Get the overlay files: on GitHub choose Code → Download ZIP, and unzip it somewhere permanent.
- Save
settings.jsin the same folder asoverlay.html. - In OBS, add a Browser source, tick Local file and pick
overlay.html. - Set Width to 450 and Height to 700.
- Untick Shutdown source when not visible and Refresh browser when scene becomes active.
- Whenever you change settings.js, open the source’s properties and click Refresh cache of current page.
Every Local file source in that folder shares one settings.js. For different setups, use a file:///…/overlay.html?… URL in URL mode instead; OBS accepts those in the URL box too.