// Overlays
Kostenlos downloaden
Anleitung

Twitch Chat in OBS anzeigen

Drei Wege, drei verschiedene Probleme. Der schnellste ist selten der richtige.

10 Minuten Einsteiger OBS Browser Source

Schritt für Schritt

// So gehts

  1. 01

    Zuerst klären: wer soll den Chat sehen?

    Willst du beim Spielen nur selbst mitlesen, brauchst du kein Overlay, sondern ein Dock. Ein Dock ist ein Fenster innerhalb von OBS, das weder in deiner Aufnahme noch im Stream auftaucht. Geh auf Ansicht, Docks, Benutzerdefinierte Browser-Docks, vergib einen Namen und trag https://www.twitch.tv/popout/DEINKANAL/chat ein. Für viele ist das schon die ganze Lösung.

  2. 02

    Der schnelle Weg: Popout-Chat als Browser-Quelle

    Sollen deine Zuschauer den Chat sehen, kommt dieselbe Adresse in eine Browser-Quelle, also die Quelle in OBS, die eine Webseite anzeigt. Quelle hinzufügen, Browser, dann https://www.twitch.tv/popout/DEINKANAL/chat, Breite 400, Höhe 800. Das läuft sofort. Du holst dir damit allerdings die komplette Twitch-Oberfläche samt dunklem Hintergrund ins Bild.

  3. 03

    Warum der Popout-Weg oft nicht reicht

    Transparent wird diese Seite nur, wenn du im Feld Benutzerdefiniertes CSS der Browser-Quelle eigenes CSS hinterlegst. Das bricht, sobald Twitch sein Layout ändert. Dazu fehlen alle Emotes von 7TV, BTTV und FFZ, weil die aus Browser-Erweiterungen kommen, die es in OBS nicht gibt. Wenn dich eins von beidem stört, nimm den dritten Weg.

    Der Twitch-Popout-Chat als Browser-Quelle in OBS, mit Cookie-Abfrage und undurchsichtigem Hintergrund
    Der Popout-Chat bringt die komplette Twitch-Oberfläche mit ins Bild: Cookie-Abfrage, undurchsichtiger Hintergrund, Eingabefeld. Genau das übernimmt OBS eins zu eins in deine Szene.
  4. 04

    Der saubere Weg: ein echtes Chat-Overlay

    Ein Chat-Overlay zeichnet die Nachrichten selbst, statt eine fremde Webseite abzufilmen. Der Hintergrund ist damit von Haus aus transparent, Schrift und Farben bestimmst du, und die Emote-Dienste werden direkt abgefragt. Fertige Widgets gibt es bei StreamElements und own3d, beide gehostet und mit Konto. Meine Chat-Box ist eine einzelne HTML-Datei ohne Konto, mit sechs Themes und Emotes von 7TV, BTTV und FFZ.

    Das laufende Overlay in OBS. Neue Nachrichten laufen unten ein, der Hintergrund bleibt transparent.
    Nachrichten, die nur aus einem Emote bestehen, lösen einen Flug quer durchs Bild aus. Die Emotes kommen von 7TV, BTTV und FFZ, ohne dass in OBS eine Erweiterung installiert wäre.
  5. 05

    In OBS einbinden

    Die Chat-Box richtest du im Config Hub ein: Ordner wählen, Chat-Box anhaken, Kanalnamen eintragen. Danach in OBS eine Browser-Quelle anlegen, den Haken bei Lokale Datei setzen und die widget.html wählen. Breite 400 und Höhe 900 sind ein guter Start. Setz außerdem den Haken bei Deaktivieren, wenn Quelle nicht sichtbar ist, sonst hält die Quelle ihre Verbindung zum Chat auch dann offen, wenn du längst in einer anderen Szene bist. Die vollständige Einrichtung steht in der Anleitung für Browser-Quellen.

    Die Eigenschaften einer Browser-Quelle in OBS, der Haken bei Lokale Datei ist gesetzt
    Die Eigenschaften der Browser-Quelle: Haken bei Lokale Datei, die widget.html ausgewählt, Breite 400 und Höhe 900. Weiter unten sitzt der Haken, der die Quelle beim Szenenwechsel schlafen legt.
    Das Chat-Box-Overlay läuft als Browser-Quelle in OBS, die Nachrichten erscheinen im Vorschaubild
    So sieht es fertig aus: eine einzige Quelle in der Szene, transparenter Hintergrund, und die Nachrichten laufen im Vorschaubild von OBS ein.
  6. 06

    Bots und Befehle rausfiltern

    Sobald ein Loyalty-Bot mitschreibt, besteht dein Chat im Bild zur Hälfte aus Punktezählerei. Drei Schalter räumen das auf. Sie stehen im Config Hub in den Einstellungen der Chat-Box unter Alle Einstellungen dieses Overlays, nicht bei den hervorgehobenen: hideCommands blendet alle Nachrichten aus, die mit einem Ausrufezeichen beginnen, hideBots deckt Nightbot, StreamElements, Streamlabs, Moobot, Sound Alerts, Fossabot und Wizebot ab, und bei ignoreUsers trägst du weitere Namen nach.

  7. 07

    Lesbar machen

    Der häufigste Fehler ist zu kleine Schrift. Ein großer Teil deiner Zuschauer sitzt am Handy, und was dort unter etwa 20 Pixeln liegt, liest niemand mehr. Gib dem Text einen Umriss oder einen Schatten, damit er auch über hellen Spielszenen lesbar bleibt, und halte rund 40 Pixel Abstand zum Bildrand.

    Das helle Theme der Chat-Box über einer hellen Spielszene, jede Nachricht liegt auf einer eigenen weißen Fläche
    Über hellem Bildmaterial trägt reiner Text nicht mehr. Hier liegt jede Zeile auf einer eigenen Fläche, was zuverlässiger wirkt als ein Umriss allein.

Häufige Fragen

// Kurz erklärt

Warum hat mein Chat einen schwarzen Kasten hinter sich?

Weil die Popout-Seite von Twitch ihren eigenen Hintergrund mitbringt. Eine Browser-Quelle macht eine Webseite nicht transparent, sie zeigt sie nur an. Entweder überschreibst du den Hintergrund mit eigenem CSS, oder du nimmst ein Overlay, das von sich aus transparent zeichnet.

Warum fehlen meine 7TV- oder BTTV-Emotes?

Der Popout-Chat kennt nur die Emotes von Twitch selbst. 7TV, BTTV und FFZ sind Browser-Erweiterungen, und die gibt es in OBS nicht. Ein Overlay, das diese Dienste selbst abfragt, zeigt die Emotes auch im Stream. Meine Chat-Box lädt alle drei.

Geht das auch mit Kick?

Über eine Browser-Quelle ja, dann mit der Kick-Chat-Adresse statt der von Twitch. Die Chat-Box kann Kick über Streamer.bot mitlesen, das habe ich allerdings noch nicht gegen ein echtes Kick-Setup geprüft.

Brauche ich dafür einen Bot?

Nein. Ein Chat-Overlay liest nur mit und antwortet nie. Ein Bot wird erst nötig, wenn im Chat auch etwas passieren soll, etwa bei den Spiel-Overlays mit Punkte-Einsatz. Die Punkte kommen dabei aus deinem Chatbot und nicht aus den Twitch-Kanalpunkten.

Frisst eine zweite Browser-Quelle Leistung?

Eine Chat-Quelle kostet spürbar weniger als eine Spielszene, aber sie läuft eben mit. Wenn du mehrere Overlays gleichzeitig nutzt, setz überall den Haken bei Deaktivieren, wenn Quelle nicht sichtbar ist. Dann laufen nur noch die Quellen der Szene, die gerade zu sehen ist.

Zuletzt aktualisiert am 31. Juli 2026.

Overlay

Chat-Box

Dieses Overlay ansehen und herunterladen.

Zum Overlay