StreamElements Widget Importer

Choose the widget, confirm your SSN session, then download one ready-to-use HTML file for OBS. No coding or URL editing is needed.

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.

Open the full illustrated checklist

Choose the original export from the widget designer. It should contain HTML, CSS, JavaScript, fields/data, or assets. A screenshot or StreamElements overlay URL alone is not enough.

Choose ZIP Choose Files Choose Folder

Your SSN Session ID / Stream ID

Enter it once here. It is saved inside the downloaded file, so there is nothing to paste into OBS.

No session ID detected. Open this importer from the SSN popup to fill it automatically, or paste the ID from Session Options.

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 Export file name

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

Waiting for overlay files.

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.

Import an overlay to preview it.