How to create a widget for tracking favorite matches?

What is a widget for tracking favorite matches and how does it work

A widget for tracking favorite matches is a compact interactive block on a website or in an application that shows only those matches that are important to a specific user: favorite teams, tournaments, or betting markets. Technically, such a widget is built on top of sports event APIs: the frontend simply requests current data from the server for the list of matches and beautifully visualizes the score, status, timer, key events, and bookmaker odds.

The working scheme looks like this: the user marks a match as favorite (for example, by clicking on the «star» icon), the system saves the identifier of this event (matchId) and periodically requests information about these matches through the Sport Events API. For football, basketball, hockey, tennis, table tennis, and esports, it is sufficient to use a single unified interface — the API responses return the match status, current time, score, statistics, and, if necessary, betting odds. This allows for the creation of a single widget for favorite matches across different sports.

From a product perspective, the widget solves several tasks at once: it increases audience retention, enhances page depth and time on site, and stimulates repeat visits during game days. For betting projects, this additionally boosts activity on live bets, while for media and sports portals, it serves as a convenient tool for content personalization. When using a quality sports event API, such as the Sport Events API, the widget is easily scalable: new sports, extended statistics, video highlights can be added, and future capabilities like WebSocket subscriptions and AI-generated match recommendations «you might be interested in» can be integrated.

• Displaying only the user’s favorite matches instead of the general list of rounds and leagues.
• A unified data format for different sports, which simplifies frontend development.
• Support for live data: status, current minute, score, key events, and advanced statistics.
• The ability to supplement match cards with bookmaker odds and links to broadcasts or highlights.

Overview of popular sports event APIs for creating a widget

To build a reliable widget for tracking favorite matches, data sources are needed that ensure stability, completeness, and uniformity of response structures. In practice, developers use professional sports APIs that provide information about matches, tournaments, teams, players, and live statistics. It is important that such services support key sports: football, basketball, hockey, tennis, table tennis, esports, and regularly expand the list of disciplines.

Russian service api-sport.ru provides exactly this type of data through a unified REST interface Sport Events API. The vendor provides access to match structures with status fields (notstarted, inprogress, finished, etc.), score, current match minute (currentMatchMinute), live events (goals, cards, substitutions), and detailed statistics (matchStatistics). Within the same endpoints, bookmaker odds (oddsBase) can also be obtained, allowing widgets to be built not only for media and clubs but also for betting projects without connecting a separate betting API.

The key advantage of a professional API over custom parsing or unstructured sources is the predictability of data schemas and official documentation. For Sport Events API, all entities (matches, teams, tournaments, seasons), request parameters, and possible filters are described in detail. This allows for the quick launch of MVP widgets for favorite matches, and then gradually complicating functionality: adding recommended tournaments (defaultTournaments), video highlights reviews, future WebSocket channels for instant updates, and AI personalization services.

How to choose a sports API: types of data, limitations, and cost

When choosing a sports API for implementing a favorite matches widget, it is essential to first look at the coverage and depth of data. The basic minimum includes lists of matches filtered by sports, tournaments, teams, and dates; statuses (before the match, in progress, finished), scores by periods, team lineups, and advanced statistics. In Sport Events API, these requirements are met by the endpoint /v2/{sportSlug}/matches, which returns matches with fields currentMatchMinute, liveEvents, and matchStatistics, as well as nested objects for tournaments, seasons, teams, and stadiums. Additionally, support for bookmaker odds (oddsBase) and video highlights is useful if you plan to make the widget more «live» and engaging.

The second important block is technical limitations: request limits, response sizes, usage policies, and availability guarantees. A reliable API provider always specifies limitations in the documentation: the maximum number of identifiers in the ids parameter, the available set of filters, and the allowable polling frequency for live scenarios. In Sport Events API, available through official website, endpoints are provided for queries by dates, tournaments, teams, and status, which allows optimizing the load and requesting only the necessary data for the widget, without overloading either the client or the server.

Finally, it is important to evaluate the cost and pricing model. Flexible tariffs are suitable for projects with different traffic: from starter plans for small media to corporate tariffs for large bookmakers and platforms with high request volumes. Clear terms, support in Russian, and transparency during load growth are important. Using the Sport Events API from api-sport.ru allows building a predictable economy: you pay for access to structured data across multiple sports, while being able to scale the solution by adding new tournaments, mobile clients, and future capabilities like WebSocket streaming without a complete overhaul of the widget logic.

How to get a list of matches and teams through the API: request examples

To fill the widget with favorite matches, you need to be able to obtain a list of events and their associated teams. In the Sport Events API, this is done in two steps: first, you define the required sport through the endpoint /v2/sport, then you request matches by a specific slug (football, basketball, ice-hockey, tennis, table-tennis, esports, etc.) through /v2/{sportSlug}/matches. By default, matches for the current date are returned without filters, and using the parameters date, status, team_id, tournament_id, and ids, you can flexibly form a query for your scenario.

An example of obtaining all live matches for football (status=inprogress) for subsequent addition to the list from which the user will select favorite meetings. In the example, the request is made from a browser or frontend application using a key passed in the Authorization header:

const API_KEY = 'ВАШ_API_КЛЮЧ';
async function loadLiveFootballMatches() {
  const response = await fetch(
    'https://api.api-sport.ru/v2/football/matches?status=inprogress',
    {
      headers: {
        'Authorization': API_KEY
      }
    }
  );
  const data = await response.json();
  // data.matches — массив матчей с командами, турнирами, счётом и статистикой
  return data.matches;
}

When you have a list of matchId, you can request the associated teams through /v2/{sportSlug}/teams, passing an array of team identifiers in the ids parameter. This is useful if you want to additionally pull in lineups, country, logo, and other information. Below is an example of requesting teams by known IDs:

async function loadTeamsByIds(teamIds) {
  const API_KEY = 'ВАШ_API_КЛЮЧ';
  const idsParam = teamIds.join(',');
  const response = await fetch(
    `https://api.api-sport.ru/v2/football/teams?ids=${idsParam}`,
    {
      headers: {
        'Authorization': API_KEY
      }
    }
  );
  const data = await response.json();
  // data.teams — подробная информация о командах и игроках
  return data.teams;
}

By combining these requests, you can first display a general list of matches for selection, and then, based on the events selected by the user, assemble a compact yet information-rich widget of favorite matches.

How to set up real-time score and match statistics updates through the API

To make the favorite matches widget look «live» and up-to-date, it is necessary to set up regular updates of data on the matches that the user has added to favorites. In the Sport Events API, live information is available through the fields currentMatchMinute, homeScore, awayScore, liveEvents, and matchStatistics in the responses of the endpoints /v2/{sportSlug}/matches and /v2/{sportSlug}/matches/{matchId}. In practice, two approaches are more commonly used: periodic polling (short polling) and, as they appear, subscriptions via WebSocket channels.

The currently recommended model is short polling of the API at a reasonable interval (for example, every 5–15 seconds for live, or less frequently for pre-match lists). You request data only for favorite matches, passing their identifiers in the ids parameter, and update the widget interface. Below is an example of a simple update of the score and current minute for a specific list of football matches:

const API_KEY = 'ВАШ_API_КЛЮЧ';
const FAVORITE_MATCH_IDS = [14570728, 14586240];
async function refreshFavorites() {
  const idsParam = FAVORITE_MATCH_IDS.join(',');
  const url = `https://api.api-sport.ru/v2/football/matches?ids=${idsParam}`;
  const response = await fetch(url, {
    headers: {
      'Authorization': API_KEY
    }
  });
  const data = await response.json();
  data.matches.forEach(match => {
    // match.currentMatchMinute, match.homeScore, match.awayScore,
    // match.liveEvents и match.matchStatistics доступны для отображения
    updateMatchWidgetUI(match);
  });
}
// Запускаем периодическое обновление
setInterval(refreshFavorites, 10000);

As the service develops in Sport Events API from api-sport.ru The addition of WebSocket subscriptions and AI tools is planned. WebSocket will allow receiving changes for favorite matches instantly without constant requests, while AI services will recommend matches that are most likely to interest the user (for example, tense finishes, derbies, comebacks). However, even now, the REST model fully covers the typical scenario of a favorite matches widget: you can dynamically update the score, display extended statistics by periods, and show the event timeline using standard HTTP requests.

How to implement selection and saving of favorite matches in the widget

The key feature of the widget is to allow the user to independently create a list of favorite matches. On the frontend, this is usually implemented through a «favorite» icon on the match card: by clicking, you add or remove the match ID (matchId) from the local list. Such a list can be stored in the browser’s localStorage, in cookies, or on the backend, linking matches to the user’s account. When using the Sport Events API, it is enough to remember the list of IDs and pass them in the ids parameter of the /v2/{sportSlug}/matches endpoint with each update.

A simple example of saving favorite matches in localStorage might look like this:

const STORAGE_KEY = 'favoriteMatchIds';
function getFavoriteMatchIds() {
  const raw = localStorage.getItem(STORAGE_KEY);
  return raw ? JSON.parse(raw) : [];
}
function saveFavoriteMatchIds(ids) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(ids));
}
function toggleFavoriteMatch(matchId) {
  const ids = getFavoriteMatchIds();
  const index = ids.indexOf(matchId);
  if (index === -1) {
    ids.push(matchId);
  } else {
    ids.splice(index, 1);
  }
  saveFavoriteMatchIds(ids);
  return ids;
}

After the list of favorite matches is saved, it can be used for selective requests to the Sport Events API and for building a compact widget. In the same request, you receive not only the score and status but also the bookmakers’ odds (through the oddsBase field), as well as highlights and statistics. This allows you to create an informative card: team logos, tournament, current score, key events, odds dynamics, and, if necessary, quick links to the match page or betting coupon. This approach scales to different sports, while the logic for selecting favorite matches remains the same for football, basketball, hockey, tennis, table tennis, and esports.

How to embed a match tracking widget on a website or in a mobile application

Integrating the favorite matches tracking widget into the site usually comes down to adding a container to the markup and connecting JavaScript code that communicates with the Sport Events API. You create a block, for example <div id="»favorites-widget»"></div>, and initialize a component in it that loads favorite matches via the API and renders them as a table or a list of cards. It is important to think about responsiveness: on desktop, you can show an extended table with full statistics, while on mobile devices — a compact list with the main fields and the ability to expand details on click.

In mobile applications (React Native, Flutter, native iOS/Android), the widget is implemented as a separate screen or module that calls the same REST endpoints and stores the list of favorite matches in a local database or in the user’s account. In both cases, it is critical to ensure the secure storage of the access key to the Sport Events API: in production, it is better to proxy it through your backend. You can obtain an API key and manage access in the personal account of API-Sport, after which it is enough to set up a basic client to https://api.api-sport.ru and use the corresponding endpoints for the required sports.

From a UX perspective, the match tracking widget will become the central element of personalization: it can be placed in the header of the site, on a separate page, in the sidebar, or within the user’s personal account. Additionally, it is worth considering caching responses and optimizing requests (for example, combining several matchIds into one call with the ids parameter) to speed up loading. By using the Sport Events API from api-sport.ru, you get a single source of data for the website and mobile clients, minimize development time, and maintain flexibility for future development—from connecting WebSocket to implementing AI recommendations and in-depth analytics for each match.