Skip to main content
SnapCount logoSnapCount

Embed a live counter

Put a live SnapCount total on a web page with oEmbed, or on a stream as a transparent OBS overlay.

Updated

On this page
  1. oEmbed
  2. OBS overlay
  3. Scoreboard overlay

oEmbed

Open a live session, choose Share, then Embed on a website to copy its embed URL. It looks like https://snapcount.app/embed/SESSION_ID. Sites and tools that speak oEmbed can turn that URL into a live counter.

GEThttps://snapcount.app/api/oembed

oEmbed query parameters
ParameterRequiredMeaning
urlYesThe embed URL.
maxwidthNoMaximum iframe width in pixels, capped at 300.
maxheightNoMaximum iframe height in pixels, capped at 200.
cURL
curl -G https://snapcount.app/api/oembed \
  --data-urlencode "url=https://snapcount.app/embed/SESSION_ID" \
  -d maxwidth=300
Response 200
{
  "type": "rich",
  "version": "1.0",
  "title": "Live Counter: Gate A",
  "author_name": "SnapCount",
  "author_url": "https://snapcount.app",
  "provider_name": "SnapCount",
  "provider_url": "https://snapcount.app",
  "cache_age": 60,
  "html": "<div ...><iframe src=\"https://snapcount.app/embed/SESSION_ID\" ...></iframe>...</div>",
  "width": 300,
  "height": 230,
  "thumbnail_url": "https://snapcount.app/og-v2.png"
}

The html holds the iframe and a small "Powered by SnapCount" line under it, which is why height is 30 pixels taller than the frame. Responses may be cached for 60 seconds; the counter inside the frame stays live.

OBS overlay

Put a live count on stream as a transparent overlay. In a live session, open Share, choose Embed on a website, then press Stream overlay (OBS) and copy the overlay URL.

Overlay URL
https://snapcount.app/embed/SESSION_ID?bg=transparent&hideTitle=true&scale=2
Overlay URL parameters
ParameterEffect
bg=transparentDrops the page background so the scene shows through.
hideTitle=trueHides the counter name.
scaleMakes the number bigger, for example 2. Optional.

Add it to OBS

  1. In OBS, add a Browser Source to your scene.
  2. Paste the overlay URL into the URL field.
  3. Set the width and height to fit your layout, for example 400 by 200, and raise scale rather than stretching the source.
  4. Leave the background alone. The page is already transparent, so no custom CSS is needed.
The overlay updates live as anyone in the session counts, and shows the count for as long as the session is open.

Scoreboard overlay

A two-team scoreboard session shows both team names and scores side by side, like a score bug. Team names stay on in the overlay; tick Hide team names if your scene already has them.

The scoreboard overlay only displays the score, so keep scoring from the scoreboard page.

Was this page helpful?

Ready to connect SnapCount?

Create an API key or a webhook endpoint in Settings. The public API and webhooks come with Pro and Enterprise.

Open developer settingsCompare plans