Overlay Customization

Start with templates, then use URL options and CSS only where needed.

Fastest Path: Pick A Template

Templates are the easiest way to get a polished overlay without writing CSS from scratch.

Templates gallery with search, category filters, and template previews
Search and filter templates, then copy the generated overlay URL into OBS.

Customization Levels

LevelUse ForWhere
Template controlsQuick visual changes.Templates Gallery.
URL parametersBehavior, labels, filters, scale, limits.Overlay URL query string.
OBS Custom CSSSmall style overrides for one OBS source.OBS Browser Source properties.
Hosted/self-hosted CSSReusable styles across overlays.&css= or &b64css=.
Custom overlayFully custom behavior.Custom overlays guide.

Common URL Options

featured.html?session=YOUR_SESSION&scale=1.1&hidesource&limit=10
  • session connects the overlay to the right chat room.
  • scale changes size without rewriting CSS.
  • limit controls how many messages stay visible on supported pages.
  • onlytype and hidetype filter platform types on supported pages.
  • css and b64css load custom styling.

Preview Before OBS

Sample overlay preview showing styled Social Stream chat message output
Open the final URL in a normal browser before testing OBS.

Common Fixes

  • Looks right in browser, wrong in OBS: remove OBS Custom CSS and refresh the browser source.
  • Font missing: use a direct HTTPS font file and check CORS/hotlink rules.
  • Everything is invisible: check opacity, color, filters, and whether the page needs a featured/event payload.
  • URL changes do nothing: refresh the OBS source or replace the URL.