Twitch3 min readJul 22, 2026

How to add Twitch chat to OBS

Add Twitch chat to OBS using the popout chat URL, then strip Twitch's UI with a free Chatto CSS theme built for streamers.

Step by step

Step 1
Copy your Twitch popout chat URL
Format is twitch.tv/popout/YOUR_USERNAME/chat?popout=. Swap in your channel name and paste it into a browser tab to confirm it loads.
Live chat⋮
viewer_42: pog
sakura_chan: hi ✿
Popout chat ↗
Hide chat
Copy the URL
twitch.tv/popout/you/chat
Step 2
Add it as a Browser Source
OBS → Sources → + → Browser. Paste the URL. Set width around 340 and height 720 for a compact rail.
OBS · Sources
Game Capture
Webcam
+ Browser Source
Properties
URL
popout chat URL
Width
420
Height
720
Step 3
Paste Chatto CSS to remove Twitch chrome
Chatto's Twitch export automatically hides the top bar, message input, gift/streak banners, and hype train — leaving only the chat text. Copy CSS in Studio, paste into Custom CSS in OBS.
Custom CSS
Chatto → Export → Copy CSS
```
.yt-live-chat-text-message, .chat-line__message {
  background: rgba(20,15,20,0.6);
  border: 1px solid #ff9ec7;
  border-radius: 14px;
  animation: fade-in .42s;
}
```

Frequently asked

Twitch is showing gift subs and streaks I don't want on stream. How do I hide them?

Chatto's Twitch mode already strips these. If you built a theme in YouTube mode by mistake, switch the platform toggle in Studio to Twitch and re-export — the CSS is different per platform.

The whole chat background is still purple. Why?

You probably pasted the URL but forgot the Custom CSS step. Custom CSS is what forces transparency.

Time to make it look like yours.

Browse presets Open Studio

Next up

How to add Facebook live chat to OBS

Step by step

Copy your Twitch popout chat URL

Add it as a Browser Source

Paste Chatto CSS to remove Twitch chrome

Frequently asked