How do you add a Browser Source in OBS?
Once you type your channel name on the setup page and hit Copy, follow these steps in OBS Studio:
- Select the scene the widget should appear in.
- In the Sources dock, click + and pick Browser from the list.
- Give the source a name, for example "Chat Box", and click OK.
- In the properties window that opens, clear the URL field and paste the widget URL you copied.
- Enter the values from the table below in the Width and Height fields.
- Click OK and drag the source wherever you want it in the scene.
The Chat Box setup page shows these steps along with the recommended size when you copy the URL. If you want to be sure, open the URL in a regular browser tab first and check that it works.
What size should each widget be?
Every widget has a recommended source size. Enter these values in the Width and Height fields in OBS.
| Widget | Width × Height | Note |
|---|---|---|
| Chat Box | 400 × 600 | A vertical chat column. A bigger source fits more messages, the text stays the same size. |
| Event List | 420 × 520 | A column for the list. New events slide in on top or at the bottom, and a bigger source scales it up. |
| Emote Wall | 1920 × 1080 | A full 1080p canvas. Emotes show up anywhere on the screen. |
| Emote Combo | 600 × 400 | Room for a big emote and its count, with the best combo under them. It stays clear until chat starts a combo. |
| Sub Sprout | 800 × 600 | The plant and pot grow inside this area. |
| IRL HUD Overlay | 1920 × 1080 | A full 1080p canvas. The money and the mini-map each sit in a corner you picked, and fit a vertical canvas too. |
| Weather | 1920 × 1080 | A full 1080p canvas. The weather sits in the corner you picked, and fits a vertical canvas too. |
| Follower Goal | 800 × 260 | A wide strip for the goal bar, with room above it for the +1s to rise into. |
| Bits & Kicks Goal | 800 × 260 | The Sub Goal's strip: the goal bar, with room above it for each cheer's amount to rise into. |
| Top Supporters | 440 × 380 | A small panel for the board, sized for a corner of your scene. |
| Stream Alerts | 800 × 450 | One alert at a time, in the middle of this area. A bigger source scales it up. |
| End Credits | 1920 × 1080 | A full 1080p canvas. The credits roll up the middle when the scene goes live. |
| Socials | 600 × 120 | One handle at a time, in the middle of this strip. The text keeps its size, so a long handle needs a wider source. |
| Counter | 800 × 260 | A wide strip for the counters side by side, with room above them for the +1s to rise into. 440x400 for the stacked layout. |
| Sub Goal | 800 × 260 | A wide strip for the goal bar, with room above it for the +1s to rise into. |
| Stream Countdown | 1920 × 1080 | A full 1080p canvas, so the clock lands in the middle of your starting or BRB scene. |
| Featured Message | 720 × 240 | A wide strip for one message at a time. A long one shrinks to fit, and a bigger source scales it up. |
| Now Playing | 640 × 160 | A wide strip for the card or the one-line pill. A bigger source scales it up. |
| Stream Frames | 1920 × 1080 | 640x360 for a camera, 420x720 for chat, 1920x1080 for the screen. The frame fits whatever size you give it. |
| Lower Thirds | 1920 × 1080 | A full 1080p canvas. The bar sits in the corner you picked. |
| Task List | 480 × 720 | A tall panel for the list. When it runs long, it scrolls by itself. |
| Chat Poll | 640 × 560 | Room for a poll with up to 6 options. It sits at the top or bottom and grows with the options. |
| Viewer Queue | 440 × 600 | A column for the queue: who’s playing now, who’s next and how many are waiting. |
| Raffle | 1920 × 1080 | The winner overlay. Confetti bursts from both sides of the screen and the winner's name appears in the middle. |
| Subathon Timer | 800 × 300 | A wide strip for the health bar, clock or ring. A bigger source scales it up. |
| OBS Bridge | Not a source | Not a visible overlay. Keep the tool open in a browser tab or an OBS dock. |
| Spin Wheel | 800 × 800 | The wheel spins on !spin from chat at 800×800. The global cooldown counts down on screen, so leave room for the wait pill above the wheel. |
To make the Chat Box text bigger, don't stretch the source. Use the Font Size setting on the setup page: 8 to 72 pixels, 18 by default.
Do you need to do anything to make the background transparent?
No. Chat Box, Emote Wall, Sub Sprout, Subathon Timer, Stream Alerts, Sub Goal, Stream Frames, Stream Countdown, Chat Poll, Socials, the Spin Wheel overlay and the Raffle overlay are drawn on a transparent background. You don't need a chroma key or a filter, and you can leave the Custom CSS field in OBS as it is.
If Chat Box is hard to read on a bright scene, turn on Dark Background. It puts a semi-transparent black layer behind the widget, and you can set its opacity anywhere from 0% to 100% (50% by default). If you want each message in its own box, turn on Message Background Box.
Should "Shutdown source when not visible" and "Refresh browser when scene becomes active" be on?
Leave both off for Senchabot widgets. Both reload the page from scratch, and the widget forgets everything it was holding up to that point:
- Chat Box: messages only come in while the source is running. If the source shuts down and comes back, the screen starts empty and only shows new messages.
- Sub Sprout: the plant is saved inside OBS, so a reload keeps the stage it reached, but subs that come in while the source is off don't grow it.
- Sub Goal: the count is saved inside OBS, so a reload doesn't lose it, but subs that come in while the source is off aren't counted.
- Subathon Timer: the time left is saved inside OBS, so a reload doesn't lose it. The timer keeps counting down while the source is off, but it can't see subs that come in during that time.
- Chat Poll: the poll and its votes are saved inside OBS, so a reload doesn't lose them, but votes typed while the source is off aren't counted.
- Stream Alerts: only subs, gifts, cheers and raids that come in while the source is running get an alert. Anything that arrives while it's off is missed.
- Raffle overlay: only the overlay that is open at that moment gets the winner. A winner drawn while the source is off never shows up on screen.
- Emote Wall: emotes stay for 5 seconds by default, so a refresh doesn't cost you anything, but it doesn't help either.
If a widget gets stuck, double-click the source and hit the "Refresh cache of current page" button in the properties window. That reloads the page once.
How do I change a widget later?
Your settings live inside the widget URL, so changing a setting means a new URL. Change the setting on the setup page, copy the new URL, then double-click the source in OBS and paste it over the old URL in the URL field.
You don't have to start over with Chat Box, Emote Wall, Sub Sprout, Subathon Timer, Stream Alerts, Sub Goal, Counter, Event List, End Credits, Viewer Queue, Top Supporters, Lower Thirds, Task List, Emote Combo, Featured Message, Bits & Kicks Goal, Now Playing, Chat Poll, Stream Frames, Socials, Stream Countdown, IRL HUD Overlay, Weather or Spin Wheel. Paste your current URL into the Widget URL field on the setup page and your channels and all your settings come back. Change what you want and copy the new URL.
OBS Bridge has no paste field, so enter your settings again on its setup page and copy the new tool URL. You can also change scene picks and authorized users on the tool page itself and grab the new URL with its Copy Updated URL button. Old URLs keep working, so you don't have to update them.
What should I do if the widget doesn't show up in OBS?
Most of the time the channel name is the problem. Go through these checks in order.
Is there a link in your widget URL instead of the channel name?
The URL needs just the name, like twitch=senchabot. The channel fields on the setup page turn a pasted link into the name, but an older URL, or one edited by hand, can still hold the whole link, and then the widget can't connect to any chat. Make a new URL on the setup page.
Does the channel actually exist?
Check the name for typos. A channel that doesn't exist on Twitch doesn't throw an error. The widget just stays empty.
Has anything happened in chat yet?
Chat Box and Emote Wall stay completely empty and transparent until something happens in chat. Send a message in chat; for Emote Wall it has to be a message made only of emotes by default, but with Show All Emotes on, emotes inside normal messages count too. The Raffle overlay also only appears when a winner is drawn and disappears after 10 seconds. Sub Sprout and Subathon Timer, on the other hand, show up right away.
Kick channel not found?
When the widget opens, it looks up the Kick channel on kick.com. If that lookup fails (wrong name, the channel doesn't exist, or Kick doesn't respond), Kick messages won't come in. Type your Kick name exactly as it appears in the kick.com URL. Some Kick links write the _ in a name as -: the Kick Channel field on the setup page checks kick.com and switches to the link's spelling for you.
Does the URL work in a browser?
Open the URL in a regular browser tab. If it works there but not in OBS, check the source's URL field and size.