Zum Inhalt springen
Craftium

Anleitung: Comic-Check-In 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.
  • Dein Etsy-Download, entpackt. Die Dateien liegen im Ordner comic-checkin: vier Dateien html.txt, css.txt, js.txt und fields.txt im Ordner deines Stils, beim Bundle mit Stil-Umschalter in comic-checkin/bundle.
  • Ein Computer mit Chrome, Edge oder Firefox. Auf dem Handy funktioniert der StreamElements-Editor schlecht.

Stempelkarte in StreamElements einrichten

  1. Overlays öffnen

    Auf streamelements.com anmelden und links auf Overlays klicken. Du nutzt schon unseren Comic Chat, das Glücksrad oder den Alarm? Dann kommt der Check-In ins selbe Overlay, weiter mit Schritt 3.

  2. Neues Overlay anlegen

    Auf New overlay klicken, 1080p (1920 × 1080) wählen und Start. Die Einführungstour schließen und dem Overlay einen Namen geben.

  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: die passende Datei öffnen (zum Beispiel html.txt), alles kopieren, in den Reiter klicken, mit Strg + A (Mac: Cmd + A) alles markieren, löschen und einfügen. Data so lassen und auf Done klicken.

    Alle vier ersetzen, auch wenn ein Reiter harmlos aussieht. StreamElements füllt CSS und JS mit einem Beispiel-Widget.

  6. Kasten einstellen

    Ein neues Custom Widget ist nur 290 × 180 Pixel groß. Position, size and style öffnen und den Kasten dorthin legen, wo die Karten erscheinen sollen, zum Beispiel 800 × 450 unten im Bild.

    Jede Größe geht: Die Karte passt sich in den Kasten ein und wird nie abgeschnitten. Size inside the widget box und Position inside the box machen sie kleiner oder setzen sie nach oben oder unten.

  7. Speichern und testen

    Auf Save klicken. Dann Test: check-in, Test: full card oder Test: top 5.

    Testknöpfe gehen erst nach dem ersten Speichern und nur im Editor. Für OBS Test buttons also work in OBS einschalten. Sie speichern nie etwas, es landen also keine Testnamen in deinen Top 5.

Deine Stempelkarte

Check-in: standardmäßig mit !checkin oder !lurk im Chat. Die Wörter änderst du unter Check-in command und Lurk command, leer = aus. Keyword anywhere in a message zählt auch Nachrichten wie hi chat. Who can check in: alle, Abos, VIPs oder Mods.

Kanalpunkte (Twitch): Im Creator-Dashboard von Twitch Viewer Rewards → Channel Points → Manage Rewards öffnen und eine eigene Belohnung mit dem Namen Check-in anlegen. Das Widget reagiert auf diesen Namen (Name of the channel points reward, mehrere mit Komma). Kanalpunkte brauchen Twitch Affiliate oder Partner.

Einmal je Stream: How often ist einmal je Stream oder einmal je Abklingzeit in Stunden. Ein neuer Stream beginnt nach Hours without any chat (Standard 4). Zweiter Stream am selben Tag? Schreib !card newstream.

Karte, Ränge und Serie: Stamps per card 3 bis 20, eigener Card title und Text when a card is full. Ranks: eine Zeile je Rang, Stempelzahl und Name, zum Beispiel 5 Stammgast. Die Serie zählt Streams in Folge, nicht Tage; Streak jokers retten einen verpassten Stream.

Bonus-Stempel: Auch Abos, Geschenk-Abos, Bits, Trinkgeld, Follows und Raids können einen Stempel geben, mit Mindestwert für Bits und Trinkgeld. Standardmäßig alles aus.

Chat-Befehle: Zuschauer schreiben !card (eigene Karte) und !card top (Top 5). Du und deine Mods: !card give Name 3, !card set Name 12, !card reset Name, !card resetall yes, !card newstream, !card hide und !card show. Ausgeblendet bleibt auch nach einem Neustart von OBS ausgeblendet.

Deine Daten: Die Stempel liegen in deinem StreamElements-Konto. Umzug in ein neues Overlay: Export data klicken, den Text aus dem Editor kopieren, im neuen Widget bei Import data einfügen, speichern und das Feld danach leeren.

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.
  3. Für den Stempel-Ton Control audio via OBS (Audio über OBS steuern) einschalten: Dann haben die Karten einen eigenen Regler im Audio-Mixer.
  4. Shutdown source when not visible und Refresh browser when scene becomes active ausgeschaltet lassen, sonst lädt das Widget bei jedem Szenenwechsel neu und wartende Karten gehen verloren.

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

Weitere 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, die Stempel bleiben.
Language of the labelsDeutsch, English, Español, Português oder Français, mit passenden Standard-Rängen.
Color themeKlassische, Nacht- oder Pastellfarben deines Stils.
Stamp design / Own stamp imageStern, Herz, Blitz oder Haken, oder ein Bild aus deiner StreamElements-Mediathek.
Seconds per card2 bis 15 Sekunden; eine volle Karte bleibt etwas länger.
Show profile picturesAus Kanalpunkten, Abos und Follows; ein gezeichneter Avatar, wenn keins da ist.
Calm modeKeine Blitze, kein Flackern, kein Wackeln; die Karten bewegen sich trotzdem.
Who can use !card and !card topAlle, Abos, VIPs, Mods oder nur du. Mod-Befehle immer für dich und deine Mods.
Keep at most this many viewersStandard 2.000, bis 5.000; die am längsten inaktiven fallen zuerst heraus.

Hilfe

Es erscheint nichts
  • Alle vier Reiter ersetzt und auf Save geklickt?
  • Kasten größer als 290 × 180?
  • OBS-Browserquelle auf 1920 × 1080 und mit dem Link des richtigen Overlays?
  • Ausgeblendet? Schreib !card show.
Ein Zuschauer schrieb !checkin, nichts passierte

Schon eingecheckt in diesem Stream: Die Karte sagt das einmal, danach bleibt sie still. Who can check in und die Abklingzeit prüfen.

Kanalpunkte zählen nicht

Der Name der Belohnung auf Twitch und in Name of the channel points reward muss gleich sein (Groß- und Kleinschreibung egal).

Alle konnten zweimal einchecken

Das Widget sah eine Pause länger als Hours without any chat und begann einen neuen Stream. Mehr Stunden einstellen.

Kein Ton

Der Ton spielt in OBS. Im Editor sperrt dein Browser ihn eventuell, bis du in die Seite klickst. In OBS Control audio via OBS einschalten.

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.

Updates

Updates für Version 1.x installieren sich beim Laden des Overlays selbst, deine Einstellungen und Stempel bleiben. Nur wenn der Editor einen Update-Hinweis zeigt:

  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.

Aktuelle Version: 1.0.0