Streamlabs und StreamElements sind für die meisten der erste Anlaufpunkt für ein Chat Overlay. Beide kostenlos, beide laufen in OBS, und bei beiden sieht man in vielen Streams denselben Standard-Chat. Welches Tool passt zu dir, wie weit kommst du mit Anpassungen, und wann lohnt sich was anderes?
Kurz vorweg: Wir machen ChatStyle, ein Chat-Overlay-Tool. Neutral sind wir also nicht. Trotzdem gibt's hier einen ehrlichen Vergleich, denn beide Tools machen vieles richtig, und es gibt gute Gründe, dabei zu bleiben.
Der schnelle Vergleich
| Streamlabs Chat Box | StreamElements Chat | |
|---|---|---|
| Preis | Kostenlos | Kostenlos |
| So kommt's in OBS | Widget-URL als Browser-Quelle oder direkt in Streamlabs Desktop | Teil eines Overlays: Die Overlay-URL kommt in eine Browser-Quelle |
| Gestaltung ohne Code | Eingebaute Stile, Schriften, Farben, Badges | Themes inkl. „Custom“: Schrift, Farbe, Größe, Textschatten |
| Eigener Code | HTML, CSS und JS | Custom Widgets mit HTML, CSS und JS |
| 7TV-, BTTV-, FFZ-Emotes | Ja | Ja, aber keine ungelisteten 7TV-Emotes |
| Mehrere Plattformen | Twitch, YouTube, Facebook, Kick und X in einer Chat Box | Für das Chat-Widget nicht beworben |
Die Kurzfassung: Du streamst mit Streamlabs Desktop oder brauchst Chats von mehreren Plattformen? Dann Streamlabs. Deine Alerts und Overlays laufen eh schon über StreamElements? Dann bleib dort. Und wenn dein Chat nach Design aussehen soll statt nach Widget, lies weiter bei den Alternativen.
Streamlabs Chat Box
Einrichtung
- Log dich auf streamlabs.com mit deinem Streaming-Account ein.
- Öffne im Dashboard das Widget Chat Box.
- Wähl einen Stil und stell Badges, Schriftfarbe und -größe ein.
- Kopier die Widget URL.
- Füg in OBS eine Browser-Quelle hinzu und setz die URL ein.
In Streamlabs Desktop fügst du die Chat Box direkt als Quelle hinzu, ganz ohne URL.
Was du ohne Code einstellen kannst
- Eingebaute Stile
- Badges für Mods, Subs und Prime
- Zusätzliche Emotes von BTTV, FFZ und 7TV
- Schriftfarbe und -größe
- Hide Message After oder Always Show Messages
- Chat Delay, praktisch, wenn du mit Stream-Verzögerung arbeitest
- Hide Chatters, um Bots und
!-Befehle auszublenden - Eigene Schimpfwortliste
Das ist ordentlich. Vor allem der Chat von mehreren Plattformen in einer Box ist etwas, das die meisten anderen Chat Overlays nicht können.
Eigenes HTML und CSS
Für alles darüber hinaus schaltest du im HTML-Tab des Widgets eigenes HTML/CSS frei. Im Standard-Template steckt jede Nachricht in einem eigenen div in #log, der Name in .name und der Text in .message. Ein einfacher Sprechblasen-Look könnte so anfangen:
#log > div {
background: rgba(20, 16, 36, 0.85);
border-radius: 12px;
padding: 8px 12px;
margin-block-end: 6px;
}
#log .message {
font-family: "Nunito", sans-serif;
}
Klappt, aber ab hier bist du auf dich gestellt: Die Schrift muss wirklich geladen sein, Animationen testest du selbst, und ein kaputtes Snippet kann die Chat Box komplett leer machen. Streamlabs rät bei kaputten Widgets selbst, eigenes HTML/CSS abzuschalten, wenn du den Code nicht selbst geschrieben hast.
StreamElements Chat
Einrichtung
StreamElements denkt in Overlays statt in einzelnen Widgets:
- Log dich auf streamelements.com ein.
- Leg ein Overlay an, meistens in 1920 × 1080, und füg das Chat-Widget hinzu.
- Wähl ein Theme. Mit Custom änderst du Schrift, Farbe, Größe und Textschatten.
- Speicher das Overlay und kopier seine URL.
- Füg in OBS eine Browser-Quelle mit der Overlay-URL hinzu, genauso groß wie das Overlay, und lass das benutzerdefinierte CSS auf Standard.
Der Vorteil: Alerts, Labels und Chat können in einer einzigen Browser-Quelle stecken. Der Nachteil: Den Chat positionierst du im StreamElements-Editor, nicht in OBS.
Was du anpassen kannst
Twitch-Emotes inklusive animierter, dazu BTTV, FFZ und 7TV. Nur ungelistete 7TV-Emotes gehen nicht. Für alles, was weiter geht, gibt es bei StreamElements Custom Widgets, die du in HTML, CSS und JavaScript schreibst. Mächtig, wenn du codest. Eine echte Hürde, wenn nicht.
Was war 2026 bei StreamElements los?
Falls du StreamElements schon länger nutzt, hast du's vermutlich mitbekommen: Im Mai 2026 hat StreamElements das Aus angekündigt und eine Woche später wieder zurückgenommen. Ende Juli hat Razer die StreamElements-Assets gekauft und „Business as usual“ mit denselben Tools und Funktionen versprochen. Laut Changelog kamen auch im September noch Overlay-Updates.
Du musst also nicht panisch wechseln. Ein guter Moment, deine Overlay-Einstellungen zu notieren und deinen eigenen Code zu sichern, ist es trotzdem.
Wie weit kommst du mit eigenem CSS?
Ziemlich weit, wenn du Bock auf CSS hast. Bei beiden Tools kannst du jedes Element einer Nachricht stylen, Webfonts laden und Animationen einbauen. Der Preis dafür:
- Du pflegst Code. Ändert sich das Markup des Widgets, kann dein CSS kaputtgehen.
- Keine Live-Vorschau fürs Design. Code ändern, neu laden, schauen, wiederholen.
- Emotes und Badges brauchen Extra-Liebe. Größe, Ausrichtung und Zeilenumbrüche verhalten sich anders, sobald du das Layout änderst.
- Alle nutzen dieselben Snippets. Die beliebten CSS-Vorlagen von Reddit und GitHub tauchen in ziemlich vielen Streams auf.
Wenn dir das Spaß macht: los geht's. Wenn du einfach einen Chat willst, der gut aussieht, sparst du mit einem visuellen Designer eine Menge Zeit.
Alternativen zur Chat Box von Streamlabs und StreamElements
Du musst nicht dein ganzes Setup umbauen. Lass Alerts, Bot und Tipps, wo sie sind, und tausch in OBS nur die Chat-Quelle aus.
ChatStyle
Unser Tool, genau dafür gebaut: ein Chat Overlay mit richtigem Design, ohne CSS.
- Über 20 kostenlose Templates plus ein Designer mit 55 Schriften, Farben, Rahmen und Einblend-Animationen, mit Live-Vorschau.
- Emotes von Twitch, 7TV, BTTV und FFZ und Twitch-Badges, alles kostenlos.
- Chat-Skins: Subs, VIPs oder Mods können einen eigenen Look für ihre Nachrichten bekommen.
- Nachrichten, die deine Mods löschen, verschwinden auch aus dem Overlay.
- Zu OBS hinzufügen legt die Browser-Quelle direkt in der Szene an, die du auswählst.
Hex Grid
Sci-fi tactical HUD bubble with corner brackets, scanning line, and military targeting aesthetics.
Scrapbook
Handwritten note pinned to a corkboard with tape strip, warm cream palette, and slight rotation.
RetroMon
If you ever played Pokemon on the Gameboy you'll remember this Style. Enjoy this amazing Templatev for your Retro Stream session.
Fairerweise auch die Grenzen: ChatStyle unterstützt Twitch und YouTube (in der Beta), aber nicht Kick, Facebook oder X. Es macht nur den Chat, keine Alerts und keinen Bot. Und einzelne Accounts ausblenden oder eigenes CSS schreiben gibt es nur mit Premium.
Weitere kostenlose Optionen
- ChatIS: Open Source, Emotes von 7TV, BTTV und FFZ, eigene Schriften und Bot-Filter, alles auf einer Seite eingestellt.
- OWN3D Pro Chatbox: kostenlos, für Twitch, YouTube und Kick.
- Social Stream Ninja: Open Source, bündelt Chats aus über 100 Quellen.
Chat Overlay in OBS wechseln
- Richte das neue Chat Overlay ein und kopier die URL.
- Füg in OBS eine neue Browser-Quelle hinzu und setz sie dahin, wo dein alter Chat war.
- Blende die alte Chat-Quelle über das Augen-Symbol aus, statt sie direkt zu löschen.
- Schreib ein paar Testnachrichten: mit Emotes, eine lange Nachricht und einen Befehl.
- Wenn alles passt, lösch die alte Quelle. Bei StreamElements entfernst du nur das Chat-Widget aus dem Overlay und behältst deine Alerts.
Welches Chat Overlay passt zu dir?
- Streamlabs Chat Box: Du streamst mit Streamlabs Desktop oder willst Chats von Twitch, YouTube, Kick und mehr in einer Box.
- StreamElements Chat: Deine Overlays und dein Bot laufen schon über StreamElements, und du magst alles in einem Overlay.
- ChatStyle: Dein Chat soll zum Design deines Streams passen, deine Community soll eigene Looks bekommen, und auf CSS hast du keinen Bock.
Neugierig, wie dein Chat aussehen könnte? Schau dir die Chat-Templates an und probier eins in OBS aus. Dauert etwa fünf Minuten. Wie du es einrichtest, steht in unserer Anleitung Twitch Chat in OBS einfügen.