Zum Inhalt springen
Craftium

Anleitung: Comic Chat einrichten

Etwa fünf Minuten. Du brauchst ein kostenloses StreamElements-Konto und die Dateien aus deinem Etsy-Download.

Bevor es losgeht

  • Ein kostenloses StreamElements-Konto, angemeldet mit dem Kanal, auf dem du streamst (Twitch, YouTube oder Kick).
  • Dein Etsy-Download, entpackt. Im Ordner deines Stils liegen vier Dateien: html.txt, css.txt, js.txt und fields.txt. Bundle gekauft? Dann den Ordner bundle nehmen.
  • Ein Computer mit Chrome, Edge oder Firefox. Auf dem Handy funktioniert der StreamElements-Editor schlecht.

Widget in StreamElements einrichten

  1. Overlays öffnen

    Auf streamelements.com anmelden und im Menü links auf Overlays klicken.

  2. Neues Overlay anlegen

    Auf New overlay klicken. Es öffnet sich ein neuer Tab. 1080p (1920 × 1080) wählen und auf Start klicken. Die kurze Einführungstour schließen und dem Overlay einen Namen geben, zum Beispiel „Comic Chat“.

  3. Custom Widget hinzufügen

    Auf Add widget (das +) klicken, dann Static / Custom und Custom widget. Oben links erscheint ein kleiner Kasten.

  4. Code-Editor öffnen

    Das neue Widget ist ausgewählt: links auf Open editor klicken. Du siehst fünf Reiter: HTML CSS JS Fields Data.

  5. Alle vier Reiter ersetzen

    Für HTML, CSS, JS und Fields jeweils:

    1. Die passende Datei aus dem Download öffnen (zum Beispiel html.txt für den Reiter HTML), alles markieren und kopieren.
    2. In den Reiter klicken, alles mit Strg + A (Mac: Cmd + A) markieren und löschen.
    3. Den Dateiinhalt einfügen.

    Data so lassen, wie es ist. Dann auf Done klicken.

    Alle vier ersetzen, auch wenn ein Reiter harmlos aussieht. StreamElements füllt CSS und JS mit einem Beispiel-Widget. Bleibt das stehen, werden die Blasen weiß und winzig.

  6. Kasten anpassen

    Ein neues Custom Widget ist nur 290 × 180 Pixel groß. Links Position, size and style öffnen, Breite 600 und Höhe 900 eintragen. Dann den Kasten dorthin ziehen, wo dein Chat stehen soll.

    Jede Größe geht: Alles bleibt im Kasten, auch die großen Comic-Effekte. Kleinerer Kasten, weniger Nachrichten.

  7. Speichern und testen

    Oben rechts auf Save klicken. Dann in den Widget-Einstellungen auf Test: show a message klicken. Eine Comic-Blase erscheint.

    Die Testknöpfe gehen erst nach dem ersten Speichern. Du kannst auch einfach in deinen eigenen Chat schreiben.

Overlay in OBS einbinden

  1. In deiner Overlay-Liste auf StreamElements das Menü … des Overlays öffnen und Copy URL wählen. Diesen Link niemandem zeigen: Er enthält einen Schlüssel zu deinem Konto.
  2. In OBS Studio unter Sources (Quellen) auf + klicken und Browser wählen. Den Link als URL einfügen, Breite 1920 und Höhe 1080 eintragen, also so groß wie das Overlay.
  3. Shutdown source when not visible (Quelle herunterfahren, wenn nicht sichtbar) und Refresh browser when scene becomes active (Browser aktualisieren, wenn Szene aktiv wird) ausgeschaltet lassen. Sonst lädt der Chat bei jedem Szenenwechsel neu und vergisst seine Nachrichten.
  4. Chat in mehreren Szenen? Dieselbe Quelle dort mit Add Existing (Vorhandene hinzufügen) einfügen, statt eine neue anzulegen. Eine Quelle, eine Chat-Verbindung.

Streamlabs Desktop: Add Source → Browser Source, gleicher Link, gleiche Einstellungen.

Einstellungen

Im Overlay-Editor von StreamElements auf das Widget klicken. Die Einstellungen stehen links. Nach Änderungen auf Save klicken.

EinstellungWirkung
Comic styleNur im Bundle: Pop Art, Manga oder Neon. Jederzeit umschaltbar.
Language of the labelsSprache für NEU IM CHAT!, GELÖSCHT und die Abzeichen: Deutsch, English, Español, Português oder Français.
Size (%)60 bis 160. Macht alles im Kasten größer oder kleiner.
Max. messages on screenWie viele Blasen gleichzeitig sichtbar sind (Standard 8).
Hide messages afterSekunden, bis eine Blase von selbst geht. 0 = sie bleibt, bis neue Nachrichten sie verdrängen.
Max. new messages per secondFür volle Chats und Raids (Standard 4). Weitere Nachrichten warten kurz.
Show badges / avatarsAbzeichen für Streamer, Mod, VIP und Abo; Avatare, wo die Plattform sie liefert.
Calm modeRuhiger Modus: keine Blitze, kein Flackern, für lichtempfindliche Zuschauer.
Hide these usersNamen mit Komma getrennt oder einer pro Zeile.
Hide commands / known botsNachrichten, die mit ! beginnen, und Bots wie Nightbot oder Streamlabs (beides standardmäßig an).
Shared Chat messagesNachrichten aus anderen Kanälen beim Twitch Shared Chat zeigen oder ausblenden.
Also show test messages in OBSStandardmäßig aus, damit Tests nie live im Stream erscheinen.

Hilfe

Es erscheint nichts
  • Alle vier Reiter ersetzt und auf Save geklickt?
  • Kastengröße auf 600 × 900 gestellt, nicht mehr 290 × 180?
  • OBS-Browserquelle auf 1920 × 1080 und mit dem Link des richtigen Overlays?
  • In OBS die Eigenschaften der Quelle öffnen und Refresh cache of current page (Cache der aktuellen Seite aktualisieren) klicken.
  • Dein StreamElements-Konto ist mit dem Kanal angemeldet, auf dem du streamst.
Die Blasen sind weiß oder winzig, die Schrift stimmt nicht

Im Reiter CSS steht noch das Beispiel von StreamElements. Den Editor erneut öffnen, alle vier Reiter ersetzen und speichern.

Der Testknopf tut nichts

Erst einmal speichern, dann noch mal versuchen. Testnachrichten erscheinen nur im Editor. Für OBS Also show test messages in OBS einschalten.

Blasen werden am Rand abgeschnitten

Den Kasten größer ziehen oder Size (%) verkleinern.

Nach dem Szenenwechsel ist der Chat leer

In den Eigenschaften der OBS-Quelle Shutdown source when not visible und Refresh browser when scene becomes active ausschalten.

Bots oder Befehle erscheinen

Hide commands und Hide known bots prüfen. Weitere Bots unter Hide these users eintragen.

Zu viel Blitzen für meine Zuschauer

Calm mode einschalten. Die Blasen bewegen sich weiter, aber nichts blitzt.

Immer noch nicht?

Schreib uns über Etsy-Nachrichten oder an craftium.berlin@gmail.com. Nenne deinen Stil, dein Streaming-Programm und was du siehst; ein Bildschirmfoto vom Editor hilft. Schick uns nie deinen Overlay-Link.

Update einspielen

Kommt eine neue Version, bekommst du die neuen Dateien. Deine Einstellungen bleiben erhalten:

  1. Das Overlay in StreamElements öffnen, auf das Widget klicken, dann Open editor.
  2. HTML, CSS, JS und Fields durch die neuen Dateien ersetzen, genau wie in Schritt 5.
  3. Data nicht anfassen: Dort stehen deine Einstellungen.
  4. Auf Done und Save klicken. Die Widget-Einstellungen einmal öffnen und noch einmal speichern.

Aktuelle Version: 1.0.0