SE Widget Importer

Turn a StreamElements or Streamlabs chat overlay zip into one HTML file for OBS. No code copy/paste is needed.

Simple Setup

Choose the overlay zip or folder here.
Paste your SSN Session ID / Stream ID below.
Click Preview, then Download OBS HTML.
Add the downloaded HTML file to OBS as a Browser Source.

Do not add the zip or code to Social Stream Ninja. This page makes the OBS overlay file for you.

Start here: choose the overlay zip from the designer, or choose the folder/files if you do not have a zip.

Zip Files Folder

Your SSN Session ID / Stream ID

Recommended: paste your session ID before exporting. Then the downloaded HTML file can receive live messages without editing the URL.

Where do I find this?

Open the Social Stream Ninja extension popup.
Open Session Options.
Copy the value under Your unique session ID is below.
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

Waiting for overlay files.

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.