Dein Stream Chat ist die halbe Show. Wenn er im Stream nicht zu sehen ist, fehlt in Clips und VODs die Hälfte der Unterhaltung, und neue Zuschauer merken gar nicht, dass bei dir was los ist. Also: Twitch Chat in OBS einfügen, und zwar so, dass er aussieht, als gehöre er zu deinem Layout.
Kurz und knapp
So fügst du deinen Twitch Chat als Overlay in OBS ein:
- Hol dir eine Chat Overlay URL, z. B. von ChatStyle, Streamlabs, StreamElements oder den Twitch-Popout-Chat.
- Wähl in OBS deine Szene aus und klick unter Quellen auf +.
- Wähl Browser, gib der Quelle einen Namen und klick auf OK.
- Füg die URL ein, stell Breite und Höhe ein (400 × 600 ist bei 1080p ein guter Start) und bestätige mit OK.
- Schieb den Chat an die richtige Stelle und schreib eine Testnachricht.
Fertig. Der Rest dieser Anleitung dreht sich darum, welche Chat-Quelle zu dir passt, wie dein Chat richtig gut aussieht und was du tust, wenn gar nichts angezeigt wird.
Chat-Dock oder Chat Overlay?
„Twitch Chat in OBS“ kann zwei verschiedene Dinge heißen. Viele Anleitungen werfen die fröhlich durcheinander.
| Chat-Dock | Chat Overlay | |
|---|---|---|
| Wer sieht es? | Nur du | Deine Zuschauer |
| Wo ist es? | Als Fenster in OBS | In deiner Szene, im Stream |
| So kommt es rein | Twitch-Konto verbinden oder Browser-Dock anlegen | Browser-Quelle mit Overlay-URL |
| Wofür? | Chat lesen und antworten, während du live bist | Unterhaltung im Stream, in Clips und VODs zeigen |
Du willst den Chat lesen, ohne ständig das Fenster zu wechseln? Dann brauchst du ein Dock. Deine Zuschauer sollen den Chat im Stream sehen? Dann brauchst du ein Overlay. Die meisten nutzen beides.
Chat-Dock einrichten
Am schnellsten geht's über Einstellungen → Stream: Twitch als Plattform wählen und auf Konto verbinden (empfohlen) klicken. OBS legt dann Docks für Chat, Streaminfos und Aktivitäten an.
Du willst dein Konto nicht verbinden? Dann öffne Docks → Benutzerdefinierte Browser-Docks, gib einen Namen ein und füg die Popout-URL deines Chats ein:
https://www.twitch.tv/popout/DEINKANAL/chat?popout=
Ersetz DEINKANAL durch deinen Kanalnamen und klick auf Übernehmen. Wenn du im Dock auch schreiben willst, logg dich dort einmal ein.
Ein Dock landet nie im Stream. Dafür brauchst du eine der drei Overlay-Methoden.
Methode 1: Twitch-Popout-Chat als Browser-Quelle
Die kostenlose Variante ohne zusätzlichen Account. Der Popout-Chat ist eine ganz normale Webseite, OBS kann ihn also wie jede andere Seite laden.
- Leg eine Browser-Quelle an.
- Füg die Popout-URL von oben ein.
- Schneid Kopfzeile und Eingabefeld weg: Alt gedrückt halten (auf dem Mac Option) und die Ränder der Quelle ziehen.
Klappt, aber ehrlich gesagt packst du damit eine Webseite in deinen Stream, kein Overlay. Der Hintergrund ist nicht transparent, alles sieht aus wie bei Twitch, und in der EU kann dir zusätzlich ein Cookie-Banner reingrätschen. Für jede Änderung brauchst du eigenes CSS, und das geht kaputt, sobald Twitch seine Seite umbaut. Zum Testen okay, für jeden Tag eher nix.
Mehr zum Popout-Chat, auch für den zweiten Monitor, findest du in unserer Anleitung Twitch Chat Popout.
Methode 2: OBS Chat Box von Streamlabs oder StreamElements
Beide bieten eine kostenlose Chat Box an. Du loggst dich mit Twitch ein, wählst einen Stil, Schrift und Farben und kopierst dann die Widget-URL in eine Browser-Quelle. Wenn du mit Streamlabs Desktop streamst, ist die Chat Box direkt eingebaut.
Was gut ist: kostenlos, schnell eingerichtet, transparenter Hintergrund, Emotes von 7TV, BTTV und FFZ. Die Streamlabs Chat Box kann außerdem Chats von mehreren Plattformen zusammenführen.
Was nervt: Wenn du die eingebauten Stile, Schriften und Farben durch hast, heißt der nächste Schritt: selbst HTML und CSS schreiben. Deshalb sieht der Chat in so vielen Streams gleich aus.
Wie weit du mit beiden kommst und wann sich ein Wechsel lohnt, steht in unserem Vergleich Streamlabs Chat Box vs. StreamElements Chat.
Weitere kostenlose Chat Overlays
- ChatIS: Open Source, mit Emotes von 7TV, BTTV und FFZ, eigenen Schriften und Bot-Filter. Du stellst alles auf einer Seite ein und bekommst eine URL.
- OWN3D Pro Chatbox: kostenlose Chat Box für Twitch, YouTube und Kick.
- Restream Chat: bündelt die Chats aller Plattformen, auf die du über Restream streamst, und liefert dir eine URL für OBS.
- Social Stream Ninja: Open Source, holt Chats aus über 100 Quellen in ein Overlay.
Methode 3: Chat Overlay mit eigenem Design in OBS
Ganz offen: ChatStyle ist unser Tool. Wir haben es gebaut, weil wir einen Chat wollten, der nach Design aussieht, ohne dass man dafür CSS schreiben muss.
- Meld dich auf chatstyle.gg mit Twitch an und wähl den Streamer-Account.
- Such dir ein Template aus. Es gibt über 20 kostenlose, und dein erstes Overlay steht direkt nach der Anmeldung bereit.
- Pass Schrift, Farben, Rahmen und Animationen im Designer an. Die Vorschau zeigt dir alles live.
- Kopier deine Overlay-URL in eine Browser-Quelle. Oder klick im Designer auf Zu OBS hinzufügen: ChatStyle verbindet sich über den eingebauten WebSocket-Server mit OBS und legt die Browser-Quelle direkt in der Szene an, die du auswählst.
- Schreib eine Testnachricht.
Cozy leafs
Super cute Chat Design with small leaves as highlights for every bubble. This is staceylucia signature Template.
Simple Pixel
Comic Pop
Comic book speech bubble with thick border, hard shadow, halftone dots, speech tail, and bouncy pop entrance.
Behandle deine Overlay-URL wie ein Passwort. Wer sie hat, kann deinen Chat anzeigen, also poste sie nirgends öffentlich. Falls sie doch mal rausgeht, erzeugst du im Dashboard einfach eine neue und trägst sie in OBS ein.
Was du außer dem Look noch bekommst:
- Transparenter Hintergrund, ohne Zuschneiden und ohne CSS.
- Emotes von Twitch, 7TV, BTTV und FFZ plus Twitch-Badges. Neue 7TV- und BTTV-Emotes tauchen auf, ohne dass du das Overlay neu laden musst.
- Moderation wirkt mit: Nachrichten, die deine Mods löschen, verschwinden auch aus dem Overlay.
- Chat-Skins für deine Community: Gib Subs, VIPs oder Mods einen eigenen Look für ihre Nachrichten. Mehr dazu in Twitch Chat Overlay anpassen mit Chat-Skins.
- YouTube-Chat im selben Overlay (aktuell in der Beta), falls du auf beiden Plattformen streamst.
Im kostenlosen Plan stecken die Gratis-Templates, Emotes, Chat-Einstellungen, Rollen-Skins und zwei Overlays. Mit Premium kommen eigenes HTML und CSS, mehr Overlays und zusätzliche Filter dazu. Kostenpflichtige Templates gibt es separat im Template-Shop.
Welche Methode passt zu dir?
| Twitch-Popout | Streamlabs / StreamElements | ChatStyle | |
|---|---|---|---|
| Preis | Kostenlos | Kostenlos | Kostenlos, Premium optional |
| Transparenter Hintergrund | Nein | Ja | Ja |
| Design | Twitch-Layout | Eingebaute Stile, dann CSS | 20+ kostenlose Templates und ein Designer |
| 7TV-, BTTV-, FFZ-Emotes | Nein | Ja | Ja |
| Plattformen | Twitch | Streamlabs: Twitch, YouTube, Kick und mehr | Twitch, YouTube (Beta) |
| Chat-Skins für Zuschauer | Nein | Nein | Ja |
Meine Meinung: Der Popout reicht zum Ausprobieren. Streamlabs und StreamElements sind solide, wenn du sie eh schon für Alerts nutzt, und wenn du Kick- oder Facebook-Chat brauchst, liegt Streamlabs vorn. Wenn dein Chat nach einem Teil deines Streams aussehen soll und nicht nach einem Widget obendrauf, probier ein Overlay mit richtigem Design.
So sieht dein Chat Overlay richtig gut aus
Den Teil lassen die meisten Anleitungen weg. Dabei ist dein Chat Overlay ein Teil deines Layouts, genau wie Webcam-Rahmen und Alerts.
Platzier ihn so, dass er nicht stört
Halt den Chat vom HUD deines Spiels fern: Minimap, Lebensleiste, Munition, Killfeed. Und lass ihn nicht über deine Facecam laufen. Beliebt sind der linke oder rechte Rand, oft unter der Kamera. Jedes Spiel hat sein HUD woanders, also gib jeder Szene ihre eigene Position.
Denk an Handys
Viele deiner Zuschauer schauen am Handy. Eine Schrift, die auf deinem 27-Zoll-Monitor locker lesbar ist, wird im mobilen Player winzig. Schau dir deinen Stream einmal selbst am Handy an. Bei 1080p würde ich mit etwa 22 bis 24 Pixeln anfangen und dann nachjustieren. Alle anderen Maße für dein Layout findest du in unserem Guide zu den Twitch Größen.
Kontrast schlägt Farbe
Helle oder unruhige Spielszenen schlucken Text. Gib deinen Nachrichten einen Hintergrund oder zumindest eine Kontur oder einen Schatten. Und teste das Overlay in den hellsten und dunkelsten Momenten, nicht nur im Menü.
Bleib bei deinem Stil
Nimm die Schriften und Farben aus deinem Branding. Wenn deine Overlays rund und pastellig sind, fällt ein eckiger Neon-Chat auf, aber nicht positiv. Der Chat sollte wirken, als käme er vom selben Designer wie der Rest.
Weniger ist mehr
Dein halber Bildschirm muss nicht voller Nachrichten sein. Beim Zocken reichen fünf bis zehn Nachrichten, im Just Chatting darf's mehr sein. Lass Nachrichten nach 15 bis 30 Sekunden verschwinden, damit alte Unterhaltungen nicht ewig rumhängen. Bei ChatStyle stellst du das über die maximale Nachrichtenanzahl und die Anzeigedauer ein.
Bot-Nachrichten und Chat-Befehle müllen das Overlay schnell zu. ChatStyle blendet Befehle standardmäßig aus, und mit Premium kannst du zusätzlich einzelne Accounts wie Nightbot oder StreamElements ausblenden.
Animation: kurz und knackig
Eine kurze Einblend-Animation lenkt den Blick auf neue Nachrichten. Dauerndes Hüpfen oder lange Effekte konkurrieren mit deinem Gameplay. Nimm was Schnelles, das sich dann beruhigt.
Vergiss die Emotes nicht
Wenn deine Community in 7TV- oder BTTV-Emotes lebt, muss dein Overlay die auch anzeigen. Sonst steht im Stream nur noch „KEKW“ als Text.
Du streamst nicht mit OBS?
Ein Chat Overlay ist einfach eine Webseite. Jedes Streaming-Programm, das Webseiten anzeigen kann, funktioniert also nach dem gleichen Prinzip.
- Streamlabs Desktop: eine Browser Source hinzufügen oder die eingebaute Chat Box nutzen.
- Meld Studio: eine Browser-Quelle hinzufügen. Meld hat außerdem ein eigenes Chat-Widget.
- XSplit Broadcaster: eine Webpage-Quelle hinzufügen. XSplit hat zusätzlich einen eingebauten Stream Chat Viewer.
- PRISM Live Studio: eine Web-Quelle hinzufügen oder die eingebaute PRISM-Chat-Quelle nutzen.
- vMix: einen Web Browser-Input hinzufügen. Transparente Hintergründe klappen dort auch.
Twitch Studio fällt raus: Twitch hat es 2024 eingestellt.
Wir entwickeln und testen ChatStyle mit OBS Studio. Andere Programme mit Browser-Quelle können dieselbe Overlay-URL laden, nur Menüs und Optionen heißen dort anders.
Chat wird in OBS nicht angezeigt? Schnelle Hilfe
- Die Quelle bleibt leer: Check die URL auf fehlende Zeichen. Öffne dann die Eigenschaften der Quelle und klick auf Cache der aktuellen Seite aktualisieren.
- Alte Nachrichten fehlen: Die meisten Overlays zeigen nur Nachrichten, die nach dem Laden reinkommen. Schreib eine Testnachricht.
- Weißer oder schwarzer Hintergrund: Schau in den Eigenschaften ins Feld Benutzerdefiniertes CSS. Mit dem Standard-CSS von OBS bleibt der Hintergrund transparent. Der Twitch-Popout-Chat ist ohne zusätzliches CSS nie transparent.
- Chat hängt nach dem Szenenwechsel: Schau, ob Deaktivieren, wenn Quelle nicht sichtbar ist aktiviert ist. Dann verbindet sich das Overlay bei jedem Szenenwechsel neu.
- Emotes fehlen: Prüf die Emote-Einstellungen deines Overlays. Bei den meisten Tools musst du 7TV, BTTV oder FFZ extra aktivieren.
- Alle Browser-Quellen bleiben leer: Geh auf Einstellungen → Erweitert → Quellen, schalte Browserhardwarebeschleunigung aktivieren um und starte OBS neu.
- Nichts hilft: Quelle löschen, neu anlegen und OBS neu starten. Wenn du deine ChatStyle-URL neu erzeugt hast, funktioniert die alte nicht mehr. Dann trag die neue ein.
Dein Stream Chat, dein Look
Den Twitch Chat in OBS einzufügen dauert fünf Minuten. Ihn so zu gestalten, dass er zu deinem Stream passt, braucht ein bisschen mehr. Aber genau das sehen deine Zuschauer.
Bock auf einen Chat mit eigenem Look? Schau dir die Chat-Templates an, such dir eins aus und pack es in OBS.