Overlay Template Quick Start

Pick a layout, add your session ID, and paste it into OBS.

1. Open The Template Gallery

Use the Templates Gallery when you want a ready-made chat look instead of building CSS from scratch.

Template Gallery showing search, filters, and template cards
Search or use the filter buttons, then pick a layout that is easy to read on your stream.

2. Add Your Session ID

Every overlay URL needs your session ID. Replace the placeholder with the same session used by your chat source and dock.

https://socialstream.ninja/sampleoverlay.html?session=YOUR_SESSION_ID

3. Preview The Look

Open the template URL in a browser first. If it looks right there, it should be easier to debug in OBS.

Sample overlay preview with a chat message, name, platform icon, and donation badge
This is the kind of overlay preview you should expect before adding it to OBS.

4. Add It To OBS

  1. In OBS, add a new Browser Source.
  2. Paste the template URL with your session ID.
  3. Set the width and height. A common start is 1920 by 1080.
  4. Click OK, then send a test message.

5. Confirm Chat Is Arriving

If the overlay is blank, test the dock before changing template settings.

https://socialstream.ninja/dock.html?session=YOUR_SESSION_ID
Dock page with chat messages received from multiple sources
If the dock is empty too, fix the chat source first. The template is waiting for messages.

Simple Fixes

  • Use the same session ID in the source, dock, and OBS.
  • Refresh the OBS browser source after changing the URL.
  • Keep the chat source page or desktop source window open.
  • Pick a high-contrast template if text is hard to read.

More details: OBS Quick Start.