How to Add Live Sports Scores to Your Website

If you run a sports fan site, a club blog, or even a general news site that covers match days, one question comes up constantly: how do you show live scores without building your own sports data pipeline? The answer for most website owners is an embed widget — and in this guide, we'll walk through exactly how to add one.

You don't need to know how to code. You don't need to sign up for a paid sports data API. And you don't need to touch your site's server. A modern embed widget handles all of that for you — you just paste a small snippet of HTML and the widget does the rest.

What "Live Scores" Actually Means

Before we get into the how, it's worth clarifying what a live scores widget actually does under the hood — because the term gets used loosely.

A genuinely live scores widget connects to a real-time sports data feed and refreshes the displayed information automatically at regular intervals. When a goal is scored or a match kicks off, the widget updates without the visitor needing to reload the page. The best implementations do this every 60 seconds during active play, so scores stay accurate within about a minute.

This is different from a fixtures list (which shows scheduled matches but doesn't update in real time) or a manually updated scoreboard (which requires someone to edit the page after every goal). When you embed a live scores widget, you're connecting your page to a data feed that handles all of that automatically.

Your Options for Adding Live Scores

Option 1: Build it yourself with a sports API

If you're comfortable with backend development, you can subscribe to a sports data API, write server-side code to fetch and cache results, and render them on your page. This gives you the most control but also the most complexity — you'll need to handle API rate limits, authentication, caching, error states, and ongoing maintenance as the API evolves.

For most website owners running a fan blog or club site, this is significant overkill. The cost alone (most sports APIs charge £50–£200/month for live data) makes it impractical.

Option 2: Use an embed widget

An embed widget abstracts all of the above behind a simple code snippet. The widget provider handles the API subscription, the data refresh logic, the error handling, and the rendering. You just copy and paste a few lines of HTML, configure your preferences, and the widget appears on your page.

This is the right choice for the vast majority of website owners. It's faster to set up (typically under five minutes), requires no technical knowledge, and costs nothing — at least with WidgetForge.

Adding Live Football Scores with WidgetForge

WidgetForge offers four free football widgets that cover the main use cases for showing live and upcoming match information on a sports site. Here's a quick overview of each:

• Match widget — focuses on a single team. Shows a countdown before kick-off, live score during the match, and the final result afterwards. Updates automatically throughout the day.
• Fixtures widget — shows the next five upcoming matches for your chosen team across all competitions, including cup games and European fixtures.
• Standings table — displays the full league table for any of the four supported leagues, with qualification zones highlighted.
• Score ticker — a compact horizontal strip showing all of today's fixtures and live scores for an entire league. Ideal for a site header.

All four work the same way: you go to the widget page, pick your team or league, choose your colour scheme, and grab the embed code. No account required.

Step-by-Step: Embedding a Live Score Widget

1. Go to the widget configurator. Head to the football widgets page and choose which widget you want — match, fixtures, standings, or ticker.
2. Select your team or league. Use the dropdown to find your club. The widget currently supports 80+ clubs across the Premier League, Championship, Bundesliga and La Liga.
3. Choose your colour theme. There are five built-in presets, or you can enter custom hex values to match your site's branding exactly.
4. Copy the embed code. Click the "Copy Code" button to copy your personalised embed snippet to your clipboard.
5. Paste it into your page. See the platform-specific instructions below for exactly where to paste it.

Your embed code will look something like this:

<div data-wf-widget="football-match"
     data-wf-team="liverpool"
     data-wf-bg="#0F172A"
     data-wf-text="#F8FAFC"></div>
<script src="https://widget-forge.com/embed.js" async></script>

Where to Paste the Code

WordPress

In the block editor, add a Custom HTML block wherever you want the widget to appear — your sidebar, a post body, or a dedicated widget page. Paste the embed code into the block and save. If you're using a classic theme with widgets, paste the code into a Text/HTML widget in your sidebar panel under Appearance → Widgets.

Wix

In the Wix Editor, click Add → Embed → Custom Embeds → Embed HTML. An HTML iframe box will appear on your page. Click "Enter Code" and paste your embed snippet. Resize the element to fit your layout.

Squarespace

Add a Code block to any page section. Squarespace's Code block accepts raw HTML — paste your embed code directly. On paid plans the widget will render live in the editor; on trial plans it may only display on the published site.

Plain HTML

Paste the embed code directly into your HTML file at the point where you want the widget to appear. The <script> tag can live anywhere on the page — it only needs to appear once even if you have multiple widgets.

Tips for Placement

Where you put your live scores widget matters. A few guidelines that work well in practice:

• Sidebar — the match widget and fixtures widget both render cleanly at 300px–360px wide, which is the standard sidebar width on most themes.
• Above the fold on a homepage — for dedicated fan sites, putting the match widget near the top of the page gives visitors an immediate reason to engage on match days.
• Sticky header — the score ticker in scroll mode works well as a full-width strip below or above your navigation bar, giving a live scores feel similar to a news broadcaster's chyron.
• Fixtures page — the fixtures widget makes a natural centrepiece for a dedicated "upcoming matches" page, where it can run at full width.

What Happens on a Match Day

One question we hear a lot is: do I need to do anything on match days to make the widget show live scores? The answer is no — it handles everything automatically.

The match widget checks the current time against the scheduled kick-off and switches modes on its own. Before kick-off, you'll see a countdown. When the match starts, it switches to live score mode and begins refreshing every 60 seconds. When the final whistle blows and the result is confirmed in the data feed, it switches to the full-time display and immediately starts counting down to the next fixture.

You configure it once and it just runs — throughout the season, through cup runs, and across rescheduled fixtures.

Andy · The WidgetForge Team

Andy is passionate about creating free, easy-to-use widgets that help website owners engage their audiences and enhance user experience.