← Zurück zum Help-Center
Setup 4 min read

Show Twitch Chat as an Overlay on Stream

Here's how to put your Twitch chat right on your stream — visible to all viewers, optionally with emotes, badges, and animation.

Show Twitch Chat as an Overlay on Stream

Chat on stream is one of the biggest engagement hooks — viewers see their own messages on screen and feel more involved. With FizzyPeak's Cloud-OBS you can set up the overlay in 5 minutes, no local software needed.

Option 1: Kapchat (simple, free)

Kapchat by NightDev is the classic. Free, quick to set up, and works with FizzyPeak out of the box.

Setup

  1. Open nightdev.com/kapchat{target="_blank"}
  2. Get it → enter your Twitch channel
  3. Customize:

- Theme: Dark (default), Light, or Transparent - Hide Bot Messages: check this if you don't want your FizzyPeak bot or Nightbot to appear on stream - Fade Time: 10 s (default) — messages disappear after this time - Prevent Clipping: leave unchecked (otherwise no clip button for viewers)

  1. Generate → copy the link

Add it in FizzyPeak Cloud-OBS

  1. Dashboard → Cloud OBS → Scenes
  2. Switch to your main scene → Add Source → Browser
  3. Paste the URL → Width 400, Height 600
  4. Adjust the position (usually top right or bottom)

Done. Chat appears in every stream broadcast from this scene.

Option 2: StreamElements (more features)

If you want more customizable themes and animations, use the StreamElements chat widget.

  1. Log in to streamelements.com{target="_blank"} with Twitch
  2. My Overlays → New Overlay → Chatbox
  3. Widget settings:

- Animations (fade, slide, pop) - Badges on/off - Emote rendering (incl. BTTV and FFZ) - Custom CSS for advanced users

  1. Copy the widget URL
  2. Add it to Cloud-OBS as a browser source (same as with Kapchat)

Option 3: FizzyPeak Native Chat Widget (recommended)

We have our own chat widget that's wired directly into our Cloud-OBS.

Advantages over external widgets

  • No browser source needed — runs as a native layer in Cloud-OBS
  • Lower latency — chat appears in under 500 ms (vs. 1–2 s with external widgets)
  • Auto-hide on privacy — on !privacy the overlay disappears automatically
  • Highlights — important messages (mod, VIP, sub) stay visible longer

Enable it

  1. Dashboard → Overlays → Chat Widget → Enable
  2. Select a channel
  3. Pick a design preset (Minimal, Gaming, IRL-Bold)
  4. Place it in your scene

Design tips

Position: The right side is standard. Use the left side if your content has a lot of action on the left. The bottom is risky — FizzyPeak alerts collide there.

Size: At least 400 px wide so usernames don't wrap. No more than 500 px, otherwise it takes up too much of the picture.

Font size: At least 18 px. Otherwise mobile viewers have to squint.

Colors: White text on a semi-transparent dark background is the most readable.

Emotes and badges

Modern widgets render these automatically:

  • Twitch native emotes
  • BTTV (BetterTTV)
  • FFZ (FrankerFaceZ)
  • 7TV

In Kapchat you enable this under the Generate options. In the FizzyPeak widget it's on by default.

Performance notes

Browser sources in Cloud-OBS cost CPU cycles. Rule of thumb:

  • 1 chat widget: negligible
  • 2–3 widgets: still fine
  • 5+ widgets: Cloud-OBS can start to lag

With many overlays we use GPU compositing in the background. On the Starter plan this can be limiting — upgrading to Creator or IRL Pro gets you more GPU power.

Troubleshooting

Chat doesn't appear — check the browser source: is the URL correct? Enable cache busting (append ?r=1234 to the end of the URL).

Chat lags badly — reduce latency in the browser source: enable Refresh on Scene Active.

Emotes show empty boxes — BTTV/FFZ is disabled in the widget. Check the Kapchat settings.

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