StreamElements Chat Importer

Bring a custom chat skin to Social Stream Ninja and download an OBS overlay. Works with the SSN Windows desktop app and Chrome extension.

Setup guide & supported widgets ↗

1. Choose your chat widget

Drop a ZIP or files here, or browse below. Import only widget code you trust.

Use the ZIP or source files from the designer. A screenshot or StreamElements overlay URL alone is not enough.

Waiting for widget files. You can try Demo Preview without a session ID.

2. Connect Social Stream Ninja

Your SSN Session ID / Stream ID

Saved inside the download. No need to enter it in OBS.

Add a session ID to enable live chat and download. Demo Preview works without one.

Where do I find this?

Open the Social Stream Ninja Windows app or Chrome extension popup.
Open Session Options.
Copy the value under Your unique session ID is below.
If it was not filled automatically, paste it here. It is the same value used in overlay URLs after ?session=.

This is not your Twitch, YouTube, or Kick username.

Password, if used

3. Preview & download

Demo Preview uses sample messages. Live Preview listens to your real SSN session and requires the session ID above.

In OBS: add a Browser Source, enable Local file, then choose the downloaded HTML. Keep SSN running.

The downloaded file contains your session ID and password, if set. Keep it private.

Export file name

HTML file name

Imported files

Start-to-finish setup

Open SSN and confirm a real chat message appears in its dock.
Choose the widget zip, folder, or files below.
Check the SSN Session ID / Stream ID below. It is filled automatically when you open this importer from SSN and saved inside the downloaded file.
Use Demo Preview to check the design, then Live Preview to check real chat.
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 in OBS.

Keep the SSN app or extension running while streaming. You may close this importer and StreamElements after downloading.

If something is blank

Demo Preview is blank: check the detected files below or use Advanced file selection.
Demo works but Live Preview is blank: confirm chat reaches the SSN dock and the session ID/password exactly match.
Live Preview works but OBS is blank: select the downloaded HTML—not this importer or the original zip—and refresh the OBS Browser Source.
Fonts or artwork are missing: check the export summary for remote assets; some widgets still require internet access.

Advanced file selection

Use this if the importer picked the wrong source files.

HTML CSS JS Fields Data

What gets converted

Best fit: StreamElements or Streamlabs chat widgets with HTML, CSS, JS, fields, data, and local assets. SSN payloads are mapped into the SE-style event fields those widgets expect.

SSN `chatname`	SE-style `data.displayName`, `data.nick`
SSN `chatmessage`	SE-style `data.text`, `renderedText`
SSN `chatbadges`	SE-style `data.badges` where URLs or badge labels exist
SSN `type`	SE-style `service`
SSN `mid`, `id`, or `meta.messageId`	SE-style `data.msgId` for delete-message support
SSN `membership`, `subtitle`, badges, and role hints	SE-style subscriber, moderator, VIP, or broadcaster flags when detectable
SSN `hasDonation`, `donation`, and `contentimg`	SE-style `data.amount` and attachment image data where available

Known limits

Chat widgets are the main target; goals, alerts, loyalty, store, tips, and account API features are only shimmed if their code falls back cleanly.
Widgets that require private StreamElements or Streamlabs API tokens, overlay-store state, full jQuery plugins, or platform emote APIs may need manual edits.
Local packaged images, fonts, audio, and video are embedded; remote URLs stay remote and may still fail if the source blocks OBS/browser access.
The export is a single HTML file with the session embedded, but ?session=... and &password=... in the OBS URL still override it.
Common live overrides: &limit=30, &direction=top, &direction=bottom, and &hideAfter=20.

Fallback AI conversion prompt

If the importer fails, use this prompt with the widget files and screenshot. Full prompt file: streamelements-importer-prompt.md

You are converting a StreamElements or Streamlabs chat overlay into a standalone Social Stream Ninja overlay.

Inspect the provided HTML, CSS, JS, fields/data JSON, assets, and screenshot. Also inspect this repo's sampleoverlay.html, dock.html, docs/customoverlays.md, and docs/event-reference.html.

Create one standalone HTML file that preserves the original visual design but removes the StreamElements/Streamlabs runtime. Use classic browser scripts, no module imports, and keep Chrome 80 compatibility.

Resolve {{fieldName}} placeholders from data JSON first, then fields defaults. Inline local packaged assets where practical. Keep the OBS background transparent.

Read SSN traffic from event.data.dataReceived.overlayNinja through the hidden VDO.Ninja iframe bridge and also support &server / &server2 WebSocket mode when practical. Require ?session=YOUR_SESSION_ID for live use.

Map incoming SSN fields: chatname to display name, chatmessage to message HTML/text, chatimg to avatar, type to platform/service, chatbadges to badge images/labels, hasDonation/donation to amount/support text, membership/subtitle to subscriber/member text, contentimg to media attachment, and mid/id/messageId/message_id/meta.messageId to message IDs.

Preserve moderation controls: deleteMessage, delete.id, delete.chatname, clearAll, action: clear, timeoutUser, and blockUser. Store data-mid, data-chatname, and data-source-type on each rendered message.

Skip metadata-only payloads that have no message text, media, membership, subtitle, or donation value. Cap rendered DOM rows with a default message limit and support ?limit=, ?direction=top|bottom, ?hideAfter=, ?demo, and ?testbg for local visual testing.

Test viewer, VIP/mod/subscriber, donation, badge, media, delete, clear, empty-message, and high-volume message cases before finishing.

Your chat skin will appear here.
Choose a widget ZIP or source files to start.