PingBell
product updates
obs
streaming
counter

Using PingBell's counter view with OBS: a step-by-step guide for streamers

Drop your PingBell counter into OBS as a browser source — perfect for live streams that want a real-time achievements display, milestone tracker, or business-metric overlay.

Yoav Shalev ·

If you stream on Twitch, YouTube, or Kick — or you do live presentations — PingBell’s board live view (sometimes called the celebration page in the early days) is a ready-made overlay. It’s a browser-based, fully customizable display that updates in real time. Drop it into OBS as a browser source and you’ve got a live achievements/milestones graphic that ticks every time a tracked event fires.

Step 1: Set up your source

Log into my.pingbell.io and create a source on the Sources page for whatever event you want to track on stream. Sub goals, donation goals, gameplay milestones, business metrics — anything you can fire as a webhook can ring.

Customize the title, description, and sound. Pick something visually distinctive — this is going on stream, so the title and description will be visible to your audience.

Step 2: Customize the counter view

Design a board with a counter block bound to your source. Add whatever else belongs on stream — a goal, a text block, an image with your logo — and drag everything into position.

Pick fonts and adjust colors. Resize the counter, the text, and the logo. For OBS use, you’ll often want a solid-color background you can chroma-key out.

When it looks right, open Sharing in the board editor, turn on Public live view (anyone with the link), and click Copy live link.

Step 3: Add the counter view to OBS

Add a browser source.

  1. In OBS, click the + under Sources and select Browser
  2. Paste the board’s public live link as the URL — add ?prompt=0 to the end so the sound prompt is skipped — or use Window Capture with the page open in a browser
  3. Adjust width and height to match your stream resolution

Position it. Drag the source where you want it on stream — top-right corner for a subtle counter, center stage for a milestone moment.

Step 4: Use a green-screen effect (optional)

If you want a transparent overlay, set the board’s background to bright green:

  1. Right-click the browser source in OBS, select Filters
  2. Add a Chroma Key filter
  3. Pick green as the key color
  4. Fine-tune similarity, smoothness, and key color spill reduction sliders

Step 5: Stream

The counter updates live the moment a notification fires. Sub goal counters tick when a viewer subscribes. Donation counters tick when a donation lands. Sales counters tick when a customer buys. The audience sees the moment land.

Try it

If you’ve ever wanted a custom-branded sub goal that isn’t from your platform’s stock template, the PingBell counter view is what you want. Start a free 7-day trial, wire it to a webhook, and your next stream has a live overlay that ticks when your audience does what you want them to do.

Put your most important numbers on every screen your team sees.