Templates Gallery

Browse the complete visual overlay gallery, or explore custom templates and imports below.

Choose a look for your stream

Preview chat, featured-message, and alert overlays, then add your favorite to OBS or Streamlabs.

Why Use Custom Templates?

Ready to use, with room to customize

Professional Look

Give your streams a polished, professional appearance with custom-designed overlays that match your brand.

Better Engagement

Highlight viewer messages in an attractive way that encourages more audience participation.

Easy Setup

Just add your session ID to the template URL and add as a browser source in OBS or other streaming software.

Fully Customizable

Modify colors, animations, positions, and styles to perfectly match your stream's aesthetic.

Template Library

Find the perfect template for your stream

All Templates
Gaming
Minimal
Animated
Retro
Modern
YouTube Compatible

Themed Packages

Complete themed packages with documentation, sample images, and guides

Deuk's Theme
Complete Package

Deuk's Theme

A sophisticated, fully animated theme with customizable colors and smooth transitions. Perfect for gaming streams.

New
Windows 3.1 Theme
Retro Style

Windows 3.1 Theme

Nostalgic Windows 3.1 style chat overlay with classic window design and pixel-perfect detailing.

Neutron Theme
Modern Design

Neutron Theme

Clean, modern design with smooth animations and excellent readability. Customizable color schemes.

Simple Drop-in Templates

Ready-to-use templates that only require your session ID

Sample Template
Minimal

Sample Template

A clean, lightweight template with essential features. Perfect starting point for customization.

Pretty Template
Animated

Pretty Template

Elegant design with smooth animations and visual effects. Eye-catching yet not distracting.

t3nk3y's Theme
Gaming

t3nk3y's Theme

Bold, high-contrast theme designed for gaming streams with excellent visibility even in fast-paced content.

LuckyLootTube Liquid Glass Theme
Liquid Glass

LuckyLootTube's Theme

Sleek animated liquid-glass style chat overlay with smooth animations and cool emote rendering.

YouTube-CSS Compatible Templates

Templates that work with YouTube CSS styles

YouTube-CSS Template
YouTube Compatible

YouTube-CSS Template

Use CSS designed for YouTube with our YouTube-structured overlay page. Compatible with Septapus styles.

Developer Templates

Starting points for creating your own custom overlays

Bare Template
Developer

Bare Template

Minimal code needed to create your own overlay from scratch. Perfect for developers and LLM-assisted coding.

Sample Overlay
Developer

Sample Overlay Template

A more complete starting point with comments and documentation to help you build your own custom overlays.

Have a Template to Share?

Created an awesome template for Social Stream Ninja? Share it with the community by submitting a pull request to our GitHub repository.

Submit on GitHub

Use a StreamElements Chat Widget with Social Stream Ninja

This works with both the SSN Windows desktop app and Chrome extension—no code editing is required.

Confirm SSN Is Receiving Chat

Open your platform sources in the SSN app or extension, then send a test message. Continue only after it appears in the SSN dock.

Get the Original Widget Export

Use the ZIP, folder, or files supplied by the widget designer. A useful export normally contains HTML, CSS, JavaScript, fields/data, and assets. A screenshot or StreamElements overlay URL is not enough.

Open the Importer

Open the importer and choose the ZIP, folder, or files. It detects the widget parts and immediately shows a demo preview.

Open Widget Importer

Add Your SSN Session ID

Opening the importer from the SSN popup fills the session ID and password automatically. If you opened it directly, copy them from Session Options in the app or extension. You enter the session ID once in the importer; it is saved inside the downloaded file.

Choose Message History

If the imported widget provides compatible settings, use Message history to turn off timed removal or change how many messages stay on screen. This changes widget settings, not its code.

Test Before Downloading

Demo Preview checks the design with sample messages. Live Preview checks the session using real chat from the running SSN app or extension.

Download and Add It to OBS

Click Download OBS HTML. In OBS, add a Browser Source, enable Local file, and select the downloaded HTML file. Do not add the session ID or edit the URL in OBS. Keep SSN running while streaming; the importer and StreamElements may be closed.

Demo is blank

Review the detected files in the importer and use Advanced file selection if it chose the wrong HTML, CSS, or JavaScript.

Live Preview is blank

Confirm chat reaches the SSN dock and that the session ID and optional password match exactly.

OBS is blank

Use the downloaded HTML file—not the importer page, original ZIP, or StreamElements URL—then refresh the OBS Browser Source.

How to Use Templates

Follow these simple steps to get started

Choose Your Template

Browse the template library and select one that fits your stream style. Each template has a preview option to see how it looks before downloading.

Add Your Session ID

Replace YOURSESSIONID in the template URL with your actual Social Stream Ninja session ID found in the dashboard.

https://socialstream.ninja/themes/pretty.html?session=YOURSESSIONID

Add to OBS/Streamlabs

Add the modified URL as a Browser Source in your streaming software:

  1. In OBS, click the + under Sources and select "Browser"
  2. Name your source and click OK
  3. Paste your template URL with session ID
  4. Set width and height (recommended: 1920×1080)
  5. Click OK to add it to your scene

Customize Your Template

Personalize your overlay with custom CSS in one of these ways:

  • OBS Custom CSS: Add your CSS in the Browser Source properties
  • URL Parameter: Append &css=URL_TO_YOUR_CSS_FILE to your template URL
  • Base64 CSS: For inline CSS, use &b64css=YOUR_BASE64_ENCODED_CSS

Video Tutorial

Learn how to create a custom chat overlay with AI assistance

Quick Guide from the Video

  1. Find the sample overlay template (sampleoverlay.html)
  2. Copy the template code to your clipboard
  3. Use an AI assistant like Claude to help customize it
  4. Prompt the AI to modify the CSS for your preferred style
  5. Configure OBS to use your customized template
  6. Apply your custom CSS through OBS browser source settings