How to Embed Live Match Widgets in ASP.NET Web Pages

What Is a Live Match Widget?

A live match widget is a self-contained HTML/JS component that displays real-time fixture information — score, match time, team crests, and key events — and can be embedded on any web page with a single line of code. Publishing your widget as an embeddable snippet creates free backlinks from sports blogs and fan sites that add your widget to their pages.

Approach 1 — iframe Widget (Easiest)

Host a lightweight ASP.NET page at /widget/match?id={id} that renders a styled score card. Third-party sites embed it with:

<iframe src="https://yoursite.com/widget/match?id=123"
  width="320" height="80" frameborder="0"
  scrolling="no" loading="lazy">
</iframe>

The widget page sets X-Frame-Options: ALLOWALL and uses a minimal stylesheet so it renders cleanly inside any layout.

Approach 2 — JavaScript Snippet Widget

A more powerful approach: publishers paste a <script> tag that renders the widget into a target <div>. Your script fetches score data from your API, builds the DOM, and injects CSS scoped to a namespace to avoid conflicts.

// widget.js
(function() {
  var target = document.getElementById('apg-match-widget');
  if (!target) return;
  var matchId = target.dataset.matchId;
  fetch('/api/match?id=' + matchId)
    .then(r => r.json())
    .then(data => renderWidget(target, data));
})();

Server-Side Rendering for SEO

If the widget page itself should rank (e.g., /match/morocco-vs-france-wc2026), render the initial score state in server-side ASP.NET code before the JavaScript kicks in. Googlebot indexes the server-rendered score, while human visitors get live updates via JavaScript. This is the same dual-rendering pattern used by major sports news sites.

Styling the Widget

Keep widget CSS minimal and namespaced. A dark card style works across most embedding contexts:

.apg-widget {
  background: #0f1a2b;
  color: #fff;
  border-radius: 8px;
  padding: .75rem 1rem;
  font-family: system-ui, sans-serif;
  display: flex;
  align-items: center;
  gap: 1rem;
}

Distribution Strategy

Create a widget generator page on your site where webmasters enter a match ID and get an embed code. This drives widget adoption. Sports blogs, score trackers, and fan sites are your primary distribution channel — each embed creates a contextual backlink to your domain.

For a working implementation of match display, see the Yalla Shoot guide — which uses server-rendered match data with the same architecture described here.