How to Add Streamer.bot Chat to Your Stream Overlay

If you're running automations through Streamer.bot and want your chat messages to appear visually on stream, you're connecting two separate systems: Streamer.bot's event handling and a browser-based overlay renderer. This guide explains how that connection works, what tools are involved, and what factors shape how your setup will actually perform.

What Is Streamer.bot and Why Does It Need an Overlay?

Streamer.bot is a locally-run automation tool that listens to events from platforms like Twitch and YouTube — chat messages, subscriptions, channel point redemptions, and more. It processes those events and can trigger actions in response.

What it doesn't do natively is render anything visually on screen. For that, you need an overlay — a browser source added inside OBS, Streamlabs, or a similar broadcasting tool. The overlay displays in your stream while Streamer.bot feeds it data in the background.

The Core Method: WebSocket Server + Browser Source

The standard way to connect Streamer.bot to an overlay is through its built-in WebSocket server.

Here's how the flow works:

1. Streamer.bot runs a local WebSocket server (typically on port 8080 by default)
2. Your overlay is an HTML/JavaScript file that connects to that WebSocket server
3. When a chat message arrives, Streamer.bot sends the event data through the WebSocket
4. The overlay's JavaScript receives it and renders it visually
5. OBS (or your broadcaster) loads the overlay as a Browser Source, making it visible on stream

This is a local connection — the overlay and Streamer.bot are both running on the same machine, so no external server is needed.

Step-by-Step: Setting Up the Connection 🔧

1. Enable the WebSocket Server in Streamer.bot

• Open Streamer.bot and go to Servers/Clients → WebSocket Server
• Enable the server and note the port number
• You can set an authentication password if your setup requires it

2. Create or Download an Overlay HTML File

Your overlay needs to be an HTML file that:

• Connects to ws://localhost:8080 (or your configured port)
• Listens for message events
• Parses the JSON data Streamer.bot sends
• Renders the message content using CSS and JavaScript

You can write this from scratch if you're comfortable with JavaScript, or use a pre-built overlay template shared by the Streamer.bot community. Many creators share open-source HTML overlay files specifically built for Streamer.bot's event format.

3. Add the Overlay as a Browser Source in OBS

• In OBS, add a new Browser Source
• Point it to your local HTML file using the file:/// path format (e.g., file:///C:/overlays/chat.html)
• Set the width and height to match your canvas resolution
• Enable "Refresh browser when scene becomes active" if you want it to reconnect cleanly

4. Test the Connection

With Streamer.bot running and your WebSocket server active, send a test message in your chat (or use Streamer.bot's built-in test triggers). The message should appear in your OBS preview through the browser source.

Alternative: Using a Third-Party Overlay Service

Some streamers prefer tools like StreamElements or Overlays.gg, which offer hosted chat widgets. These can be combined with Streamer.bot using its HTTP request or API actions, though the integration is less direct and introduces external dependencies. The native WebSocket method keeps everything local and lower-latency.

Key Variables That Affect Your Setup

Multi-PC and Remote Setups

If your streaming PC and gaming PC are separate, the overlay can still connect to Streamer.bot — but you'll need to change the WebSocket connection address in your overlay's JavaScript from localhost to the local IP address of the machine running Streamer.bot (e.g., 192.168.1.x). You'll also need to make sure your local network and firewall allow that connection.

Customizing the Chat Display

Once the core connection is working, the visual appearance is entirely controlled by your HTML/CSS. Common customizations include:

• Message fade-out timing — how long each message stays on screen
• Username color — pulling the chatter's Twitch color from the event data
• Font size and position — adjusted in CSS to fit your layout
• Emote rendering — requires additional logic to swap emote IDs for image URLs
• Filtering — ignoring bot messages or commands starting with !

The Streamer.bot event payload includes fields like displayName, message, color, and badges, giving you enough data to build a detailed, styled chat display. 💬

What Shapes Your Final Result

A streamer building a minimal chat ticker with basic CSS will have a very different experience from someone building an animated, emote-aware, filtered chat overlay with custom fonts and effects. Both are achievable with the same underlying connection method — but the complexity of your overlay file, your familiarity with JavaScript, and how your broadcast machine handles local WebSocket connections all determine how smoothly the build goes.

The technical path is consistent. How far you take it depends entirely on what your stream layout actually needs.