Current version: v1.3.0 — ⬇ Download install.sb · see CHANGELOG.md for what's new.

Shoutouts that actually show the streamer. Type !so somestreamer (or get raided) and one of their best Twitch clips plays right on your stream — with their name and the game they were last playing — while a shoutout message goes to chat.

(shown in test mode — a real shoutout plays the streamer's actual top clip in the video area)

Designed for non-technical streamers. No developer accounts, no API keys, no auth pages: Streamer.bot is already connected to Twitch, and that's all this needs. Setup is importing one file and adding one browser source — and all the settings live in a point-and-click page (config.html) with a live preview and a connection tester, so there's nothing to hand-edit. About 5 minutes.

• Streamer.bot running and connected to your Twitch broadcaster account.
• OBS (or any software that supports browser sources).

1. Download install.sb (clicking the link downloads it).
2. In Streamer.bot, click the Import button at the top. Drag install.sb into the dialog (or open it in Notepad and paste the contents). Click Import.
3. You now have a SoClip - Shoutout action with the !so and !soclip commands already bound.

The overlay listens to Streamer.bot over a local WebSocket.

1. In Streamer.bot go to Servers/Clients → WebSocket Server.
2. It should say it's running on 127.0.0.1:8080 (the default). If it isn't running, click Start Server and tick Auto Start.
3. Using a different port (or address)? Note it — you'll enter it in the settings page in Step 4.
4. If Authentication is enabled, either untick it, or note the password — you'll enter it in the settings page in Step 4.

1. Download overlay.html, config.js and config.html (clicking the links downloads them). Put all three together in one folder that can stay put (e.g. next to your OBS scene collection — they must not move later).
2. In OBS: Sources → + → Browser, name it SoClip.
3. Tick Local file and pick overlay.html. Set Width and Height to your canvas size (usually 1920 × 1080).
4. (Recommended) In the source's properties, set Control audio via OBS so the clip sound shows up in your mixer.

If your WebSocket server uses the defaults (port 8080, no Authentication) and you're happy with the card in the center, skip this step — you're done.

Otherwise, double-click config.html — it opens in your browser as a friendly settings form:

• it fills itself in from your current config.js
• ⚡ Test connection checks your port & password against Streamer.bot on the spot — green check or a plain-English reason
• a live preview of the card updates as you pick position, size, accent color and font
• 💾 Save config.js writes a perfectly-formed file — save it over the old one, nothing to type, no syntax to break

Then tell OBS to reload it: right-click the SoClip source → Properties → Refresh cache of current page.

Prefer a text editor? config.js works the same as ever — every setting has a plain-English comment:

port: 8080,          // the WebSocket server's port
password: "",        // only if "Authentication" is ticked -- put the password between the quotes
host: "127.0.0.1",   // only if Streamer.bot runs on a different computer
position: "center",  // center, top, bottom, top-left, top-right, bottom-left, bottom-right
width: 480,          // card width in pixels (240-1280)
volume: 0.85,        // clip volume: 0.0 (mute) to 1.0 (full)
accent: "#9146ff",   // frame + name color -- any CSS color, e.g. "#ff4757", "gold"
font: "",            // any Google Font name ("Poppins", "Bangers") or installed font
test: false          // true = loop a fake clip so you can position the card

Make it match your brand: accent recolors the frame, banner line, avatar ring and highlights — any CSS color works. font swaps the banner typeface: give it any name from fonts.google.com (it loads automatically, nothing to install) or any font already installed on your PC. Set test: true while you experiment so you can see changes after each refresh without touching chat.

Change what you need, save, then tell OBS to reload it: right-click the SoClip source → Properties → Refresh cache of current page.

To position and size the card without spamming your chat, set test: true — a fake clip loops every few seconds while you drag things around. Set it back to false (and refresh again) when you're happy.

Typos are okay: if a lost quote or comma breaks config.js, a small badge appears in the overlay's top-left corner saying so, instead of your settings being silently ignored. (Files written by config.html can't have this problem.)

file:///C:/path/to/overlay.html?port=8990&password=hunter2&position=bottom-right&test=1

In your Twitch chat, type:

!so <some channel that has clips>

You should see: a shoutout message in chat, and a few seconds later their clip slides in on stream, plays once, and slides out.

1. In Streamer.bot, select the SoClip - Shoutout action.
2. In the Triggers panel: right-click → Add → Twitch → Raid → Raid.

That's it — when someone raids you, their clip plays automatically. The same action handles both; no copies needed.

Open the action's C# sub-action (double-click it) — the top of the file is a small config block:

Change values, click Compile, close. Done.

Who can use !so? Everyone, by default. You probably want mods only: Streamer.bot Commands tab → so → set Permitted users/groups.

Heads-up on clip playback: Twitch has no official "give me the clip video file" API. SoClip resolves clips the same way Twitch's own web player does, which the community has relied on for years. It even self-heals when Twitch rotates their web client id (it re-discovers the current one automatically — this has already happened once and SoClip handles it). But if Twitch ever changes the mechanism more deeply, clips may temporarily stop playing; shoutouts gracefully fall back to chat-only and the [SoClip] log line says why. If that happens, check this repo for an update.