OBS Card Price Overlay – Browser Source, Size, Position and Testing

Mateusz Ryś · October 28, 2026 · about 6 min read

An OBS card price overlay is a web page with a transparent background that OBS displays on top of your camera feed. You add it as a Browser source, set the size to 1920×1080 and pick a screen corner. The whole thing takes a few minutes.

How an OBS price overlay works

OBS can show web pages as a layer in a scene – that’s what the Browser source is for. A card price overlay is exactly that kind of page: the background is transparent, so viewers see your camera feed with a panel in the corner showing the card, the set name and the price.

Why bother? A viewer who joins halfway through a rip instantly sees what was pulled and what it’s worth – no asking in chat. You don’t have to look up prices on your phone mid-stream, and big hits get a presentation people love to clip.

The overlay updates live: the card recognition app sends each new card to it, and OBS simply displays it. That’s why the overlay works with any platform you stream to from OBS – Twitch, YouTube, TikTok or Whatnot.

Adding the overlay in OBS step by step

In OBS, select the scene the overlay should go in (e.g. your main hand cam scene).
In the Sources panel, click + and choose Browser. Give the source a name, e.g. “Overlay – price.”
In the URL field, enter the overlay address. In RipWorth it’s the app address + /overlay.html, e.g. http://localhost:5177/overlay.html.
Set width to 1920 and height to 1080. The overlay background is transparent – no chroma key filters needed.
If the overlay should play sounds, check Control audio via OBS. The audio shows up in the mixer as its own channel.
Click OK. The overlay source must sit above the camera in the source list – otherwise the camera will cover it.

If your OBS canvas isn’t 1920×1080, fit the source to the screen (right-click the source → Transform → Fit to screen) so the overlay isn’t cropped.

Position and URL options

The overlay covers the whole screen, and the card panel appears in the corner you choose. You set the corner and other options by adding parameters to the URL:

Add to the URL	What it changes
?pos=br	screen corner: br – bottom right, bl – bottom left, tr – top right, tl – top left
&hold=12	how many seconds the card stays visible
&cur=USD	overlay currency: PLN, USD or EUR
&sound=0	turns sounds off for this overlay only
&vol=0.5	volume for this overlay (0–1)
&hits=0	turns hit effects off for this overlay only

Example: http://localhost:5177/overlay.html?pos=bl&hold=8&cur=USD – the card in the bottom-left corner for 8 seconds, priced in US dollars. The first parameter starts with “?”, every next one with “&”. Pick a corner where you won’t cover your hands, the mat or the platform’s logo.

Testing and troubleshooting

Before you go live, test the overlay. In the app’s live tab, open the help on adding the overlay to OBS and use the button that sends a test card to the overlay. A card panel with a price should appear in the OBS preview.

If nothing shows up:

check that the URL in the source is typed exactly right and that the app is running,
after changing the URL, click Refresh cache of current page in the source properties,
make sure the source is visible (eye icon) and sits above the camera,
if there’s no sound – check the OBS audio control option and the mixer slider.

Hits, themes and a second stats overlay

When a recognized card is worth at least a set amount, the overlay plays a hit effect. There are three tiers with thresholds you choose – for example:

HIT! – from $25: a pulsing gold frame, confetti and the price counting up from zero,
BIG HIT! – from $100: sparks and a flash on the card as well, and the card stays up longer,
MEGA HIT! – from $500: the card first appears center screen with light rays, then moves to the corner.

Thresholds, labels, sounds (including your own MP3, OGG or WAV files), volume and the overlay theme – classic, neon or minimal – are set in the shop panel, in the stream hits and sound section. There are test buttons for every tier. Your shop logo and color appear on the overlay automatically.

A second Browser source with the URL http://localhost:5177/overlay-stats.html shows the break tracker and a table of top pulls. Parameters: ?show=break or ?show=top (just one element), &pos=tr (corner) and &n=5 (how many cards in the table). How to run a break: what is a card break.

Best practices on stream

Don’t cover the cards – the overlay panel belongs next to the mat, not on top of it.
One currency – US viewers understand dollars best; for an international audience, consider whether USD or EUR fits better.
Sensible volume – the hit sound should be fun, not drown out your voice.
Dry run first – before your first real stream, record a few minutes locally with the overlay and watch it the way a viewer would, including on a phone.
Honesty – the price on the overlay is a ballpark for a card in near-mint condition, not a guaranteed sale price. Worth telling viewers once.

We cover the full scene layout and gear in how to stream pack openings.

Frequently asked questions

What size should the overlay be in OBS?

Width 1920 and height 1080. The overlay background is transparent, and the card panel appears in the corner you choose.

How do I change the corner where the card appears?

Add the pos parameter to the overlay URL: br (bottom right), bl (bottom left), tr (top right) or tl (top left), e.g. overlay.html?pos=bl.

Why is my OBS overlay not showing anything?

Usually because of a wrong URL or a stale cache. Check the URL, click “Refresh cache of current page” in the source properties and send a test card to the overlay.

Does the overlay work on TikTok and Whatnot?

Yes, if you stream from OBS. The overlay is part of the image OBS sends, so it works on any platform that accepts an OBS stream. Check each platform’s current rules to see whether and how it allows this.