StreamElements-Chatdesigns in Social Stream Ninja

Was funktioniert?

Der Importer ist für eigene Chat-Widgets für StreamElements oder Streamlabs, einschließlich der Chatkomponente eines Designpakets. Du benötigst die Widget-Quelldateien. Es importiert weder ein ganzes StreamElements-Konto noch ein Design aus einer Overlay-URL.

Verwende entweder die SSN-Windows-Desktop-App oder Chrome-Erweiterung zur Chaterfassung. Das importierte Design zeigt diesen Chat in OBS an. Die Kompatibilität hängt vom Widget ab; Kontofunktionen wie Ziele, Treuepunkte, Shops und Meldungen können manuelle Anpassung benötigen.

1. Widget-Dateien besorgen

Beginne mit der ursprünglichen ZIP-Datei oder dem Ordner des Designers. Suche nach HTML, CSS und JavaScript sowie JSON für fields/data, Bildern und Schriften. Wähle ein Chat-Widget, wenn ein Paket mehrere Designs enthält.

Du hast nur einen Installationslink? Bitte den Designer um den Quellcode des Chat-Widgets oder verwende den Code aus deinem StreamElements-Editor für eigene Widgets. Ein Screenshot, Video oder eine Browserquellen-URL allein kann nicht umgewandelt werden.

Mein Widget-Code liegt im StreamElements-Editor

Öffne den Codeeditor des eigenen Widgets. Speichere jeden verfügbaren Teil als separate Klartextdatei: html.txt, css.txt, js.txt, fields.txt und data.txt. Kopiere die Inhalte, ohne Formatierung hinzuzufügen oder JSON zu ändern. Falls keine Datendatei verfügbar ist, verwendet der Importer die Standardwerte aus fields.

Wähle all diese Dateien zusammen über Dateien auswählen. Füge lokale Grafiken und Schriften hinzu; Ordner auswählen erhält Ordnerpfade. Siehe die Referenz zum StreamElements-Codeeditor zu Code- und Feldstruktur.

Importiere nur vertrauenswürdigen Code: Das Widget-JavaScript läuft in der Vorschau und im heruntergeladenen Overlay.

2. Importer öffnen

Suche im SSN-Menü unter dem Abschnitt Vorgestaltete Chat-Overlays nach der Option StreamElements-/Streamlabs-Chatdesign importieren. Dadurch wird deine aktuelle Sitzung eingetragen. Suche im Menü auch nach StreamElements oder öffne den Importer direkt.

Verwende ZIP auswählen, Dateien auswählen oder Ordner auswählen. Nach der Dateiverarbeitung wird eine Demovorschau geladen. Prüfe eventuelle Importwarnungen; verwende Erweiterte Dateiauswahl wenn die falschen Quelldateien erkannt wurden.

Chat-Importer mit drei Einrichtungsschritten neben Beispielnachrichten sowie Bedienelementen für Demo Preview, Live Preview und Download OBS HTML. — Der Importer mit Beispielwidget und Platzhalter-Sitzungs-ID. Dein importiertes Chatdesign hat sein eigenes Aussehen.

3. Verbinden und Vorschau ansehen

Lass SSN laufen und prüfe, ob eine echte Nachricht im Chat-Dock erscheint.
Prüfe im Importer die SSN-Sitzungs-ID / Stream-ID. Falls leer, kopiere sie aus Sitzungsoptionen in SSN. Dies ist nicht dein Twitch- oder YouTube-Benutzername.
Gib das optionale Sitzungspasswort ein, wenn du eines verwendest.
Verwende Demovorschau für Beispielnachrichten und dann Livevorschau und sende eine neue Chatnachricht in deinen Stream.
Wenn Nachrichtenverlauf erscheint, passe zeitgesteuertes Entfernen oder die maximale Nachrichtenanzahl an.

Demo Preview funktioniert ohne Sitzung und verwendet nur Beispielnachrichten. Live Preview benötigt eingehenden Chat aus SSN; eine leere Vorschau bedeutet allein nicht, dass die Verbindung fehlgeschlagen ist.

4. Herunterladen und zu OBS hinzufügen

Klicke auf OBS-HTML herunterladen und speichere sie an einem dauerhaften Ort.
Erstelle in OBS eine Browserquelle, aktiviere Lokale Datei, und wähle diese HTML-Datei aus.
Lege Breite und Höhe deines Chatbereichs fest und sende dann eine weitere Nachricht zur Prüfung.

Deine Sitzung ist bereits eingebettet; in OBS ist keine URL-Bearbeitung nötig. Verwende die heruntergeladene Datei als Browserquelle. Lass SSN und deine Chat-Erfassungsquellen laufen; Importer und StreamElements kannst du schließen.

Die exportierte Datei enthält deine Sitzungs-ID und das optionale Passwort. Halte sie privat. Importiere zum späteren Ändern von Sitzung, Passwort oder Widget-Einstellungen die ursprünglichen Dateien erneut und lade einen Ersatz herunter; aktualisiere dann die OBS-Quelle.

Wenn etwas nicht funktioniert

Kein Widget-Code gefunden: verwende die ursprünglichen Quelldateien. Bilder, fields/data allein und bereits umgewandelte SSN-Dateien sind kein Widget-Quellcode.
Demo ist leer oder sieht falsch aus: prüfe HTML/CSS/JS unter Advanced file selection. Stelle die passenden fields- und data-Dateien und alle Ressourcen bereit.
Demo funktioniert, Live Preview ist leer: sende eine neue Nachricht, prüfe das SSN-Dock und gleiche Sitzungs-ID und Passwort ab.
Live funktioniert, OBS ist leer: prüfe die ausgewählte lokale HTML-Datei, Abmessungen und Sichtbarkeit der Browserquelle und aktualisiere dann ihren Cache.
Schriften oder Grafiken fehlen: prüfe die Exportübersicht. Entfernte Ressourcen, die nicht eingebettet werden konnten, benötigen weiterhin eine erreichbare URL und Internetzugriff.
Nachrichten verschwinden: passe Message history an, falls das Widget diese Option bietet. Manche Widgets steuern das Entfernen in ihrem eigenen JavaScript.
Konto-APIs oder Plugins schlagen fehl: manche Widgets benötigen Codeänderungen. Verwende den Konvertierungs-Prompt des Importers oder bitte um Hilfe mit den ursprünglichen Widget-Dateien und einem Screenshot des Problems, ohne deine Sitzungszugangsdaten zu teilen.