How to add Facebook live chat to OBS

Step by step

1. Step 1

   Route your Facebook chat through a relay

   Sign up free at Restream or StreamYard, connect your Facebook page, then open their Chat page while your Facebook live is running. That page has a stable shareable URL.

   Live chat⋮

   viewer_42: pog

   sakura_chan: hi ✿

   Popout chat ↗

   Hide chat

   Copy the URL

   restream.io/chat/…
2. Step 2

   Copy the relay's chat URL into OBS

   Sources → + → Browser. Paste the relay chat URL. Size around 420×720.

   OBS · Sources

   Game Capture

   Webcam

   + Browser Source

   Properties

   URL

   popout chat URL

   Width

   420

   Height

   720
3. Step 3

   Style with Chatto

   Because the relay wraps chat in its own HTML, Chatto's generic CSS covers most containers. Start from the Apple Glass or Speech Bubble preset, tweak until it looks right, then paste into OBS Custom CSS.

   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