Overlays in OBS

What an overlay is

An overlay is a page of the application that a Browser Source in OBS opens. It draws one thing for the viewers — a card, the chat, a bar — on a transparent background, without any of the controls you use while setting it up. Every overlay is set up on its own page inside the app, and that page is where its link comes from.

Which overlays there are

Eleven of them, spread over three groups in the sidebar. Auction and Carousel only appear once those add-ons are installed and switched on — Module Catalog → Add-ons.

• Widgets → Alerts — the cards for donations, subscriptions, follows, raids and channel point rewards. Alerts are kept in groups, and every group is a link of its own.
• Widgets → Chat Overlay — the chat messages.
• Widgets → Fundraising — the donation goal bar.
• Settings → Sound — not a widget at all any more. Sound is played by the app itself, and a browser source for it exists only as a fallback. It is the spare path; normally the application plays the sound itself.
• Widgets → Ticker — the running text lines. Every line in the list is a link of its own.
• Auction → Lots overlay — the board: the countdown and the leaderboard of lots.
• Auction → Wheel overlay — the wheel that draws the winner.
• Auction → Bracket overlay — the battle royale tree, moving to the current match by itself.
• Carousel → Carousel overlay — the ribbon of cards that stops on the one that won.
• Carousel → Pool bar overlay — how much is in the pool and how much is left until the next spin.
• Carousel → Challenge list overlay — the challenges with their counters and countdowns.

Getting the link into OBS

1. Open the overlay's own page in the sidebar.
2. Press the copy button. Every overlay page has one, sitting beside the link it copies and marked with the two-squares copy icon. Each page words it a little differently, always starting with Copy, so go by the icon and by where it sits rather than by the exact wording. Some pages then confirm with a word or a message and some copy silently — either way the link is on the clipboard.
3. Alerts and Ticker are the two pages that hold several overlays at once, so there the button is not in the page header: it sits on the row of the group or the line you want.
4. Paste the link into a Browser Source in OBS. Nothing else has to be filled in there.

Use the button, not your mouse. On the pages that print the address beside the button, what is printed is deliberately short: the access key is left out of it, because that line sits on screen while you stream. The button copies the complete link, key and all. An address read off the page, or taken from the browser's address bar, has no key in it and the second computer refuses it. Text that is covered rather than shortened is a different matter — the guide "What the app hides on screen" explains that one.

Sizing the source

Overlays fill the Browser Source exactly, so the size of the source is the size of the overlay. A short chat source shows one or two messages, because older ones are trimmed to fit. Sounds is the exception: nothing is drawn, so the size does not matter.

Changing things while the stream runs

Save something on a widget page and the source in OBS follows by itself — the look and the settings both. You do not have to refresh the browser source, and you do not have to copy the link again.

Three overlays keep part of that outside the app: the auction board, the wheel and the bracket write some of what they show into the link itself, under Link parameters on their pages. Flip one of those switches and the link has to be copied and pasted again.

One link, whatever language you switch to

The overlays that carry wording of ours — the chat, the goal bar, the pool bar, the auction board, the wheel and the bracket — take the language from the application and change with it while the source stays open. There is no link per language and nothing to re-copy after switching. The rest have no wording of ours at all: what stands on screen is your own text, viewer names and numbers.

Fonts arrive the same way. An overlay on a second computer is dressed by the application, so the font you chose looks the same there whether or not it is installed on that machine.

Nothing is shown until something happens

Chat starts empty and fills from the next message, alerts stay hidden until one fires, and Sounds is silent until a sound is sent. None of them replays what it missed before the source was opened. The carousel ribbon behaves the same way for a different reason: unless you tell it otherwise it slides away once there is nothing left to spin.

The overlays that show where things stand rather than what just happened do not have this problem: the goal bar, the pool bar, the challenge list, the auction board, the wheel and the bracket draw the current state as soon as they connect, and the ticker starts running its phrases straight away.

How an alert overlay keeps in touch

The overlay checks in every 15 seconds, and a group that has been quiet for three minutes is dropped from the queue.

Testing

Two things reach a real OBS source. Test Mode on the Chat Overlay page sends a made-up message through the application, and the play button on a row of the alerts list — Show in OBS — plays that alert for real, queue and sound included. Both need their module switched on.

Everything else marked as a test on a widget page moves the preview on that page only: the Test tab in the alert editor, Test Progress on Fundraising, and the Play buttons that let you hear a sound file.

Alert sound does not come from the browser source

The application plays alert sound itself; OBS picks it up with an Application Audio Capture source. Leaving "Control audio via OBS" unticked is right for most overlays — but not for the carousel, the carousel bar and the challenges: those three still make their own sound inside their browser source, so keep it ticked on them. Otherwise it is correct. More on this in the guide "Sound".

OBS on a second PC

Two things have to be true. Access from your local network must be switched on in the application — the guide "Core" has that switch and explains what it costs. And the link has to be the one the copy button gave you: it carries both this machine's address and the access key.

If the source shows a message instead of the overlay, it names the reason itself — the article "Overlay is blank" says what each one means.

What overlays cannot do

• Where an overlay sits and how large it is belong to the Browser Source in OBS. No overlay page has a position or a size field.
• Nothing in an overlay can be clicked. They are pictures for the viewers, not controls.
• There is no page anywhere listing every overlay link. Each link lives on its own widget page and nowhere else.
• The link cannot be typed out or shortened by hand. The access key is part of it, and a link without that key is refused everywhere except the computer running the application.
• Chat, alerts and Sounds have no memory. What happened before the source was opened is gone for good, and there is no way to replay it.