Back to Tournaments
Tournament Article

Embedding your live leaderboard

Every Squabbit event already has its own public web page. On top of that, you can pull just the live leaderboard out of that page and drop it straight into a website you already run. Instead of sending spectators off to a separate link, your event’s standings live right on your club or society site, updating on their own as scores come in.

It’s a great fit for a club homepage, a society’s events page, or any spot where your members already look for what’s happening. The leaderboard shows on its own, with no event header or tabs around it, so it blends in as part of your page.

Copying your embed code

Open your tournament and tap the gear icon to open settings. Go to the Advanced tab and find the Web Browser section. In there you’ll see a Leaderboard embed row.

Tap that row. Squabbit copies a small snippet of HTML to your clipboard and shows a “Embed code copied to clipboard” confirmation. That snippet already has your own tournament’s ID filled in, so there’s nothing to edit by hand.

The Web Browser section of tournament settings showing the Leaderboard embed row with its embed URL ending in ?embed=leaderboard and a copy icon

Adding it to your website

The snippet you copied is a standard iframe. It looks like this, with your real tournament ID already in place of YOUR_TOURNAMENT_ID:

<iframe src="https://app.squabbitgolf.com/w/tournament/YOUR_TOURNAMENT_ID?embed=leaderboard" width="100%" height="600" style="border:none;"></iframe>

Paste it into your page’s HTML wherever you want the leaderboard to appear. This works on a hand-coded site, or on any site builder or CMS that offers an “embed HTML” or “custom code” block. Step by step:

  1. In Squabbit, tap the Leaderboard embed row to copy the snippet.
  2. Open your website and go to the page where you want the leaderboard, then add (or open) an HTML or custom-code block.
  3. Paste the snippet into that block.
  4. Save and publish the page.

That’s it. The leaderboard renders inside your page and updates on its own as your players enter scores, exactly like the full event page does.

A golf club's website with a live Squabbit leaderboard embedded in the page, showing the club header and the ranked standings with round scores

Adjusting the size

The snippet uses width="100%" and a fixed height, so the leaderboard fills the width of whatever column or block you paste it into and stays responsive as the page resizes. If you have a big field and want more players visible without scrolling, bump the height up (say from 600 to 800). You can also set an exact width in pixels if you’d rather it not stretch the full width. Tweak those two attributes to fit your layout.

Tip: The embedded leaderboard updates automatically. Once you’ve pasted it in and published the page, you never have to touch it again during the event: it keeps showing the latest standings on its own.