🐱 Erdbeerkatze
Schläfrige Glückskatze, Erdbeermilch und rosafarbenes Briefpapier. Mit passenden Stilen für Chat, hervorgehobene Nachrichten und Benachrichtigungen.
Paket ansehen und verwenden
Social Stream NinjaSocial Stream NinjaEntdecke die vollständige visuelle Overlay-Galerie, oder entdecke unten eigene Vorlagen und Importe.
Ein laufender Feed aus deinen verbundenen Plattformen. Beginne mit einer Chatvorlage oder das Dock.
Eine Nachricht, die du im Dock auswählst. Wähle ein Featured-Design für Interviews, Fragenrunden oder Grüße.
Feiere Follows, Mitgliedschaften und Spenden. Konfiguriere Animationen und Audio in den SSN-Benachrichtigungseinstellungen. Anleitung für Benachrichtigungen
Finde die passende Vorlage für deinen Stream
Ein Look für drei Browser-Quellen. Wähle in der Galerie Zusammenpassendes Set verwenden, gib deine Sitzungsdaten ein und kopiere dann die Links für OBS. Bewegung ist optional.
Schläfrige Glückskatze, Erdbeermilch und rosafarbenes Briefpapier. Mit passenden Stilen für Chat, hervorgehobene Nachrichten und Benachrichtigungen.
Paket ansehen und verwenden
Ein fröhlicher Corgi auf einer himmelblauen Postkarte. Mit passenden Stilen für Chat, hervorgehobene Nachrichten und Benachrichtigungen.
Paket ansehen und verwenden
Ein Märchenfrosch in einem friedlichen Wald. Mit passenden Stilen für Chat, hervorgehobene Nachrichten und Benachrichtigungen.
Paket ansehen und verwenden
Ein Astronautenhase schwebt durch fliederfarbenen Sternenstaub. Mit passenden Stilen für Chat, hervorgehobene Nachrichten und Benachrichtigungen.
Paket ansehen und verwenden
Ein kleiner Drache mit leuchtendem Zauberkristall. Mit passenden Stilen für Chat, hervorgehobene Nachrichten und Benachrichtigungen.
Paket ansehen und verwenden
Waschbär mit Kopfhörern und Schallplatte in Mint und Pflaumenviolett. Mit passenden Stilen für Chat, hervorgehobene Nachrichten und Benachrichtigungen.
Paket ansehen und verwenden
Freundlicher Geist, leuchtender Kürbis und mitternächtliches Pflaumenviolett. Mit passenden Stilen für Chat, hervorgehobene Nachrichten und Benachrichtigungen.
Paket ansehen und verwenden
Rentier mit Schal und festliches Tannengrün. Mit passenden Stilen für Chat, hervorgehobene Nachrichten und Benachrichtigungen.
Paket ansehen und verwendenVollständige Designpakete mit Dokumentation, Beispielbildern und Anleitungen
Ein ausgefeiltes, vollständig animiertes Design mit anpassbaren Farben und sanften Übergängen. Ideal für Gaming-Streams.
Nostalgisches Chat-Overlay im Windows-3.1-Stil mit klassischem Fensterdesign und pixelgenauen Details.
Klares, modernes Design mit sanften Animationen und hervorragender Lesbarkeit. Anpassbare Farbschemata.
Sofort nutzbare Vorlagen, die nur deine Sitzungs-ID benötigen
Eine klare, schlanke Vorlage mit den wichtigsten Funktionen. Perfekter Ausgangspunkt für Anpassungen.
Elegantes Design mit sanften Animationen und visuellen Effekten. Auffällig, ohne abzulenken.
Kräftiges, kontrastreiches Design für Gaming-Streams mit hervorragender Sichtbarkeit auch bei schnellen Inhalten.
Elegantes animiertes Chat-Overlay im Liquid-Glass-Stil mit sanften Animationen und schöner Emote-Darstellung.
Vorlagen, die mit YouTube-CSS-Stilen funktionieren
Verwende für YouTube entworfenes CSS mit unserer Overlay-Seite in YouTube-Struktur. Kompatibel mit Septapus-Stilen.
Ausgangspunkte zum Erstellen eigener Overlays
Minimaler Code zum Erstellen eines eigenen Overlays von Grund auf. Ideal für Entwickler und LLM-unterstütztes Programmieren.
Ein vollständigerer Ausgangspunkt mit Kommentaren und Dokumentation, der dir beim Erstellen eigener Overlays hilft.
Du hast eine tolle Vorlage für Social Stream Ninja erstellt? Teile sie mit der Community, indem du einen Pull Request an unser GitHub-Repository sendest.
Auf GitHub einreichenZum ersten Mal importieren? Vollständige Chatdesign-Anleitung lesen zum Finden von Widget-Dateien, unterstützten Formaten, OBS-Einrichtung und Fehlerbehebung.
Dies funktioniert mit der SSN-Windows-Desktop-App und der Chrome-Erweiterung — keine Codebearbeitung erforderlich.
Öffne deine Plattformquellen in der SSN-App oder Erweiterung und sende dann eine Testnachricht. Fahre erst fort, wenn sie im SSN-Dock erscheint.
Verwende die ZIP-Datei, den Ordner oder die Dateien des Widget-Designers. Ein brauchbarer Export enthält normalerweise HTML, CSS, JavaScript, Felder/Daten und Ressourcen. Ein Screenshot oder eine StreamElements-Overlay-URL reicht nicht.
Öffne den Importer und wähle die ZIP-Datei, den Ordner oder die Dateien. Er erkennt die Widget-Bestandteile und zeigt sofort eine Demovorschau.
Widget-Importer öffnenWenn du den Importer über das SSN-Popup öffnest, werden Sitzungs-ID und Passwort automatisch eingetragen. Wenn du ihn direkt geöffnet hast, kopiere sie aus Sitzungsoptionen in der App oder Erweiterung. Du gibst die Sitzungs-ID einmal im Importer ein; sie wird in der heruntergeladenen Datei gespeichert.
Wenn das importierte Widget kompatible Einstellungen bietet, verwende Nachrichtenverlauf um zeitgesteuertes Entfernen auszuschalten oder die Anzahl sichtbarer Nachrichten zu ändern. Dies ändert Widget-Einstellungen, nicht den Code.
Demovorschau prüft das Design mit Beispielnachrichten. Livevorschau prüft die Sitzung mit echtem Chat aus der laufenden SSN-App oder Erweiterung.
Klicke auf OBS-HTML herunterladen. Füge in OBS eine Browser-Quelle hinzu und aktiviere Lokale Datei, und wähle die heruntergeladene HTML-Datei. Füge die Sitzungs-ID nicht hinzu und bearbeite die URL nicht in OBS. Lasse SSN während des Streams laufen; Importer und StreamElements können geschlossen werden.
Prüfe die erkannten Dateien im Importer und verwende die erweiterte Dateiauswahl, falls falsches HTML, CSS oder JavaScript gewählt wurde.
Prüfe, ob Chat im SSN-Dock ankommt und Sitzungs-ID sowie optionales Passwort exakt übereinstimmen.
Verwende die heruntergeladene HTML-Datei — nicht die Importer-Seite, ursprüngliche ZIP-Datei oder StreamElements-URL — und aktualisiere dann die OBS-Browser-Quelle.
Folge diesen einfachen Schritten zum Einstieg
Durchsuche die Vorlagenbibliothek und wähle eine passende Vorlage für deinen Stream. Vergleiche Designs in der Screenshot-Galerie; die meisten integrierten Vorlagen funktionieren direkt über eine URL, ohne Download.
Ersetze YOURSESSIONID in der Vorlagen-URL durch deine tatsächliche Social-Stream-Ninja-Sitzungs-ID aus den Sitzungsoptionen der SSN-App oder Erweiterung. Ergänze das optionale Passwort, wenn deine Sitzung eines verwendet.
https://socialstream.ninja/themes/pretty.html?session=YOURSESSIONID
Füge die geänderte URL als Browser-Quelle in deiner Streaming-Software hinzu:
Passe dein Overlay auf eine dieser Arten mit eigenem CSS an:
&css=URL_TO_YOUR_CSS_FILE an deine Vorlagen-URL an&b64css=YOUR_BASE64_ENCODED_CSSBeginne mit einem funktionierenden Overlay und ändere dann sein Aussehen.
OBS-Browser-Quelle verwenden Eigenes CSS für Farben, Abstände und Typografie. Behalte die ursprüngliche SSN-URL und Verbindung.
Hast du einen StreamElements-Chat-Widget-Export? StreamElements-Konverter öffnen, prüfe die Vorschau und lade dann das OBS-HTML herunter. Verwende die ursprüngliche ZIP-Datei oder Dateien, keinen Screenshot oder eine Overlay-URL. Einrichtung siehe unten.
Kopiere eine funktionierende Ausgangsvorlage und bearbeite HTML, CSS und JavaScript. Schnellstart · Entwickleranleitung · Ereignisfelder
Beginne für auslösergesteuertes Verhalten mit dem Event-Flow-Editor und Benachrichtigungseffekt-Regeln bevor du ein neues Overlay schreibst.
Wähle einen Ausgangspunkt, kopiere den Prompt und ersetze die Designdetails in Klammern. Hänge Quelldateien an, wenn deine KI keine Links lesen kann. Lasse private Sitzungs-ID und Passwort aus dem Gespräch heraus.
Ein komplexeres Widget konvertieren? Vollständigen StreamElements-/Streamlabs-Konvertierungsprompt verwenden.
Erfahre, wie du mit KI-Unterstützung ein eigenes Chat-Overlay erstellst