Not every fan can watch the stream. Some are at work, some are on a phone with weak signal, and some games don't get streamed at all. A live score on your athletics website gives all of them a reason to visit, and it costs your scorekeeper no extra work. This guide shows how to embed a live scorebug on a school or club site, how to make it look right on desktop and mobile, and how to share a public match page alongside it.
What an embedded scorebug is
An embed is a small window on your page that shows content from another site. Technically it's an iframe: a line of HTML that says "show this web page here, at this size." The scorebug inside updates live as the scorekeeper taps the score, so the website shows the same score as the stream, with no one updating the website by hand.
ScoreCastr has an embeddable scorebug for each match, with an option for no background. Without the background, the scorebug sits directly on your page's colors, which usually looks cleaner in a website header or banner. With the background, it looks like it does on the stream.
ScoreCastr also has a public match page that anyone can follow live, with share buttons. Use the embed on your own site and the match page link everywhere else.
Where to put it
Put the score where fans already look on game day:
- The athletics home page, near the top, on game days.
- The team's page, above the schedule.
- A "Live" or "Watch" page that holds the scorebug and the video player together. If you stream to YouTube or Facebook, embed the video player on the same page so fans get both in one place.
Don't bury it in a news post that drops off the front page by halftime.
Add the embed to your site
First, copy the scorebug embed code from the match in ScoreCastr. If you want the no-background version, choose that option first. Then paste it into your site. The block to use depends on the platform:
| Platform | Where to paste the code |
|---|---|
| WordPress | A Custom HTML block in the block editor |
| Squarespace | A Code block or Embed block |
| Wix | Embed Code, then Embed HTML |
| Google Sites | Insert, then Embed, then the Embed code tab |
| District or league platforms | Look for an HTML, embed or "custom code" widget, or ask the site administrator |
Menus change, so check your platform's help pages if these names don't match what you see.
Some school and district website systems block iframes for security. If the embed shows as a blank box, or the editor strips the code when you save, that's usually why. Ask your webmaster or district IT whether embeds can be allowed for this one source. If not, link to the public match page instead.
Size it for phones
Most fans will open your site on a phone. An iframe has a fixed width and height in its code, and if those are wrong the scorebug gets cut off or leaves an awkward empty space.
- Check the width. Setting the width to 100% lets the embed fit the column on any screen.
- Adjust the height until nothing is clipped. Look at it with a long team name and a two-digit score, not just "0-0".
- Preview on a real phone, in portrait, not only in your site editor's mobile preview.
- With no background, check the scorebug against your page color. A team color that matches your site's banner can make the scorebug hard to read.
Share the public match page
The embed brings fans to your site. The public match page reaches the ones who aren't there. Use the share buttons on the match page, or copy its link, and post it:
- on the athletic department's and team's social accounts before the game
- in the team's parent group chat or messaging app
- in the stream's description, for viewers who want the score on a second screen
- as a QR code on a sign at the gate or concession stand, so fans in the stands can follow too
Post the link when the game starts as well as before. People look for the score most once they hear it's close.
Set up each game
Each match in ScoreCastr has its own links, so plan to update the embed for each game:
- Create the match a day or two before, with both teams set.
- Copy the new embed code and swap it into your page.
- Check the page on a phone. The pregame score should show 0-0 with the right teams.
- Share the public match page link.
- After the game, leave the final score up for the evening, then replace it with the next game or a results link.
Give one person the website job so it doesn't fall on the scorekeeper. The scorekeeper's only job is the score; the website person sets up the embed and posts the links.
Add stats and video
A live score is a good start. Families who can't attend also want to know who scored. If you keep stats, you can share a live box score with no sign-in; see our guide to sharing a live box score. To get the same scoreboard on your stream, see adding a scoreboard overlay to OBS. If you do stream the game, confirm the streaming rights with your athletic director or state association first.
Website scorebug checklist
- Match created with both teams set.
- Embed code copied, with or without background as you want.
- Pasted into an HTML or embed block on a page fans visit.
- Width set to fit, height checked with a long team name.
- Page checked on a real phone.
- Public match page link shared on social and in team messages.
- Embed swapped for the next game afterward.