Live 3D Tracker — Service Overview

Contents

• What It Is
• Demo
• Who This Service Is For
• How to Connect the Tracker
  • Direct iframe
  • Connection Through embed.js
• Where gameid Comes From
• Supported Sports
• Standard Connection Options
• Access and Domains
• What You Need to Provide
• Important Information
• If the Tracker Does Not Work
• Additional Tracker Development Services

What It Is

Live 3D Tracker is a ready-to-use sports match visualization that can be embedded into a website or web application. During a match, viewers can see the playing field or court, ball position, attacks, score, timer, and match events.

The tracker receives match data and displays it as a visual scene. It is not a standalone source of sports data and is used together with the SportAPI sports line.

Demo

You can see how the tracker looks for different sports on the demo page.

The demo does not use real live data. It shows how the widget will look for each supported sport.

Who This Service Is For

The service is suitable for:

• betting websites and applications;
• sports portals;
• live-score and statistics services;
• media and other projects that display sports events in real time.

How to Connect the Tracker

To connect the tracker, please follow these steps:

1. Contact a SportAPI manager on Telegram and tell them that you want to connect Live 3D Tracker.
2. Send the manager the domain where the tracker will be used. You can provide a production domain, a test domain, and localhost if your developer will perform the integration locally.
3. Receive an access key from the manager. The manager will activate it for the domains you provided. The key will not work on another domain.
4. Connect the SportAPI sports line if you do not already have a subscription. The tracker does not provide a list of matches by itself — it only visualizes data for a selected live match.
5. Find the required live match using events or event and take the value of its zp field. Pass this value to the tracker as gameid.
6. Pass the sport ID in the sport parameter. A table of supported sports and their IDs is provided below.
7. Choose the preferred embedding method: a direct iframe or the embed.js loader.

If the selected match has zp: null, the tracker is not available for that match. The tracker works only for live matches.

After receiving the access key and match data, you can connect the tracker in one of two ways.

Option 1. Direct iframe

This is the simplest option. Add one iframe to the page and pass the tracker parameters in its URL:

<iframe
  id="live-tracker"
  src="https://bet-embed-sport-tracker.vercel.app/?key=pk_live_yourkey&gameid=745829876&sport=1&lang=en"
  style="width: 100%; height: 360px; border: none; display: block;"
  allowfullscreen
  title="Live tracker"
></iframe>

Main parameters:

• key — the client’s access key;
• gameid — the value of the zp field from the sports line;
• sport — the sport ID;
• lang — the interface language.

The simplest way to switch matches is to change gameid in the iframe URL. You can also switch matches without reloading the iframe by sending the new values through postMessage:

const trackerFrame = document.querySelector('#live-tracker');

function switchMatch(gameid, sport) {
  trackerFrame.contentWindow.postMessage(
    {
      type: 'CONFIG',
      payload: { gameid, sport }
    },
    'https://bet-embed-sport-tracker.vercel.app'
  );
}

Call switchMatch() after the iframe has loaded, for example, when the user selects another match.

Option 2. Connection Through embed.js

Use this option when the page needs to control the widget through JavaScript, for example, to switch matches without reloading the entire page:

<div id="zone"></div>

<script src="https://bet-embed-sport-tracker.vercel.app/embed.js"></script>
<script>
  BetZoneEmbed.init({
    container: '#zone',
    key: 'pk_live_yourkey',
    gameid: 745829876,
    sport: 1,
    lang: 'en',
    height: 360
  });
</script>

BetZoneEmbed.init() creates the tracker inside the specified container and returns a control object. Do not call zone.update() immediately after init(): the widget inside the iframe may not be ready yet and will not receive the new parameters.

Call update() after the READY message or later, when the user selects another match:

let trackerReady = false;

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://bet-embed-sport-tracker.vercel.app') return;

  if (event.data?.type === 'READY') {
    trackerReady = true;
  }
});

const zone = BetZoneEmbed.init({
  container: '#zone',
  key: 'pk_live_yourkey',
  gameid: 745829876,
  sport: 1,
  lang: 'en',
  height: 360
});

// Call this function when the user selects another match.
function switchMatch(gameid, sport) {
  if (!trackerReady) return;
  zone.update({ gameid, sport });
}

// Change the language without reloading the widget.
function switchLanguage(lang) {
  if (!trackerReady) return;
  zone.update({ lang });
}

update() can change gameid, sport, lang, mobile, and view without recreating the widget.

To remove the tracker completely from the page, use:

zone.destroy();

The tracker runs inside an iframe with both methods. When you use embed.js, the iframe is created automatically. The tracker page cannot be used as a standalone page; it is intended only for embedding.

The access key can be placed in the page code. It is restricted to approved domains and will not work on another website.

Where gameid Comes From

The tracker only visualizes a match. A SportAPI sports-line subscription is required to obtain the tracker ID.

Find the zp field in the match data returned by the sports line:

{
  "zp": 745829876
}

Pass the value of zp in the gameid parameter:

gameid = zp

For example, if the sports line returns "zp": 745829876, pass gameid: 745829876 when initializing the tracker.

If the sports line returns:

{
  "zp": null
}

there is no live tracker for that match, and the widget should not be shown.

Live 3D Tracker works only for matches with live status and only for the sports listed below.

Supported Sports

Pass the sport ID in the sport parameter:

The sports and languages available to a client may depend on their subscription plan. If you request a sport that is not included in the connected plan, the tracker will display a message saying that the sport is not included in the plan. In this case, contact your SportAPI manager instead of looking for an error in the integration code.

Standard Connection Options

The standard connection includes:

• interface language selection;
• height and mobile-layout settings;
• brand name and logo placement;
• selection of an available 2D or 3D mode;
• match switching without reloading the page.

These options do not require custom development. The standard tracker design is used by default. To add a logo, send the logo file to your SportAPI manager.

If you need other changes to the tracker’s appearance or behavior, SportAPI developers can implement them according to an individual specification. The price is estimated separately for each project.

Access and Domains

• The tracker works only with an active key.
• The key is restricted to the client’s domain.
• A test domain and localhost can be enabled for integration.
• If the domain changes, send the new domain to SportAPI support.
• A trial key stops working automatically when its trial period ends.

If the key is missing, disabled, or used on an unauthorized domain, the widget will return a 403 access error.

What You Need to Provide

Send the following information to your SportAPI manager or SportAPI support:

• the production domain where the tracker will be used;
• the test domain and whether localhost access is required;
• your logo, if you want it added;
• the selected standard connection settings;
• information about any custom development you require.

If your production or test domain changes, contact SportAPI and provide the new domain so it can be added to your key.

SportAPI support on Telegram: @suport_sportapi.

Important Information

• The tracker is intended to be embedded into a page and runs inside an iframe.
• The tracker displays only live matches.
• Tracker availability for a match is determined by the zp field in the sports line.
• The correct gameid and sport values must be provided for every match.
• The widget width automatically adjusts to its container.
• Recommended height is 360–420 px on desktop and 220–280 px on mobile.
• Team names come from the sports-data provider. The widget language changes the interface and event names but may not change team names.

If the Tracker Does Not Work

Send the following information to support for diagnostics:

• a link to the page containing the widget;
• the gameid value taken from the zp field;
• the sport ID;
• a screenshot of the widget and the browser console.

The most common causes are: the domain has not been added to the key, the key is disabled, the match is not live, the zp field is null, or the wrong sport ID was provided.

SportAPI support on Telegram: @suport_sportapi.

Additional Live 3D Tracker Development Services

General Information

By default, the client receives the tracker with its standard design and available connection settings. If the project requires a different design or additional behavior, SportAPI developers can modify the tracker according to an individual specification.

The price and delivery time are estimated after the client’s requirements have been reviewed.

Changes That Can Be Completed Quickly

These are changes for which the technical foundation already exists:

• changing colors and the color palette;
• adding the client’s logo or watermark;
• changing icons;
• changing labels and individual interface elements;
• configuring panels, borders, and accent elements;
• changing the mobile layout;
• configuring team positions;
• enabling the match event feed;
• configuring an available 2D or 3D mode;
• changing standard animations and how long they are displayed.

The exact delivery time depends on the number of changes and the materials provided by the client.

Custom Development

SportAPI can separately evaluate requests for:

• a complete redesign based on the client’s brand identity;
• a new design for the playing field, court, or information panels;
• custom match-event animations;
• additional match-data sections;
• separate behavior for desktop and mobile devices;
• changes to the behavior and position of interface elements;
• visualization for a new scenario or sport;
• a non-standard integration into the client’s interface.

The developers confirm whether the requested changes can be implemented after reviewing the requirements.

What You Need to Provide for an Estimate

• a description of the expected result;
• a mockup, example, or link to a similar implementation;
• logos, icons, fonts, and brand colors;
• a list of elements that need to be changed;
• desktop and mobile requirements;
• the preferred launch date.

After reviewing the materials, SportAPI will provide confirmation of technical feasibility, an estimated delivery time, and an individual price.

To discuss custom development, contact a SportAPI manager on Telegram.