OBS Browser-Source Overlays: Goal Bar, Ticker & Countdown
The cleanest way to add overlays to OBS isn’t a plugin or a paid bot — it’s a browser source. You paste a URL, OBS renders it as a transparent layer over your scene, and you can stack as many as you like: a goal bar, a scrolling ticker, a countdown, lower thirds. This guide explains how browser sources work, the setup steps people get wrong, and how to combine the main overlays into one clean layout.
Why browser sources beat plugins
A browser source is just a web page OBS draws on top of your scene. Because the overlays here are web pages with transparent backgrounds, you get a few real advantages over installed widgets:
- No plugin, no login, no OAuth — nothing to install or connect to your channel.
- They run client-side — fast, light on CPU, and your settings stay in your browser.
- They stack — each overlay is its own source you can position, resize, and toggle independently.
The trade-off is that these are overlays you control (you update the numbers), not bots wired into Twitch events — which is exactly what keeps them free and private.
Adding a browser source in OBS (the steps that matter)
- In OBS, under Sources, click + → Browser.
- Paste the overlay’s URL into the URL field (leave “Local file” unchecked).
- Set Width 1920 and Height 1080 — match your canvas so the overlay positions itself correctly. This is the step most people get wrong; a mismatched size pushes the overlay off-screen.
- Click OK, then drag/scale the source in the preview.
- To change a value live (like a goal count), right-click the source → Interact, then click the overlay’s on-screen buttons.
One gotcha: if you edit the overlay’s settings on the website after adding it, copy the new URL and update the source — the URL carries the configuration.
The core overlays
Goal bar
A progress bar toward a follower, sub, or donation milestone — the single highest-converting overlay, because visible progress makes viewers want to finish it. Set the label, current, and target in the Goal Bar Overlay, enable the +/- buttons, and nudge it live through Interact. It remembers its value across an OBS restart. Full walkthrough: How to Add a Follower / Sub Goal Bar to OBS.
News ticker
A horizontal bar that scrolls announcements — schedule, socials, sponsor messages — across the bottom of the screen. The Streaming News Ticker animates with a GPU-accelerated transform, so it stays smooth without taxing the CPU OBS is already using to encode. Details: How to Add a Scrolling News Ticker to OBS.
Countdown
A timer for “starting soon” screens, break timers, or counting down to an event. Add the Stream Countdown Overlay as a browser source so viewers know exactly how long until you’re live or back.
Lower thirds
The name/title strip that slides in along the bottom — useful for introducing yourself, a guest, or the current segment. Build one with the Lower Thirds Generator and add it as its own source so you can show and hide it per segment.
Combining them into one layout
Because each overlay is a separate transparent source, a tidy layout is mostly about placement and not overlapping the action:
| Overlay | Usual position | Notes |
|---|---|---|
| Goal bar | Top center or above webcam | Keep it short; update via Interact |
| News ticker | Bottom edge | Full width; one continuous loop |
| Countdown | Center (starting-soon) or corner | Large for “soon” screens |
| Lower thirds | Lower left | Show per segment, then hide |
Add each as its own browser source at 1920×1080, position it, and group related ones into a scene. Keep the goal bar and ticker clear of the bottom-center where game UI and captions usually sit.
FAQ
Do I need a plugin or an account?
No. Each overlay is a browser source — a URL you paste into OBS. There’s no plugin to install and no login, which is what keeps them free and private.
Why is my overlay off-screen or huge?
Almost always a size mismatch. Set the browser source to 1920×1080 (your canvas size) rather than a small default; the overlay positions itself relative to that.
How do I update a goal or timer mid-stream?
Right-click the source → Interact, then use the overlay’s on-screen buttons. The goal bar’s count persists if OBS restarts.
Will several overlays slow my stream?
Not noticeably. They’re lightweight web pages using GPU-accelerated CSS, so a handful of them together stay easy on the CPU your encoder needs.
Do these work in Streamlabs or Twitch Studio?
Yes. Any software with a browser source (Streamlabs OBS, Twitch Studio, and OBS Studio) can use the same overlay URLs the same way.
Building a stream layout from scratch? Start with the Goal Bar Overlay and Streaming News Ticker, add each as a 1920×1080 browser source, and position them clear of the action — then layer in a countdown and lower thirds as you need them.