← Zurück zum Help-Center
Einrichtung 4 min Lesezeit

Twitch-Chat als Overlay im Stream anzeigen

So blendest du deinen Twitch-Chat direkt im Stream ein — für alle Zuschauer sichtbar, optional mit Emotes, Badges und Animation.

Twitch-Chat als Overlay im Stream anzeigen

Chat auf Stream ist einer der Haupt-Grips für Engagement — Zuschauer sehen ihre eigenen Nachrichten im Bild und fühlen sich mehr eingebunden. Mit FizzyPeak's Cloud-OBS richtest du das Overlay in 5 Minuten ein, ohne lokale Software.

Option 1: Kapchat (einfach, kostenlos)

Kapchat von NightDev ist der Klassiker. Kostenlos, schnell eingerichtet, funktioniert mit FizzyPeak out-of-the-box.

Setup

  1. nightdev.com/kapchat{target="_blank"} öffnen
  2. Get it → Twitch-Channel eingeben
  3. Anpassen:

- Theme: Dark (Standard), Light oder Transparent - Hide Bot Messages: checken, wenn dein FizzyPeak-Bot oder Nightbot nicht on-stream erscheinen soll - Fade Time: 10 s (Standard) — Nachrichten verschwinden nach dieser Zeit - Prevent Clipping: unchecked lassen (sonst kein Clip-Button bei Viewer)

  1. Generate → Link kopieren

In FizzyPeak Cloud-OBS einbinden

  1. Dashboard → Cloud OBS → Scenes
  2. Auf deine Haupt-Szene wechseln → Add Source → Browser
  3. URL einfügen → Width 400, Height 600
  4. Position anpassen (meist rechts oben oder unten)

Fertig. Chat erscheint in allen Streams, die aus dieser Szene ausgespielt werden.

Option 2: StreamElements (mehr Features)

Wenn du anpassbarere Themes und Animationen willst, nutze das StreamElements Chat-Widget.

  1. streamelements.com{target="_blank"} mit Twitch einloggen
  2. My Overlays → New Overlay → Chatbox
  3. Widget-Einstellungen:

- Animationen (Fade, Slide, Pop) - Badges an/aus - Emote-Rendering (inkl. BTTV und FFZ) - Custom CSS für Fortgeschrittene

  1. Widget-URL kopieren
  2. In Cloud-OBS als Browser-Source einfügen (wie bei Kapchat)

Option 3: FizzyPeak Native Chat-Widget (empfohlen)

Wir haben ein eigenes Chat-Widget, das direkt mit unserem Cloud-OBS verdrahtet ist.

Vorteile gegenüber externen Widgets

  • Keine Browser-Source nötig — läuft als nativer Layer im Cloud-OBS
  • Niedrigere Latenz — Chat erscheint in unter 500 ms (vs. 1–2 s bei externen)
  • Auto-Hide bei Privacy — bei !privacy verschwindet das Overlay automatisch
  • Highlights — wichtige Messages (Mod, VIP, Sub) bleiben länger sichtbar

Aktivieren

  1. Dashboard → Overlays → Chat Widget → Enable
  2. Channel auswählen
  3. Design-Preset wählen (Minimal, Gaming, IRL-Bold)
  4. In der Szene platzieren

Design-Tipps

Position: Rechte Seite ist Standard. Linke Seite nutzen, wenn dein Content links viel Action hat. Unten ist riskant — FizzyPeak-Alerts kollidieren dort.

Größe: Mindestens 400 px Breite, damit Usernamen nicht umbrechen. Maximal 500 px, sonst nimmt es zu viel Bild weg.

Schriftgröße: Mindestens 18 px. Mobile-Viewer squinten sonst.

Farben: Schrift-Weiß auf halbtransparentem Dunkel ist am lesbarsten.

Emotes und Badges

Moderne Widgets rendern automatisch:

  • Twitch Native Emotes
  • BTTV (BetterTTV)
  • FFZ (FrankerFaceZ)
  • 7TV

In Kapchat aktivierst du das unter den Generate-Optionen. Im FizzyPeak-Widget ist es standardmäßig an.

Performance-Hinweise

Browser-Sources in Cloud-OBS kosten CPU-Zyklen. Faustregel:

  • 1 Chat-Widget: vernachlässigbar
  • 2–3 Widgets: noch okay
  • 5+ Widgets: Cloud-OBS kann anfangen zu laggen

Bei vielen Overlays nutzen wir im Hintergrund GPU-Compositing, aber alte Free-Tier-Server können limitieren. Upgrade auf Pro bringt dedicated GPU.

Troubleshooting

Chat erscheint nicht — Browser-Source prüfen: URL korrekt? Cache-Busting aktivieren (?r=1234 ans URL-Ende anhängen).

Chat verzögert stark — Latenz in der Browser-Source reduzieren: Refresh on Scene Active aktivieren.

Emotes zeigen leere Boxen — BTTV/FFZ ist im Widget deaktiviert. In Kapchat-Einstellungen nachschauen.

Noch Fragen? Öffne das Dashboard oder schreib im Discord #support.