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

They sit in three groups of the sidebar. Some of them are add-ons, and their pages appear only once installed and switched on in Module Catalog → Add-ons: Mascot, Input and Timers in the Widgets group, and the whole Auction and Carousel groups. Until then those entries are not in the sidebar at all.

• 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 → Donation Goals — the donation goal bar.
• Widgets → Mascot (add-on) — an animated cat with a fundraising goal of his own, who answers donations, petting commands, subscriptions and follows.
• Widgets → Input (add-on) — the keys and mouse buttons you press, lighting up in your scene.
• Widgets → Lists — the running text lines. Every line in the list is a link of its own.
• Widgets → Timers (add-on, Timers bundle) — countdowns, stopwatches and marathons that donations add time to. Every timer is a link of its own.
• Auction → Board 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.

Settings → Sound is not an overlay at all any more. Sound is played by the app itself, and that page offers a browser source only as a spare path, for cases such as OBS on a second PC; the guide "Sound" explains it.

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, 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. Most overlay pages hold several overlays at once and open on a list of them. There the button sits on the row of the overlay you want (on Alerts, on the row of the group; on Lists, on the row of the line), and it copies the complete link, key included.
4. Paste the link into a Browser Source in OBS. Nothing else has to be filled in there.

Use the button, not your mouse. The overlay pages do not print the address: the copy button is the only way to get it, and it copies the complete link, key and all. An address taken from the browser's address bar has no key in it, and the second computer refuses it. If an older version of an add-on still prints a shortened address beside the button, the key is left out of that line on purpose, because it sits on screen while you stream: copy with the button all the same. 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.

Two overlays keep part of that outside the app: the wheel and the bracket write some of what they show into the link itself, under Link parameters on their pages. Change one of those settings, press Save Settings, and only then copy the link again and paste it into OBS. Copy link carries what was saved, so a link copied before saving still has the old values.

The auction board no longer has Link parameters: Lots on screen and Description are set in the board's editor, in the Board section, and reach OBS like any other setting. A board link copied earlier still carries the old values, and OBS follows them until you change those two fields in the editor and save.

An update is a different matter. A Browser Source that is already open keeps the page it loaded, so after strAImer or an add-on updates, what you see in OBS can be the previous version, for example without a newly chosen Material. The alerts, the auction board, wheel and bracket, the carousel ribbon and the pool bar reload by themselves at a quiet moment, without cutting an alert or a spin that is playing. The chat, goals, lists, timers, mascot, input and challenge list overlays take the new version the next time OBS loads the source: refresh the source in OBS or restart OBS. The pool bar from before strAImer 0.25.0 cannot reload itself yet either, so refresh it once after this update.

Switching one overlay off

Most overlay pages open on a list, and every row starts with a switch. Its tooltip reads On air on most pages, Count donations and show in OBS on Donation Goals and Enabled on Alerts and Lists, where a whole group of alerts also has its own switch. It works at once, there is nothing to save, and a row switched off turns grey or is marked off.

• A switched-off overlay disappears from every scene that holds its link, and stops moving and making sound. You do not have to touch the source in OBS: switch it back on and it returns by itself.
• It also stops doing its own work. A donation goal and a mascot take no donations while switched off and carry on from the same amount once switched back on; a chat overlay takes nothing from chat and starts empty again.
• On the auction and carousel overlays (Board overlay, Wheel overlay, Bracket overlay, Carousel overlay, Pool bar overlay) and on Challenge list overlay the switch turns off only that screen. Bids, money, spins and challenge timers keep going. The auction and the carousel themselves stop with the power button on the Auction: Control and Carousel: Control tiles of the Control Panel.
• An overlay deleted from its list goes dark the same way if its link is still in OBS.
• The preview in the editor shows a switched-off overlay as if it were on, so you can set it up before switching it on.

Hiding the source in OBS with the eye is not the same thing. The overlay keeps working out of sight: a hidden goal or mascot keeps counting and a hidden chat keeps its feed. That is the way to collect quietly, without viewers seeing the bar.

If a switch seems to do nothing in OBS right after an update, the source is still showing the previous version of the page: refresh it, as "Changing things while the stream runs" explains.

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 and the challenge list draw the current state as soon as they connect, and the ticker starts running its phrases straight away. The auction board, the wheel, the bracket and the pool bar first wait for their add-on to say where things stand, and show nothing until it does. So they stay empty while the auction or the carousel is switched off on its Control Panel tile, or is not running at all.

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. Test Mode reaches only the chat overlays whose switch is on, while Show in OBS plays an alert even with its switch off, so you can check its look before switching it 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 Donation Goals, and the ▶ button in a sound slot (its tooltip reads Listen), which plays the file on that page only.

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

• An overlay moves only inside its own Browser Source: where the source sits in the scene and how large it is are set in OBS. Inside the source there are settings. Every overlay except alerts has Edge padding in its look, a margin from the edges of the source so that glow and animations are not cut off. Alerts have Placement instead, which pins the card to an edge or a corner and limits its width; the goal bar has Block width; the mascot has a size and offsets of its own.
• 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.