OBS live chat, answered

Popout your live chat (from YouTube, Twitch, or Facebook), copy the URL, and paste it into an OBS Browser Source. Then paste Chatto's exported CSS into the same source's Custom CSS box so it stops looking like the default platform chat.

On your live stream, click the ⋮ above chat → Popout chat, copy the popout URL, and add it as a Browser Source in OBS (420×720 works well). Style it with Chatto CSS to hide YouTube's grey backdrop.

Use the URL twitch.tv/popout/YOUR_USERNAME/chat?popout= as your Browser Source. Chatto's Twitch preset automatically strips the header, input box, hype trains, and gift banners so only the chat text remains.

Facebook doesn't offer a direct popout URL. Use a free relay like Restream Chat or StreamYard, then drop that relay's chat URL into an OBS Browser Source and style it with Chatto.

The moment you add a Browser Source pointing at your popout chat URL, it shows in OBS. If it looks blank, your stream isn't actually live yet — the popout only renders messages during an active broadcast.

You don't need one. OBS's built-in Browser Source handles popout chat URLs from every major platform. Chatto's job is to give you CSS so the overlay matches your scene instead of looking like a default browser tab.

Transparency comes from the CSS, not the URL. Paste a Chatto theme into the Browser Source's Custom CSS field — every Chatto preset forces the container backgrounds to transparent so only the chat bubbles show.

Yes, 100% free. No login, no signup, no watermark. Chatto runs on donations if you want to support it.

No account required. Open the Studio, design, copy CSS, paste it into OBS. Everything is browser-only.

Yes. Chatto exports platform-specific CSS — YouTube mode targets yt-live-chat selectors, Twitch mode targets Twitch's chat DOM and hides Twitch-only chrome like the input tray and hype train.