# Twitch Chat in OBS anzeigen

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

published: 2026-07-24 | updated: 2026-10-11 | source: https://twitch-overlays.coding-freaks.com/anleitung/twitch-chat-in-obs-anzeigen

## 1. 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 oben in der Menüleiste auf 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. 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](https://obsproject.com/), 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. 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. 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](https://twitch-overlays.coding-freaks.com/overlays/chatbox) ist eine einzelne HTML-Datei ohne Konto, mit sechs Themes und Emotes von 7TV, BTTV und FFZ.

*Ein Chat-Overlay in OBS: neue Nachrichten laufen mit Farben, Badges und eigenen Emotes ein: Das laufende Overlay in OBS. Neue Nachrichten laufen unten ein, der Hintergrund bleibt transparent.*

*Ein großes eigenes Emote fliegt aus dem Chat-Overlay heraus durch das Bild: 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. In OBS einbinden

Die Chat-Box richtest du im [Config Hub](https://twitch-overlays.coding-freaks.com/einrichten/) ein: Chat-Box wählen, Kanalnamen eintragen, beim Speichern einen Ordner wählen. Danach in OBS eine Browser-Quelle anlegen, den Haken bei Lokale Datei setzen und die `widget.html` wählen. Breite 1920 und Höhe 1080, wie es der Config Hub anzeigt: die Chat-Box nutzt die ganze Fläche und setzt ihre Spalte selbst an die Stelle, die du im Hub bei Position wählst. Eine schmale Quelle schneidet die Spalte ab, sie ist ab Werk 440 Pixel breit. 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](https://twitch-overlays.coding-freaks.com/anleitung/twitch-overlay-in-obs-einrichten).

*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. Bots und Befehle rausfiltern

Sobald ein Loyalty-Bot mitschreibt, besteht dein Chat im Bild zur Hälfte aus Punktezählerei. Die Chat-Box räumt das ab Werk auf, du musst nichts tun. Nachrichten, die mit einem Ausrufezeichen beginnen, blendet sie aus (der Schalter `hideCommands` steht im [Config Hub](https://twitch-overlays.coding-freaks.com/einrichten/) unter Alle Einstellungen dieses Overlays), und Nightbot, StreamElements, Streamlabs, Moobot, Sound Alerts, Fossabot und Wizebot stehen schon in der Liste `hideBots`. Weitere Namen trägst du in der `config.js` bei `ignoreUsers` nach. Diese zwei Listen zeigt der Config Hub bewusst nicht als Eingabefeld.

## 7. 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

### 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](https://twitch-overlays.coding-freaks.com/overlays/chatbox) 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](https://twitch-overlays.coding-freaks.com/overlays/) mit Punkte-Einsatz. Die Punkte kommen dabei aus deinem Chatbot und nicht aus den [Twitch-Kanalpunkten](https://twitch-overlays.coding-freaks.com/wissen/twitch-kanalpunkte-einrichten).

### 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.