Guides
sportal365.com

Basketball Widget Library

Suggest Edits

👍

Latest version: 1.0.31

This document describes the sport-specific widget library, a collection of widgets that can be 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, standings, and match updates.

Widget List

  • Live Score: Display live scores for current and upcoming games.
  • Standings: Display team standings in a league or tournament.
  • Single Event Widget: Display detailed information about a specific event such as game details and odds

Customization

The library provides customization options to match the look and feel of your website. This includes:

Color themes: Select from predefined color schemes.
Visual Elements: Customize the look and feel of the widgets to match your website.

How to use

  1. Add a script tag in the page's <head> with the src leading to the built widgets:
  <script type="module" crossorigin src="https://widgets.sportal365.com/basketball.{version}.js"></script

📘

Note

Since this example shows the Basketball widgets in the basketball workspace you can initialize all of the basketball widgets like basketball-standings, basketball-livescore and basketball-single-event. Here in this example, we'll initialize the last two.

  1. Add a div (or multiple divs in this case) with the minimum required attributes described in the docs:
<div
  data-widget-id="basketball-single-event"
  data-match-id="2734521"
></div>
<div
  data-widget-id="basketball-single-event"
  data-match-id="2734531"
></div>
<div
  data-widget-sport="basketball"
  data-widget-type="tournament"
  data-widget-id="livescore"
  data-config-odd-client="<odd-client-name>"
></div>

📘

Note

Multiple divs with the same data-match-id can be added and they will be initialized by the same initializer in step 3.

  1. Add a script tag at the end of the <body> to initialize the widgets:
window.onload = () => {
    // See Note 1 below
    smpBasketballWidgets.subscribe('bettingLogo', (data) =>
      console.log('Click betting logo:', data)
    );
    smpBasketballWidgets.subscribe('team', (data) =>
      console.log('Click team:', data)
    );
    // See Note 2 below
    smpBasketballWidgets.LoadSmpWidget(widgetArgs);
  };

📘

Note

The first argument of the subscribe function is the type of click event that can be tracked and the options are:
bettingLogo, competition, team, matchScore, and bettingMarketValue. Multiple subscribe functions with different arguments can be added to track different events in the widget.

  1. Example widget arguments:
{
  sdkOptions: {
    dataConfigApiUrl: '<api-url>',
    dataConfigStandingsApiUrl: 'https://standing-api.g.sportal365.com',
    dataConfigApiKey: '<api-key>',
    dataConfigProject: '<odd-client-name>',
    dataConfigOddClient: '<api-url>'',
    dataConfigTimezone: 'Europe/Sofia',
    dataConfigCompetitionList: '<client-competition-list>'',
    dataConfigLang: 'bg',
  },
  themes: {
    light:{
      colors:{
        ...lightThemeColors
      }
    },
    client: {
      colors: {
        ...clientThemeColors
      },
    },
    dark: {
      colors: {
        ...darkThemeColors
      },
    },
  },
  onLoaded: () => {
    console.log('Widget is loaded');
  },
}

Updated over 1 year ago