Multiple channels and separate overlays

1. Combine capture in one session

Add the intended source chats in SSN and confirm one fresh message from each reaches the same unfiltered Streaming Chat Dock. Keep that Dock as your operator view.

Copy generated links so their session, password, version, and server settings remain intact. Add each audience view as a separate OBS Browser Source. Give OBS sources descriptive names such as Twitch chat and YouTube chat.

2. Split rolling chat by platform

For rolling chat, make two copies of your generated dock.html URL. Append these options to the respective copies:

For example, with a default connection:

https://socialstream.ninja/dock.html?session=YOUR_SESSION_ID&onlyfrom=twitch&hidemenu

Use onlyfrom and hidefrom for these pages. Do not assume an option such as onlytype from another overlay works here. Use youtubeshorts separately when the capture reports that type. See Source types.

3. Split selected messages

For selected rather than rolling chat, duplicate your generated featured.html link and add &onlyfrom=twitch to one copy and &onlyfrom=youtube to the other. Keep the operator Dock open to select messages.

The current Featured Chat onlyfrom accepts one source type. The Dock’s comma-separated example above should not be copied into that field on Featured Chat.

4. Two channels on the same platform

onlyfrom=twitch selects Twitch as a platform, not a particular Twitch channel. Channel names and stream titles are metadata, not interchangeable URL filter names. Add &showchannelname to show channel names when supplied by the source.

For advanced Dock filtering, &filtertid=123 accepts the numeric originating tab ID; comma-separated IDs are supported. Inspect an actual captured payload to obtain its tid (see Event reference and Commands & API). Do not use a platform channel ID here. Tab IDs can change when sources reopen, and sources without a matching tab ID may be excluded. This is a Dock option, not a general Featured Chat channel filter.

For fully independent productions, use separate capture instances/profiles with distinct sessions and open only each production’s intended sources there. Giving one overlay a different session without matching capture will leave it idle. An overlay’s label identifies a page for routing; it is not a channel filter.

5. Verify each audience view

1. Send a fictional Twitch test message and a fictional YouTube test message into an isolated session using Create test messages.
2. Confirm both appear in the operator Dock, and each rolling overlay shows only its intended source.
3. Feature each message and test the clear button. Check all visible featured pages after switching platforms.
4. Repeat with a real message from each of your own connected sources, since synthetic messages cannot establish actual source-tab IDs.

If a view is blank, remove its filter temporarily. If chat returns, check the exact source type or tab ID. If it remains blank, use session and routing troubleshooting. Changing an OBS source’s name does not update its saved URL.

6. Chat and alerts in one browser tab

Use Combine overlays to layer existing overlay URLs in one tab or one OBS Browser Source. This is useful when reading chat on a phone during an IRL stream.

1. Paste your generated Streaming Chat Dock URL into the bottom layer and your Multi-Stream Alert Box URL into the top layer. Keep the session, password, and connection options in both links.
2. Leave Transparent SSN background checked. Allow taps and scrolling on the chat layer; leave it unchecked for alerts so they do not block chat interaction.
3. Select Preview, then Show QR code and scan it with your phone’s camera. Or select Copy combined link to paste the result into a browser source. The combined view has no setup controls.

You can add up to eight URLs and use the arrow buttons to move a layer behind or in front of another. Layers fill the browser by default. Expand Size and position on a layer to set its width, height, left offset, and top offset in pixels (for example, 450) or percentages (for example, 100%). Blank width and height fill the browser; blank offsets start at the top-left corner. Reset to fullscreen clears that layer’s placement. Each overlay retains its own content and settings.

For a left chat column on a 1920×1080 OBS Browser Source, set the chat layer’s width to 450, height to 1080, left to 0, and top to 0. Other layers can stay fullscreen. For Hype above chat and Featured Chat shifted right, use the OBS layout recipe below. Pixel sizes stay fixed when the browser changes size; percentages follow the browser’s width or height.

Use the editable link to reopen the setup with your URLs and placement filled in. To edit a combined link later, add ?edit=1 before its #.

Your links and layer options are saved automatically in this browser, including unfinished setups. Reopen Combine overlays to continue editing, or select Clear saved setup to start over. Browser storage may be unavailable or temporary in private browsing.

The combined link and QR code contain the complete layout and URLs. Set up on desktop, scan once on mobile, then bookmark the combined view. Opening it also saves that setup in the phone’s browser. Changes on desktop do not automatically update an older link: copy or scan the new link after editing. This feature does not sync settings through your session ID.

Keep combined links and QR codes as private as the individual overlay links. SSN capture must still be running, and the phone must be able to reach the servers used by the original URLs. A localhost or 127.0.0.1 address points to the device opening the link. Very long URLs may exceed QR capacity; the combined link can still be copied.

OBS recipe: a left chat column with fullscreen effects

You do not need CSS for this layout. Each layer is its own browser area. Set the overall OBS Browser Source to 1920×1080, then use these values under each layer’s Size and position. Enter just the numbers, without commas or “px”. Add the layers in this order, bottom first:

The first 80 pixels are reserved for Hype, leaving a 450-pixel-wide chat column below it. To let chat occupy the full height behind Hype instead, set Live Chat’s height to 1080 and top to 0. Other scene sizes need different pixel values.

1. Paste your complete overlay URLs. Copy them from your existing Browser Source properties, keeping the session, password, styles, and connection settings. Leave Transparent SSN background checked. OBS cropping, transforms, filters, and its Custom CSS field are not part of the URL and do not transfer.
2. Center Hype within the column. On its hype.html URL, set align=center (replace an existing align=left or align=right, and remove alignright if present). With a URL that already has ?session=..., append &align=center. An optional compact starting style is &combineall&hidetitle&style=compact&scale=0.75; replace existing values rather than duplicating them. Increase the Hype layer’s height if your chosen style needs more room.
3. Keep Featured Chat clear of the chat column. Set Left = 450 and Width = 1470 together: 450 + 1470 = 1920. Moving a 1920-wide layer right by 450 would cut off its right edge. Featured Chat still places its message near the bottom of its own area. To center shorter messages within that area, add &center to its featured.html URL. For centered messages across the whole scene instead, use Left = 0, Width = 1920, and &center.
4. Keep NinjaBacker above Featured Chat. Paste its viewer overlay URL as the last layer, with its existing right-entry animation setting. The combiner controls its area and layer order; the NinjaBacker overlay controls its animation and internal placement. Its background must be transparent and its site must allow embedding. This optional layer was not part of the four-overlay example test.
5. Preview at 1920×1080. Send a test chat message containing emojis, feature a message from your Dock, and enable Hype data in SSN. Regular chat alone does not select a Featured Chat message. Confirm each overlay works separately if it remains empty.
6. Copy the new combined link into OBS. Set that Browser Source’s own Width to 1920 and Height to 1080. The combiner’s preview size does not set OBS dimensions. Fit the new source to your scene without cropping. After every layout edit, copy the new combined link again; an older OBS link will keep its old layout.

Performance: one Browser Source still runs each embedded overlay and its connections. Combining reduces the number of OBS sources, but does not guarantee lower CPU or memory use. Close the browser preview when finished and compare OBS performance with the old sources disabled. M1 macOS/OBS performance and your specific NinjaBacker URL still need checking on your setup. You can keep Live Chat separate and combine only the other overlays if that works better.

If a layer is blank or covers chat

• Open each original URL separately first. Alerts normally remain empty until an event arrives; combining pages does not capture new events.
• Automatic transparency supports dock.html, featured.html, multi-alerts.html, and minecraft.html. Other pages need their own transparent background settings. Some external sites block embedding entirely.
• A transparent layer can still block taps. Turn off Allow taps and scrolling on any layer above the chat that does not need interaction.
• Mobile browsers may require interaction with a page before playing sound. If needed, enable interaction for that layer and tap it; browser autoplay restrictions still apply. Check audio on the actual phone before relying on it.