Building a polished live-match visualization from scratch — pitch graphics, animated events, real-time score updates — is a significant engineering investment. Live Football API ships with a ready-made solution: the Centre Stage Board (CSB), a fully rendered live match widget you can embed with a single iframe.
What Is the Centre Stage Board?
The CSB is a hosted HTML visualization showing a live match's score, event timeline, and key moments in a clean, pre-designed board — similar to the live match trackers you see on major sports sites. Instead of building this UI yourself, you embed a URL and it renders fully formed.
Getting the CSB URL
Every call to /live_match_details includes a ready-to-use csb_url field — no separate request needed:
import requests
response = requests.get(
'https://live-football-api.com/api/v1/live_match_details',
params={'api_key': 'YOUR_KEY', 'match_id': match_id, 'lang': 'en'}
).json()
csb_url = response['data']['csb_url']
print(csb_url)
The same call in JavaScript:
const res = await fetch(
'https://live-football-api.com/api/v1/live_match_details' +
`?api_key=YOUR_KEY&match_id=${match_id}&lang=en`
);
const result = await res.json();
const csbUrl = result.data.csb_url;
Embedding the Widget
Drop the URL directly into an iframe — no additional styling or JavaScript required to get a working board:
<iframe
src="CSB_URL_FROM_RESPONSE"
width="636"
height="400"
frameborder="0"
allowtransparency="true"
></iframe>
In a React component, this looks like:
function MatchBoard({ csbUrl }) {
return (
<iframe
src={csbUrl}
width={636}
height={400}
frameBorder="0"
allowTransparency="true"
title="Live match board"
/>
);
}
Understanding the Token Lifetime
The csb_url contains a JWT token that is time-limited — typically valid for around 4 hours. This means:
- Don't cache or hardcode a CSB URL long-term; it will stop working once the token expires
- Always use the freshest URL from a recent
/live_match_detailscall - For a match page a user might revisit hours later, re-fetch
/live_match_detailsto get a valid token rather than reusing a stored one
When csb_url Is Unavailable
The field returns null if the match has no active CSB feed — this can happen pre-match or for competitions where the visualization isn't yet supported. Always check for a null value before rendering the iframe:
if (result.data.csb_url) {
renderMatchBoard(result.data.csb_url);
} else {
renderFallbackScoreCard(result.data.header);
}
Fallback: Building Your Own Simple Score Display
When csb_url isn't available, the same /live_match_details response still gives you everything needed for a basic fallback — team names, scores, and status — from the header object, so your UI degrades gracefully instead of showing a blank space.
Why Use the Hosted Widget Instead of Building Your Own?
- Zero design work — a polished, tested UI ships out of the box
- Automatically updates — the embedded page reflects live match state without you managing WebSocket connections or polling
- Consistent across matches — every match uses the same visual template, so you don't maintain custom layouts per competition
- Fast to ship — a live match page can go from API key to working widget in minutes
Frequently Asked Questions
Does embedding the CSB widget cost extra credits?
No, csb_url is included in the standard /live_match_details response at no additional cost beyond the normal 1 credit per call.
Can I customize the appearance of the CSB widget?
The CSB is a hosted, pre-styled page rendered via iframe, so its internal appearance isn't customizable from your side — for full design control, use the raw stats and events data from /live_match_details to build your own UI instead.
What happens if I use an expired CSB token?
An expired token will cause the embedded board to fail to load. Always fetch a fresh csb_url from /live_match_details rather than reusing an old one.
Does the CSB work for finished matches, not just live ones?
Coverage depends on the competition and match state — if csb_url returns null for a given match, fall back to rendering the score and stats manually from the same response.
