How to show Twitch chat on stream in OBS: a 2026 setup guide

Why put Twitch chat on screen at all?

Direct answer for the search box: open OBS Studio, add a Browser source, paste https://www.twitch.tv/popout//chat?popout= as the URL, set Width 400 and Height 600, then drop the source on top of your scene. That is the no-extension, no-account, no-subscription path. The rest of this guide layers in transparency, BTTV/7TV emotes, mobile and a Stream Deck toggle.

Who this guide is written for:

• first-time Twitch streamers who want chat readable on stream from day one
• single-monitor streamers who keep losing the popout window behind the game
• creators who already use Streamlabs or StreamElements but cannot get the box transparent
• viewers who want BTTV / FrankerFaceZ / 7TV emotes to render in the on-screen chat
• anyone who hits OBS Forums every other week with "my Twitch chat stopped showing in OBS"

Chat on screen does three things at once. Viewers see their messages render in the broadcast, which lifts session-time and follow rates. The VOD becomes readable: a clip with chat in frame is a stronger highlight than the host laughing at nothing. And the host saves a monitor: one source replaces a second screen for the small channels that do not have one.

What chat on stream actually changes:

• viewers feel heard the second their message appears in the picture, not in a sidebar
• clips and VODs carry the conversation, so context survives the recording
• single-monitor streamers stop alt-tabbing to the Twitch website mid-game
• moderators get a visual cue when a banned phrase slips past AutoMod
• the channel reads as a finished product, not a default OBS scene

One thing the OBS Project itself flags up front, in its public FAQ: "OBS Studio does not directly provide the facilities to show the stream chat in your stream; however, you can display chat overlays from third-party alert providers, which are then embedded in the stream using a Browser Source." That single line is why every method below ends in the same place — a Browser source pointed at a URL.

Six ways to show Twitch chat in OBS

There are six paths used in 2026, ranked by how much setup each one needs. Pick by the trade-off you care about: speed, customization, multistream, or local-only with no third-party account.

• Twitch popout URL straight into a Browser source: zero accounts, full Twitch UI, custom CSS for transparency.
• Streamlabs Chat Box widget: one-click via the Streamlabs Plugin for OBS, supports Twitch, YouTube, Facebook, Kick, Trovo and X.
• StreamElements Chat Box widget: deeper theming, native 7TV emote support, message animations.
• KapChat by NightDev: lightweight, Twitch-only, generated overlay URL pasted into OBS.
• ChatIS or jChat: local browser overlays with full BTTV / FrankerFaceZ / 7TV emote rendering.
• Custom Browser Dock: the chat is visible to the host inside the OBS window, never to viewers.

The split between the first five (visible to viewers) and the sixth (visible to the host only) catches a lot of new streamers. A Custom Browser Dock is a panel inside the OBS interface that loads a webpage and is not part of your video output. Use it as a streamer convenience, not as the chat overlay viewers see. The deadsimplechat 2026 guide flags the same: "Browser Source overlay is visible on your stream" while a dock "doesn't appear in your stream output". For more on what a Browser source can carry beyond chat, see our walkthrough on setting up a webcam in OBS Studio.

Streamlabs Chat Box: the one-click route

Streamlabs Chat Box is the fastest way to land chat on screen if the channel has a Streamlabs account. Streamlabs themselves describe the widget as a way to "display your chat on stream and get sound notifications for new messages" with chat from "Twitch, YouTube, Facebook, Kick, Trovo and X (Twitter)" rendering in the same overlay. For a Twitch-only channel that drops everything into one box.

What you get with Streamlabs Chat Box in 2026:

• one-click install from inside Streamlabs Desktop, or via the Streamlabs Plugin for OBS Studio
• BetterTTV, FrankerFaceZ and 7TV emote support listed on the widget page
• platform selection, badge toggle, font color and size, message fade timing, chat delay, and a custom-word filter
• pre-designed style templates plus full HTML/CSS/JavaScript override for designers
• an optional sound notification on every new message, useful for blind streamers and IRL setups

Setup in OBS Studio is a copy-paste: log into the Streamlabs dashboard, open Chat Box under Widgets, click Show Widget URL, copy the URL, then in OBS click + in Sources, choose Browser, paste the URL, set Width 400 and Height 600. The Streamlabs help center confirms that exact path. The widget is free; Streamlabs Ultra adds extra themes but is not required for the basic on-screen chat.

What Streamlabs gives up: not every theme is free, and the Twitch popout's full set of badges and verified-icon styling is not 1:1 inside the widget. If badge fidelity matters, the popout URL method below is closer to the real Twitch look.

StreamElements Chat Box: deeper customization

StreamElements is the second standard widget host. The chat box ships with more theming dials than Streamlabs out of the box and, unlike Streamlabs, supports 7TV emotes natively. The StreamElements help article gives a working size of 541x670 pixels for the overlay, which fits a corner of a 1920x1080 canvas without crowding the gameplay.

Concrete StreamElements setup, the path that actually ships:

• log into streamelements.com with your Twitch account
• open Streaming Tools, then Overlays, then add a Chat Box widget
• set width 541, height 670, pick a theme, tune font size, message fade and animation
• click Copy Overlay URL; that single URL is the only piece OBS needs
• in OBS, + in Sources, Browser, paste the URL, match the 541x670 dimensions, OK

Native 7TV support is the headline difference. "StreamElements' chat overlay natively supports 7TV emotes, while Streamlabs' doesn't," notes the gist that the BTTV/7TV community keeps pinned. For a channel where 7TV emotes are part of the brand voice, that detail decides the choice on its own.

The trade-off: StreamElements' settings tree is deeper than Streamlabs' click-and-go widget. Plan for ten extra minutes the first time. The reward is a chat overlay that looks like a designed asset, not a default browser window.

Twitch popout URL in OBS: the no-account method

The popout URL is the fastest no-account path. Twitch ships an official popout chat at https://www.twitch.tv/popout//chat?popout= where is your username. That URL drops into an OBS Browser source and renders the real Twitch chat UI: badges, verified icons, raid messages, sub events, the lot.

Step-by-step, no third-party account needed:

• open OBS Studio, click + under Sources, choose Browser, name the source "Twitch chat".
• in URL, paste https://www.twitch.tv/popout//chat?popout= and replace .
• set Width 400 and Height 600 for a corner overlay; bump to 600x800 if the design has more room.
• tick "Refresh browser when scene becomes active" so chat reloads after long away periods.
• for chat overlays, leave "Shutdown source when not visible" off, so the cache survives scene swaps.
• click OK, position the source on the canvas, lock it in place; a similar workflow lives in our guide on building a stream overlay from scratch.

By default the box ships with the dark Twitch background, which clashes with most game scenes. The fix is one block of Custom CSS pasted into the Browser source's CSS field. The community-maintained Bluscream gist on GitHub is the most-copied baseline; here is the minimum that strips background and lifts the text legibility:

• * { background: transparent !important; font-family: "Inter", sans-serif !important; }
• .chat-line__message { color: #ffffff !important; -webkit-text-stroke: 1px #000; font-size: 1.6rem; }
• .stream-chat-header, #chat-room-header-label, .chat-input { display: none !important; }
• ::-webkit-scrollbar { display: none; }

The first rule kills the background and locks a font. The second rule makes the text white with a black stroke, so it stays readable over light and dark gameplay. The third hides the input box, the channel header and the chat-room banner — none of those belong on stream. The fourth removes the scrollbar that OBS otherwise renders inside the source.

If the popout still ships with a colored background after CSS, the OBS Forums veteran fix is a Color Key filter on the Browser source. Right-click the source, Filters, + Color Key, sample the chat background color with the picker, slide Similarity until the field clears. That trick saved several threads on obsproject.com forum where pure CSS transparency would not stick after a Twitch UI update.

Streamlabs vs StreamElements vs popout: which fits?

All three options put Twitch chat on stream in roughly five minutes. The difference is what each one optimizes for. Streamlabs wins on first-touch speed for one-click setup. StreamElements wins on theming and 7TV. The Twitch popout URL with custom CSS wins on fidelity and on "no third-party account, ever". The matrix below is the practical breakdown:

A short decision rule that holds for most channels in 2026. If the streamer already runs Streamlabs Desktop, stay there. The one-click Chat Box is the lowest-friction option and supports the same emote services. If 7TV is a brand pillar or the layout demands designer-grade theming, switch to StreamElements. If the channel runs OBS Studio alone with no third-party tools and the streamer wants the real Twitch UI rendered as-is, paste the popout URL and a CSS block.

There is no wrong pick of the three. There is, however, a wrong pick of the platform around the chat: a thin growth curve almost always points at silent first minutes more than chat styling. The widget choice does not save a stream that has no incoming messages; that is a separate problem solved by community-building, raid networks, and steady upload of clips and shorts.

Tweaks pros use: BTTV/7TV emotes, mobile, Stream Deck

Once chat is on screen, four upgrades show up in every advanced setup. Each takes under fifteen minutes and addresses a real complaint that the basic methods leave on the table.

1) BetterTTV, FrankerFaceZ and 7TV in the popout. The bare Twitch popout does not render BTTV, FFZ or 7TV emotes; it only knows native Twitch ones. The community workaround is ChatIS (a jChat fork) which streamers wire in as a Browser source. Per its public docs, ChatIS "is an overlay that allows you to show your Twitch chat on screen with OBS, XSplit, and any other streaming software that supports browser sources, and it supports your BetterTTV, FrankerFaceZ and 7TV emotes". A second option is the open-source multi-chat-overlay on GitHub, which renders Twitch and Kick chat at the same time.

2) Mobile and IRL streams. Streamlabs Mobile is the cleanest path on phones. The app exposes Platform Settings for in-app chat, chat emotes and ingest server, so a mobile stream can ship chat in-frame without a desktop. Twitch Studio's In-Game Overlay is the other option for hosts on a single Windows monitor: "the In-Game Overlay feature in Twitch Studio's settings is particularly useful if you're on a single monitor setup, and you want to be able to see your alerts and chat on screen while you're gaming". Some games block it, so test before going live.

3) A Stream Deck button to toggle chat on and off. The Elgato Stream Deck plugin for OBS exposes a Source Visibility action; a single button hides or reveals the chat source mid-stream without touching OBS. Useful when chat blocks an in-game UI element on a specific scene. The plugin is free on the Elgato Marketplace and ships for macOS and Windows.

4) Performance settings that prevent chat from eating CPU. Open the Browser source's Properties and confirm three boxes: "Refresh browser when scene becomes active" (on), "Shutdown source when not visible" (on for unused scenes only), and "Page Permissions" (no audio unless the streamer wants the message ping). The OBS forum still flags a Studio Mode bug where shutdown does not unload the page, so for chat overlays that live on the main scene this is a minor concern. If chat ever "freezes" mid-stream, which is a recurring obsproject.com forum thread, right-click the Browser source and pick Refresh.

Chat goes hand in hand with custom commands and basic moderation; if the channel is empty most of the time, our reference on Twitch chat commands and the primer on Twitch chat basics save a stream from awkward silence. Streamers who pre-build greetings can also pull from custom messages for Twitch for ready-made bot lines.

Day-one polish that lifts the chat from "functional" to "finished":

• drop chat into a corner where it never overlaps the in-game minimap, health bar or kill feed.
• use white text with a 1px black stroke; both light and dark gameplay stay readable.
• set message fade to 30-60 seconds so the box does not pile messages during high-traffic moments.
• match the chat font to the channel branding (Inter, Roboto, Lato; all three rank high in stream skin packs).
• test the layout from a phone before a real stream, since over half of Twitch viewers are on mobile, per Streamlabs' own field reports.
• build a second scene with chat hidden for cinematic moments and bind it to a Stream Deck multi-action.
• leave a 4:3 dead zone in the middle of the canvas; the chat lives at the side, never the center.

Engagement comes from the message rate, not the box style. The reverse is also true: a well-styled chat that nobody types in is just decoration. If the channel is starting from a quiet room, the practical first move is steady audience-building over weeks; for a paid jump-start without violating Twitch policy on bots, real-viewer services exist on the market; see the StreamRise live-viewer service for one example we operate. Either way, the chat overlay is the receipt of the work, not the work itself.

Twitch chat on stream FAQ

What is the URL to add Twitch chat to OBS?

Use https://www.twitch.tv/popout//chat?popout= and replace with your Twitch username. Paste the result into a Browser source in OBS. The format is the same one Twitch ships when a viewer clicks the gear icon in chat and picks Popout Chat; the popout window's address bar holds the exact URL.

What size should a Twitch chat overlay be in OBS?

400x600 pixels is the practical default and the size most 2026 guides cite. StreamElements documents 541x670 as a slightly wider option with more vertical room. For larger 1080p designs, 600x800 holds more messages without breaking layout. Test on the actual scene; the right size is the one that does not cover game UI on the streamer's most-played title.

How do I make Twitch chat transparent in OBS?

Two routes work. Paste a Custom CSS block into the Browser source: body { background-color: rgba(0, 0, 0, 0) !important; margin: 0 auto; overflow: hidden; } as the minimum, then add white text and a black stroke for readability. If CSS does not stick after a Twitch UI update, add a Color Key filter to the Browser source, sample the chat background, raise Similarity until the field clears. Forum threads on obsproject.com confirm Color Key is the more reliable long-term fix.

Why is my Twitch chat not showing in OBS?

Five common causes from the OBS Forums troubleshooting threads. The full popout URL was not copied. OBS de-authorized the Twitch OAuth token; disconnect Twitch in Settings, Stream, then reconnect. Browser Source Hardware Acceleration is on and conflicts with the GPU driver. Browser cache is stale, so right-click the source and Refresh. The chat add-ons setting in OBS is set to BTTV; reset it to None and re-add the source.

Do BTTV, FrankerFaceZ and 7TV emotes work in the OBS chat overlay?

Not in the bare Twitch popout; that one only renders native Twitch emotes. They do work in three places: the Streamlabs Chat Box widget (BTTV, FFZ, 7TV all listed), the StreamElements Chat Box (native 7TV), and ChatIS / jChat overlays which were built for exactly this. Pick a widget that names the emote service explicitly; the Twitch popout is too restrictive for emote-heavy channels.

Custom Browser Dock vs Browser source: what is the difference?

A Custom Browser Dock is a panel inside OBS that only the streamer sees; it does not appear in the broadcast. A Browser source is part of the scene and is rendered into the video output viewers receive. Use a dock when the goal is reading chat on a single monitor without alt-tab. Use a Browser source when the goal is putting chat on screen for the audience. Many setups use both at once, with the dock for moderation and the source for show.

Can I show Twitch chat on screen on mobile?

Yes. Streamlabs Mobile exposes Platform Settings on iOS and Android with in-app chat, custom emotes and Scene support, so chat can render in-frame without a PC. Twitch Studio's In-Game Overlay does the same for desktops on a single monitor. Both options carry a caveat (some games block overlays), so a 30-second test before the first live broadcast saves a stream from a missing chat reveal.

Does Streamlabs or StreamElements cost money to use the chat box?

Both ship a free Chat Box widget. Streamlabs adds extra themes inside Streamlabs Ultra (a paid tier) but the basic widget itself is free. StreamElements ships its full Chat Box on the free plan; the paid tiers add storage, sponsorships and analytics, none of which the on-screen chat needs. The Twitch popout URL plus custom CSS stays free forever and never depends on a third-party account.

How do I toggle the chat overlay on and off mid-stream?

Bind a Stream Deck key to the OBS plugin's Source Visibility action and target the chat Browser source. One press hides it, the next press reveals it. Without a Stream Deck the same toggle lives in OBS hotkeys: right-click the source, set a Show / Hide hotkey, bind any free key combo. Useful for cinematic moments, scene transitions, or when chat starts blocking an in-game alert.

Registration