Overlay Deck — Setup Guide

Start here

How it all works

There are two pieces that work together. You install both once, and they talk to each other automatically on your own computer — your data never leaves your machine.

Chrome Extension

Reads the live data from your Whatnot stream tab (sales, bids, viewers).

Helper App

Receives that data and turns it into overlay pages. Your control center.

OBS

Shows the overlays on your stream as Browser Sources.

The Helper App

A small desktop app (lives in your menu bar / system tray). It's your control panel: shows live stats, hosts the overlays, and holds your pairing key.

The Chrome Extension

A Chrome add-on that quietly taps the live data on your Whatnot stream page and sends it to the helper app. Nothing to configure beyond pairing.

Why an extension and an app? Chrome can't show overlays in OBS by itself, and OBS can't read Whatnot's live data by itself. The extension grabs the data; the app turns it into clean overlay pages OBS can display.

Checklist

Before you start

A Mac (Apple Silicon or Intel) or Windows PC.
Google Chrome, version 111 or newer (open chrome://settings/help to check).
OBS Studio installed (free, from obsproject.com).
The download bundle you were given (the app installer for your system + the extension .zip) and your license key.

Tip: Do these steps in order. Installing the app first makes the extension connect cleanly the moment it loads.

Step one

Install the Helper App

Pick your operating system:

Open the .dmg for your Mac.
Apple Silicon (M1/M2/M3/M4) → the file ending in -arm64.dmg. Older Intel Mac → the one without arm64. Not sure? Apple menu → About This Mac.
Drag “Overlay Deck” into the Applications folder, then open your Applications folder.
Right-click the app → choose Open → click Open again in the dialog that appears.
Important: don't double-click the first time — that only offers a “Cancel” button. Right-clicking is what gives you the “Open” button. After you do this once, you can open it normally forever.

If macOS says “can't be opened because it is from an unidentified developer” and there's no “Open” button (newer macOS does this), use the Settings route instead — one time:

Double-click the app once and let it get blocked (click Done/Cancel).
Open System Settings → Privacy & Security.
Scroll down to the Security section — you'll see ““Overlay Deck” was blocked…” with an Open Anyway button. Click it, authenticate, then click Open.

Why does this happen? The app isn't yet registered with Apple's paid notarization program, so macOS flags it on first launch — exactly as it would for any app installed outside the App Store. It's safe; these steps just tell your Mac you trust it.

Double-click Overlay Deck-Setup.exe.
When the blue “Windows protected your PC” box appears: click the small More info link, then click the Run anyway button that appears.
The “Run anyway” button only shows up after you click “More info” — that link is small and easy to miss.
Choose an install location (or accept the default) and finish. The app launches and adds itself to the system tray — bottom-right by the clock; click the ^ arrow if you don't see its icon.

No “Run anyway” button, or the file won't run at all? Windows may have “blocked” the downloaded file. Fix it once: right-click the .exe → Properties, then at the bottom tick “Unblock” → OK, and run it again.

Why does this happen? The installer isn't signed with a paid code-signing certificate yet, so SmartScreen warns on first run — normal for software installed outside the Microsoft Store. It's safe; these steps just confirm you trust it.

When it opens

The control panel window appears, and an icon is added to your menu bar (Mac) / system tray (Windows). Closing the window keeps it running in the background — reopen it any time from that tray icon. Leave it open for now; we'll come back to it.

Step two

Install the Chrome Extension

Unzip the extension somewhere permanent.
e.g. your Documents folder. Don't delete the folder afterward — Chrome loads the extension directly from wherever it lives.
Open chrome://extensions in Chrome.
Type or paste that into the address bar.
Turn on “Developer mode” — the toggle in the top-right corner.
Click “Load unpacked” and select the unzipped overlay-deck-tap folder.
The Overlay Deck Tap tile appears. Make sure it's enabled (toggle on).
Pin it to your toolbar (puzzle-piece icon → pin) so you can reach its pairing button easily.

Heads-up: Chrome may occasionally ask “Disable developer-mode extensions?” on startup. Click Keep / cancel — it's harmless and unavoidable for any extension installed outside the Chrome Web Store.

Step three

Activate your license

Overlay Deck needs an active license to run. Until you activate, the overlays show an “Activate” card and the live stats stay hidden — so do this first.

Open the app and click the gear ⚙ in the top-right.
At the top of Settings, under License, paste the license key from your purchase and click Activate.
The badge turns Licensed — the overlays and Card Comp unlock right away.

Your key works on one computer. The app quietly re-checks it now and then — if you ever see an “Activate Overlay Deck” card on your overlays or a locked control panel, your license isn't active: re-enter the key and make sure you're online.

Step four

Pair the two & go live

Now connect the extension to the app, then open a stream.

Make sure the Helper App is open.
Copy the Pairing Key from the app's Pairing Key panel (the Copy button).
If the app says “OPEN MODE — no key required,” you can skip pairing entirely.
Click the extension's toolbar icon and paste the key into its box, then save.
Open a Whatnot live stream in Chrome — a whatnot.com/live/… page.
Look at the app's status badge. It should flip from STANDBY to ON AIR, and the Viewers / Sales numbers start updating.

Important habit: any time you reload or update the extension, refresh the Whatnot stream tab once (⌘R / Ctrl R). The data tap attaches when the page loads, so a reloaded extension needs a fresh page load to reconnect — even though the app may still say ON AIR.

Seeing live viewer counts and buyers appear in the control panel? The pipeline is working. On to OBS.

Step five

Add the overlays in OBS

Each overlay is just a web page the app hosts on your computer. You add it to OBS as a Browser Source. There are three:

Overlay	What it shows	Recommended size
Leaderboard LDR	Top buyers, ranked, with amounts & sale counts	287 × 370
Viewers VWR	Live viewer count	240 × 90
Card Comp CMP	The card you're pricing + its market value	320 × 150

For each overlay you want

In the app's OBS Widgets panel, click Copy URL next to the overlay you want (Leaderboard, Live viewers, Card Comp, or Floating Logo).
The address looks like the examples below — your exact port number may differ, so always copy it from the app.
In OBS: under Sources, click + → Browser → Create new → OK.
Paste the URL into the URL field.
Set Width and Height to the recommended size from the table (or larger — the overlays are transparent, so extra space never shows).
Click OK, then drag/resize the overlay on your canvas where you want it.

LDRhttp://localhost:16969/widgets/leaderboard

VWRhttp://localhost:16969/widgets/viewers

CMPhttp://localhost:16969/widgets/comp

FLThttp://localhost:16969/widgets/floatlogo

These are examples using the default port 16969. Always copy the real URL from the app's OBS Widgets panel in case your port is different.

The overlays auto-reconnect. You can leave the Browser Sources in OBS permanently — when you start the app and go live, they fill in on their own. The Comp overlay stays invisible until you actually pick a card.

Reference

The control panel, panel by panel

Live meters

Three big numbers across the top: Viewers, total Sales, and Volume (total $ sold) for the current stream.

Top Buyers

The same ranked list your Leaderboard overlay shows, so you can monitor it without switching to OBS.

Card Comp

Capture and price a card mid-auction. See the Card Comp section.

OBS Widgets

The four overlay URLs (Leaderboard, Live viewers, Card Comp, Floating Logo) with their recommended sizes and one-click Copy URL buttons.

Pairing Key

The key you paste into the extension to link it to this app.

Port

The network port the app uses. Only change this if another program conflicts — then click Restart and re-copy your overlay URLs into OBS.

The status badge top-right reads STANDBY when no stream data is arriving and ON AIR when the extension is feeding live data.

Customize

Widget settings

Click the gear in the top-right of the control panel to open Widget Settings. Every change applies live to the Leaderboard overlay in OBS — no refresh needed.

Show dollar amounts

Toggle the $ spent next to each buyer on or off. Turn it off if you want to celebrate your top buyers without putting their spend on screen.

Show sales count per buyer

Toggle the “×N” badge that shows how many separate purchases each buyer made.

Rank buyers by — Amount / Sales

Choose how the leaderboard is ordered: by total Amount spent (biggest spender on top), or by number of Sales (most active buyer on top).

Buyers shown

How many ranked buyers appear, from 1 to 25. Use the − / + buttons. Showing more makes the overlay taller, so leave a bit of extra height on that OBS Browser Source.

Your settings are remembered between sessions, and a freshly-added or reconnecting OBS source picks them up automatically.

Feature

Card Comp — price a card on the fly

When a card comes up for auction, the Card Comp panel grabs a snapshot from your stream, identifies the card, and shows you matching cards with their market price — so you can drop the value on screen instantly.

One-time: add your API keys

Card Comp uses your own API keys (so you control your usage and costs). You enter them once in the control panel: click the gear ⚙ → Card Comp · API Keys, paste both keys, and click Save keys. They're stored only on your computer. Both have a free tier to start.

Get your keys:
• Anthropic (card identification) → console.anthropic.com/settings/keys ↗
• PokémonPriceTracker (pricing) → pokemonpricetracker.com/api-signup ↗

Click “Comp this card.”
The app captures the current frame from your Whatnot tab and reads the card.
Pick the exact card from the candidate list.
Each result shows a thumbnail, the set · number · rarity, and its mkt (market) price. Tap the one that matches.
The card you tap appears on your Card Comp overlay (the CMP Browser Source) for viewers to see.
Not sure which is right? Click View on TCGplayer on any result to open its full page in your browser — without changing what's on stream.
Click Clear (or comp the next card) to take the card back off your overlay.

About the “mkt” price

The price shown is the TCGplayer Market Price — the rolling average of what the card actually sells for. That's usually the most honest “what's it worth” number. It can differ from the big headline price on a TCGplayer listing page, which is often a single seller's asking price (frequently much higher), or the “as low as” price (the cheapest, often heavily-played, copy). When in doubt, the View on TCGplayer button shows you the full live picture.

You can also type into the search box to look a card up by name directly, instead of capturing one.

Card Comp is currently tuned for Pokémon cards and needs your two API keys set up (above). The Leaderboard and Viewer overlays work on their own without any keys.

Help

Troubleshooting

The app stays on STANDBY / no live numbers

Make sure a real Whatnot live stream tab is open (whatnot.com/live/…), not the browse/home page.
Refresh the stream tab (⌘R / Ctrl R). This is the #1 fix — especially right after loading or reloading the extension.
Check the extension is enabled in chrome://extensions.
If you use a pairing key, confirm the key in the extension matches the one in the app.

“Comp this card” says it can't connect / no stream tab

Confirm the app shows ON AIR. If not, fix the connection above first.
Refresh the Whatnot stream tab once, then try again.

Overlays are blank in OBS

The Card Comp overlay is intentionally blank until you tap a card — that's normal.
For the Leaderboard, the board fills in as buyers purchase; a brand-new stream starts empty.
Re-copy the URL from the app's OBS Widgets panel (your port may have changed), and make sure the app is running.
In the Browser Source properties, try Refresh cache of current page.

A red “connection refused” line in the extension's error list

Harmless. It only means the extension tried to reach the app while the app was closed. It stops as soon as the app is running. You can clear those entries with the trash icon. To avoid it entirely, open the app before loading or refreshing the Whatnot tab.

Chrome keeps asking to disable developer extensions

Just click Keep. It's a standard Chrome prompt for any extension loaded outside the Web Store and doesn't affect how the extension works.