Layrs

How to add Twitch chat to OBS

OBS has no chat of its own. To show chat to viewers, add a Browser source with a chat overlay link. To read chat yourself without showing it, add a dock.

Show chat on stream

  1. Get a chat overlay link

    Sign in to Layrs, click New source and pick a chat: Chat (clean), Chat (bubbles) or Chat (7TV painted).

  2. Copy the link

    Click Add to OBS and copy the link. With OBS on the same computer, you can drag it straight in instead.

  3. Click + under Sources

    In OBS, pick the scene you stream from and click + at the bottom of the Sources list.

  4. Pick Browser

    Not Window Capture: chat needs a Browser source. Name it Chat and click OK.

  5. Paste the link and set the size

    Paste it into URL. Set Width and Height to what Layrs shows (450 and 700 for a new chat), then OK.

  6. Place it and lock it

    Drag it where you want it, then click the padlock so it stays put. Layrs says In OBS as soon as it’s there.

The background is transparent, so your game shows through.

Read chat in a dock (only you see it)

  1. Open Docks → Custom Browser Docks

    It’s in OBS’s menu bar. On OBS 29 and older: View → Docks → Custom Browser Docks.

  2. Paste your pop-out chat

    Name it Chat and paste https://www.twitch.tv/popout/yourname/chat, with your channel name in place of yourname. Then Apply.

Drag the dock by its title to snap it next to Sources. Docks are part of the OBS window, not your stream, so viewers never see them.

Show 7TV, BTTV and FFZ emotes

Twitch’s pop-out chat shows only Twitch emotes. The Layrs chat overlay also shows 7TV, BTTV and FFZ emotes and 7TV name paints, with no browser extension. Chat (7TV painted) shows paints from the first message.

Kick chat goes in the same overlay

Signed in with Kick? Kick chat shows in the same chat overlay, marked with a K when it’s mixed with Twitch chat. 7TV emotes and paints are Twitch only.

Fixes for the common problems

  • Chat doesn’t show up: check it’s a Browser source and the whole link is in. Still nothing? Double-click the source and click Refresh cache of current page.
  • Chat is cut off or stretched: set the Browser source’s Width and Height to exactly what Layrs shows.
  • Bots and !commands clutter it: switch on Hide bots and Hide !commands in the chat’s settings.
  • Someone saw your link: a manager can click New URLs under Add to OBS. The old link stops working.

Streaming IRL

The same link works in IRLHost Studio, the cloud OBS, as a Browser source. For a screen that takes over when your signal drops, see Set up a BRB scene for IRL streams.

FAQ

Is the chat overlay free?

Yes. The chat overlay and every other built-in widget in Layrs are free.

Is my Twitch login in the OBS link?

No. Layrs reads Twitch chat without your login, and the OBS link is a Layrs key you can replace any time.

Can viewers see my chat dock?

No. Docks live in the OBS window, outside what you stream.

Get a chat overlay link

Free. Sign in, pick a chat and paste the link into OBS.