Tennis Widgets Library

👍
Latest version: 1.0.2

This document describes the sport-specific widget library, a collection of widgets easily integrated into a website or application to provide sport-related content and functionality. The library includes a variety of widgets, such as live score updates and match updates.

Getting Started
Installation
Configuration
Callbacks
Examples

Getting Started

To begin using the Tennis Widget Library, make sure you use the correct library version.

Installation

To use the Tennis Single Event Widget on your website, include the following script in the <head> section of your site, replacing {version} with the appropriate version number:

<head>
  <!-- Include the JS file -->
    <script type="module" crossorigin src="https://widgets.sportal365.com/tennis.{version}.js"></script>
</head>

By including this script, you can access the Tennis Single Event Widget, which can be customized and embedded within your site as needed.

Configuration

The Tennis Single Event Widget can be configured using local and global properties. Local properties are set directly on the widget's HTML element using data- attributes, while global properties are set using JavaScript.

SDK Options

Set global properties using the LoadSmpWidget function. The sdkOptions object contains properties like dataConfigApiUrl, dataConfigApiKey, dataConfigProject, and other settings.

Below is an example of how to configure the Tennis Single Event Widget:

window.smpTennisWidgets.LoadSmpWidget({
  sdkOptions: {
    dataConfigApiUrl: '',
    dataConfigApiKey: '',
    dataConfigProject: '',
    dataConfigOddClient: '',
    dataConfigTimezone: 'Europe/Sofia',
    dataConfigCompetitionList: '',
    dataConfigLang: 'en',
  },
  widgetAttributes: {
      ....
  },
  themes: {
     ....
 }
});

This table provides a description of all sdkOptions properties for the Tennis Widget Library.

Property	Type	Description
`dataConfigApiUrl`	String	The API URL for accessing the Tennis Widgets data. ( Please, contact our support for more information. )
`dataConfigApiKey`	String	Your API key for accessing the Widgets Library. ( Please, contact our support for more information. )
`dataConfigProject`	String	The project identifier, typically representing the website or platform that the widget is being used on .( Please, contact our support for more information. )
`dataConfigOddClient`	String	The client identifier for the betting odds data. ( Please, contact our support for more information. )
`dataConfigTimezone`	String	The timezone to be used for displaying time-related information in the widget (e.g., 'Europe/Sofia').
`dataConfigCompetitionList`	String	The list of competitions to be displayed in the widget. ( Please, contact our support for more information. )
`dataConfigLang`	String	The default language for the widget (e.g., 'en' for English).

Local Properties

Local properties are set on the widget's HTML element using data- attributes. These properties allow you to control the displayed information and the widget's appearance.

Single event widget

<div
  data-widget-id="tennis-single-event"
  data-match-id="faef0ea7-2c70-42ea-b5cb-8e5f2ab6541f"
  data-widget-sport="tennis"
  data-widget-type="event">
</div>

Livescore widget

<div
  data-widget-id="tennis-livescore"
  data-widget-sport="tennis"
  data-widget-type="tournament">
</div>

Property	Type	Description
data-widget-id	String	Unique identifier for the widget.
data-match-id	String	The unique identifier (UUID) of the tennis match to be displayed.
data-widget-sport	String	The sport type for the widget. Set this to "tennis" for the Tennis Single Event Widget.
data-widget-type	String	The type of widget. Set this to "event" for the Tennis Single Event Widget

Widget attributes

window.smpTennisWidgets.LoadSmpWidget({
// 1. SDK options are 
  sdkOptions: {
     ....
  },
  widgetAttributes: {
       'data-config-theme': 'light',
       'data-config-date': {"date": "2023-01-06", "dateFormat": "DD.MM.YYYY"} 
     ....
  },
  themes: {
     ....
 }
});

Name	Example value	Description
`data-config-short-status-type`	"full_name" or "short_name"
`data-config-date`	`{"date": "2023-01-06", "dateFormat": "DD.MM.YYYY"}`
`data-config-odds`	`{ "bettingId": '43', "display": true, "preEventOnly": true, "marketValueType": "FRACTIONAL" }`	See Note 4 below
`data-config-theme`	"light", "dark" or "client"
`data-config-popular-list`	"popular"
`data-config-header-display`	"true"
`header-default-option`	"LIVE"
`data-config-refresh-time`	“super_slow”	See Note 1 below
`data-config-entity-links`	`{ "team": { "url": "<https://test.com/tennis/team-{teamId}>" }, "player": { "url": "<https://test.com/tennis/player-{playerId}>" } "competition": { url: "<https://test.com/tennis/competition-{competitionId}>" }, "configuration": { "newWindow": true } }`	See Note 2 below
`data-labels`	`{ "all": "All Games", "popular": "Popular", "scheduled": "Upcoming", "live": "Live", "finished": "Finished", "no_matches": "There are no available games" }`	See Note 3 below

Note 1: Example Refresh times

  "super_fast" - 15 seconds
  "fast" - 30 seconds
  "medium" - 1 minute
  "slow" - 3 minutes
  "super_slow" - 10 minutes
  "never" - doesn’t refresh the data

Note 2: Example Entity links

  {
    "team": {
      "url": "https://test.com/tennis/team-{teamId}"
    },
    "player": {
      "url": "https://test.com/tennis/player-{playerId}"
    }
    "competition": {
        url: "https://test.com/tennis/competition-{competitionId}"
    },
    "configuration": {
      "newWindow": true
    }
  }

Note 3: Example Livescore Data labels

  {
    "all": "All Games",
    "popular": "Popular",
    "scheduled": "Upcoming",
    "live": "Live",
    "finished": "Finished",
    "no_matches": "There are no available games"
  }

Note 4: Example Odds config

  {
    "bettingId": '43',
    "display": true,
    "preEventOnly": true,
    "marketValueType": "FRACTIONAL"
    }

Callbacks

bettingLogo: This callback function is triggered when the 'bettingLogo' event occurs, typically when the betting logo is clicked. The function receives the data associated with the event and logs it to the console with the message "Click betting logo:".

   smpTennisWidgets.subscribe('bettingLogo', (data) => console.log('Click betting logo:', data));

event: This callback function is triggered when the 'event' event occurs, usually when the event score is clicked. The function receives the data associated with the event and logs it to the console with the message "Click event score:".

smpTennisWidgets.subscribe('event', (data) => console.log('Click event score:', data));

team: This callback function is triggered when the 'team' event occurs, typically when a team is clicked. The function receives the data associated with the event and logs it to the console with the message "Click team:".

smpTennisWidgets.subscribe('team', (data) => console.log('Click team:', data));

player: This callback function is triggered when the 'player' event occurs, usually when a player is clicked. The function receives the data associated with the event and logs it to the console with the message "Click player:".

smpTennisWidgets.subscribe('player', (data) => console.log('Click player:', data));

bettingMarketValue: This callback function is triggered when the 'bettingMarketValue' event occurs, typically when the betting market value is clicked. The function receives the data associated with the event and logs it to the console with the message "Click betting market value:".

smpTennisWidgets.subscribe('bettingMarketValue', (data) => console.log('Click betting market value:', data));

competition: This callback function is triggered when the 'competition' event occurs, usually when a competition is clicked. The function receives the data associated with the event and logs it to the console with the message "Click competition:".

smpTennisWidgets.subscribe('competition', (data) => console.log('Click competition:', data));

Examples

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <script
      type="module"
      crossorigin
      src="https://widgets.sportal365.com/tennis.1.0.2.js"
    ></script>
  </head>
  <body>
    <!-- Single Event Widget -->
    <div
      data-widget-id="tennis-single-event"
      data-match-id="faef0ea7-2c70-42ea-b5cb-8e5f2ab6541f"
      data-widget-sport="tennis"
      data-widget-type="event"
    ></div>
    <!-- Livescore Widget -->
    <div
      data-widget-id="tennis-livescore"
      data-widget-sport="tennis"
      data-widget-type="tournament"
    ></div>
    <script>
      window.onload = () => {
        smpTennisWidgets.subscribe("bettingLogo", (data) =>
          console.log("Click betting logo:", data)
        );

        smpTennisWidgets.subscribe("event", (data) =>
          console.log("Click event score:", data)
        );

        smpTennisWidgets.subscribe("team", (data) =>
          console.log("Click team:", data)
        );

        smpTennisWidgets.subscribe("player", (data) =>
          console.log("Click player:", data)
        );

        smpTennisWidgets.subscribe("bettingMarketValue", (data) =>
          console.log("Click betting market value:", data)
        );

        smpTennisWidgets.subscribe("competition", (data) =>
          console.log("Click competition:", data)
        );

        window.smpTennisWidgets.LoadSmpWidget({
          sdkOptions: {
            dataConfigApiUrl: "INSERT API URL",
            dataConfigApiKey: "INSERT API KEY",
            dataConfigProject: "INSERT PROGECT NAME",
            dataConfigOddClient: "INSERT ODD CLIENT",
            dataConfigTimezone: "Europe/Sofia",
            dataConfigCompetitionList: "INSERT COMPETITION LIST",
            dataConfigLang: "en"
          },
          widgetAttributes: {
            "data-config-theme": "light",
            "data-config-entity-links": {
              player: { url: "https://www.site-name.com/player-{playerId}" },
              team: { url: "https://www.site-name.com/team-{teamId}" },
              competition: {
                url: "https://www.site-name.com/league-{competitionId}"
              },
              standings: {
                url:
                  "https://www.site-name.com/league-{competitionId}#standings"
              },
              match: {
                url:
                  "https://www.site-name.com/game-{teamId}-{teamId}#{gameId}",
                sort: { criteria: "alphabetically", direction: "asc" }
              },
              configuration: {
                newWindow: true
              }
            }
          },
          onLoaded: (data) => {
            console.log("loaded widget", data);
          }
        });
      };
    </script>
  </body>
</html>

Tennis Widgets Library

👍
Latest version: 1.0.2

Table of Contents

Getting Started

Installation

Configuration

SDK Options

Local Properties

Single event widget

Livescore widget

Widget attributes

Callbacks

Examples

Single event

Livescore

👍Latest version: 1.0.2

Table of Contents

Getting Started

Installation

Configuration

SDK Options

Local Properties

Single event widget

Livescore widget

Widget attributes

Callbacks

Examples

Single event

Livescore

👍
Latest version: 1.0.2