Entwerfen Sie Ihre eigenen Social Stream-Overlays

Eigenes Overlay in 5 Schritten erstellen

1. Overlay auswählen das du ändern möchtest.
2. Laden Sie die Quell-ZIP-Datei herunter, entpacke es und kopiere die HTML-Datei des Overlays.
3. Kopie bearbeiten selbst oder bitte ein KI-Werkzeug darum.
4. Kopie in OBS öffnen mit deinen SSN-Sitzungseinstellungen in der Adresse.
5. Ausprobieren mit dem echten Auslöser des Overlays.

Zu änderndes Overlay auswählen

Du kannst Farben, Schriften, Layout, Grafiken und Animationen eines Overlays ändern. Die HTML-Datei ist die Seite. Die OBS-URL verweist darauf und fügt deine Sitzungs- und Anzeigeeinstellungen hinzu.

Jeder Overlay-Typ reagiert auf andere Daten. Chatseite, hervorgehobene Nachricht und Umfrage verwenden unterschiedliche Eingaben. Öffne die Designanleitung für deinen Typ:

Möchtest du etwas Fertiges? Probiere die Overlay-Galerie oder Vorlagengalerie. Du möchtest einen Chat-Skin von StreamElements oder Streamlabs nutzen? Folge der Importanleitung. Dieser Export hat eigene Einrichtungsschritte.

Laden Sie die Dateien herunter

1. Beta-Quellcode als ZIP herunterladen. Oder öffne den Beta-Repository und wähle Code → ZIP herunterladen.
2. Entpacke es in einen dauerhaften Ordner, zum Beispiel C:\SSN\social_stream-beta\. Bearbeite nicht innerhalb der ZIP-Datei. SSN muss nicht neu installiert werden.
3. Finde die Overlay-Datei (siehe Tabelle oben). Erstelle daneben eine Kopie, zum Beispiel poll.html → my-poll.html. Für ein Theme wie themes/featured-styles/featured-modern.html, lege die Kopie im selben Ordner ab.
4. Öffne die Kopie in einem Text- oder Codeeditor. Speichere sie als .html, nicht .html.txt.

social_stream-beta/
    poll.html
    my-poll.html
    currency.js
    js/
    libs/
    shared/
    thirdparty/
    media/
    sources/images/
    themes/
        featured-styles/
            featured-modern.html
            my-featured.html
    docs/
        event-reference.html

Sitzungslink beibehalten

Starte SSN, verbinde eine Quelle und prüfe, ob das ursprüngliche Overlay funktioniert. Kopiere dann den vollständiger Link aus dem SSN-Werkzeug für dieses Overlay.

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

Der Wert nach session= ist deine SSN-Sitzung. Das ist nicht dein YouTube-Kanal, Twitch-Name, Dateiname oder Umfragetitel. SSN und deine Seite müssen dieselbe Sitzung und dasselbe Passwort verwenden. Lass SSN laufen: Overlays empfangen nur Daten. Sie erfassen selbst keinen Chat.

Wenn deine Kopie leer bleibt, prüfe zuerst den Originallink. Manche Seiten fragen nach fehlenden Einstellungen, andere bleiben verborgen oder leiten weiter. Die richtige Sitzung im Link erspart das Raten.

Datei in OBS öffnen

Öffne die bearbeitete Datei direkt vom Computer. Kein Server nötig.

1. Ziehe deine HTML-Kopie in Chrome oder Edge. Kopiere die Adresse. Sie beginnt mit file:///.
2. Kopiere aus deinem funktionierenden SSN-Overlay-Link alles ab ? weiter. Füge es am Ende der Dateiadresse ein. Dadurch bleiben Sitzung, Passwort, Einstellungen und vorhandene # -Teil.
3. Öffne diese zusammengesetzte Adresse zum Testen im Browser.
4. Erstelle in OBS eine Browserquelle. Lass Lokale Datei deaktiviert. Füge die vollständige Adresse ein in URL und stelle Breite und Höhe ein.

Beispiel: Dieser SSN-Link…

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

…wird bei einer heruntergeladenen Umfragekopie unter Windows zu:

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

Unter macOS beginnt es mit file:///Users/..., unter Linux meist file:///home/.... Das Kopieren aus dem Browser behandelt Leerzeichen und Schrägstriche für dich.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>My local overlay launcher</title>
<p>Opening the local overlay...</p>
<script>
var copiedLink = new URL("https://socialstream.ninja/poll.html?session=YOUR_SESSION");
var localPage = new URL("./my-poll.html", window.location.href);
localPage.search = copiedLink.search;
localPage.hash = copiedLink.hash;
window.location.replace(localPage.href);
</script>
</html>

OBS erklärt Datei-/URL-Modi, Größen, eigenes CSS und Aktualisierung in seiner Browser-Quellenreferenz.

Design ändern oder KI darum bitten

Halte Logo, Schriftdateien, Markenfarben, Leinwandgröße und eine visuelle Vorlage bereit. Eine Webseite kann normalerweise keine Schriften oder Bilder von der Festplatte eines anderen Computers laden.

KI-Eingabeaufforderung

Nutze den typspezifischen Prompt in der jeweiligen Designanleitung oder beginne mit diesem. Gib der KI deine kopierte Datei und die geladenen Stile und Skripte.

Customize [copied overlay filename] to match [reference/design].
Canvas: [width x height]. Placement: [position]. Colors/fonts: [details].
Use the existing page and its supporting files, rather than replacing its
connection and event logic. Read docs/event-reference.html and the relevant
overlay design guide. Preserve query parameters, session/password, URL
fragments, bridge labels, transport channels, settings, and controls.
Use CSS first. Keep relative paths and package all executable dependencies
locally. Use classic scripts compatible with Chrome 80.
Keep operator controls, private links, and credentials off the audience view.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server. Return the edited files and assets,
file URL and OBS setup steps, and tests
for this overlay's real trigger. Use session placeholders in shared examples.
Explain any behavior changes separately from the design edits.

Eingehenden Chat nicht zu Code werden lassen

Namen, Nachrichten, Titel, Beträge und Links stammen von Zuschauern und externen Diensten. Behandle sie als Text, niemals als Code. Bereinige sie dort, wo dein Renderer sie auf der Seite einfügt.

<!-- Example for a copied page at the repository root. -->
<script src="./libs/objects.js"></script>
<script src="./shared/utils/chatHtml.js"></script>
<script>
function renderChatBody(element, data) {
    var message = String(data.chatmessage == null ? "" : data.chatmessage);
    if (data.textonly) {
        element.textContent = message;
    } else {
        element.innerHTML = SocialStreamChatHTML.sanitize(message);
    }
}
// Names, amounts, titles, and other plain fields use textContent:
// nameElement.textContent = String(data.chatname || "");
</script>

• Wenn die Seite bereits einen Bereiniger hat, behalte ihn. Füge keinen zweiten hinzu.
• Passe bei Dateien in Unterordnern die Skriptpfade an.
• Füge keine rohen Namen in Attributzeichenfolgen oder rohe Farben in Stil-Markup ein. Prüfe Stilwerte, bevor du Eigenschaften einzeln setzt.
• Auch bereinigtes HTML darf nicht als JavaScript ausgeführt oder als KI-Anweisung verwendet werden.

Weitere Hintergründe: OWASP-Anleitung zu sicheren Ausgabepunkten und HTML-Bereinigung.

Schrittweise testen

Dateien, die du deiner KI geben solltest

Gib der KI die eigene Overlay-Datei, die geladenen CSS-/JS-Dateien und diese Dateien. Die Ereignisreferenz allein erklärt weder die Umfragesteuerung noch den Layoutcode jedes Overlays.

Probleme beheben

Behebe zuerst das kleinste bestätigte Problem. Eine Umgestaltung sollte keine Änderungen an Erfassungsskripten oder neue Ereignisfelder benötigen. Wenn du einen öffentlichen Fork teilst, füge seine Assets hinzu und lasse private Startseiten weg.