Skip to content

Getting started

DATA.BET's Single Page Application (SPA) is a standalone betting solution that can be easily integrated into your product.

Before running the SPA, it is necessary to authorize and generate a token for the player. This token must be passed to the SPA startup script.

Betting Loader

To integrate betting into your product, import the betting Loader script:

1
2
3
4
<script
  type="text/javascript"
  src="https://spa.databet.cloud/static/js/bootstrap.js?v=1"
></script>

After the script's execution, the bettingLoader object will be available globally on the window object.

Its interface is as follows:

1
2
3
4
5
6
interface BettingLoader {
  load: (
    options: AppInitOptions,
    onLoad: (bettingAPI: BettingAPI) => void,
  ) => void;
}

To start the SPA, use method load with AppInitOptions and a callback function that provides BettingAPI.

AppInitOptions

AppInitOptions is the top-level configuration object for the SPA, which has the following structure:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
interface AppInitOptions {
  token: string;
  locale: string;
  currency: string;
  rootElement: string;
  isAuthorized: boolean;
  url: BettingUrl;
  features: Record<FeatureKeys, boolean>;
  defaultSettings: DefaultSettings;
}

Its properties are as follows:

Property Description Type Required
token Token of the current player string yes
locale Selected language Locale code yes
currency Currency code in the ISO:4217 format string yes
rootElement Identifier of the DOM element in which betting will be embedded string yes
isAuthorized Player's authorization status boolean yes
url All endpoints for betting BettingUrl yes
features A set of Features that are responsible for connecting various SPA functionality. Record<FeatureKeys, boolean> no
defaultSettings Default settings for the SPA. DefaultSettings yes

Betting URL

The BettingURL object contains all the necessary endpoints for the SPA:

1
2
3
4
5
6
interface BettingUrl {
  gqlEndpoint: string;
  staticEndpoint: string;
  bettingPath: string;
  pagePath: string;
}
Property Description Type Required
gqlEndpoint Path to the GraphQL server string yes
staticEndpoint Path to the server where all the statistics are stored (js/css/assets) string yes
bettingPath Basic URL of the application string yes
pagePath Application URL for a specific page string yes

Features

The SPA provides an option for enabling or disabling various new, or experimental features:

  • DisableAutofocus disable autofocus when entering the maximum bet in a betslip.
  • AppRankPersonalized enables the personal ranking feature for live pages.
  • BetBooster enables the bet booster subscription feature.
  • HideLocalNavigation hides the navigation tabs for esports or classic sports.
  • HideMainVideoWidget hides the main video widget.
  • DisableCashout disables cashout in a betslip.
  • TopWidgetHideCrossTab hides the cross tab in the topWidget.
  • ShowFreebet shows the freebets.
  • ShowOutright shows the outright.
  • ShowSearch shows the search component.
  • ShowExpressGenerator shows the express generator.
  • ShowBetBuilder shows the betbuilder tab.
  • ShowInsurance shows the bet insurance.
  • ShowFormatSettings shows the select component to control the odd format and view.
  • ShowScoreboardWidget shows the scoreboard widget.
  • ShowTopEventsWidget shows the top events widget.
  • MatchEmbeddedVideoLink enables the embedded video link for streams.

Default settings

The DefaultSetting options are used to customize the display of lines and odds.

1
2
3
4
interface DefaultSettings {
  oddFormat: OddFormat;
  lineFormat: LineFormat;
}
Property Description Type Required
lineFormat Default line format for the SPA. LineFormat yes
oddFormat Default odd format for the SPA. OddFormat yes

Betting API

BettingAPI is a set of methods for setup and interaction with betting. The interface is as follows:

1
2
3
4
5
6
7
interface BettingAPI {
  init(): void;
  registerCallbacks(callbacks: BettingCallbacks): void;
  selectOddFormat: (oddFormat: App.OddFormat) => void;
  updateThemeConfig: (themeConfig: Partial<ThemeConfig>) => void;
  setLocale: (locale: string) => Promise<void>;
}

BettingAPI methods are as follows:

Method Description Type
init Initiates the process of betting's rendering () => void
registerCallbacks Method for registering betting callbacks (callbacks: BettingCallbacks): void
selectOddFormat Changes odd format (oddFormat: OddFormat) => void
updateThemeConfig Method for customizing the theme (themeConfig: Partial<ThemeConfig>) => void
setLocale Change locale for static text (locale: Locale => Promise<void>

Betting callbacks

Betting callbacks are used to customize the SPA behavior.

1
2
3
4
interface BettingCallbacks {
  getBannersByIds?: (ids: string[]) => Promise<BannerInfo[]>;
  getErrorTitle?: (errorCode: string) => string;
}

The available callbacks are as follows:

Method Description Type
getBannersByIDs The Function of retrieving banners by identifiers (bannerIds: string[]) => Promise<BannerInfo[]>
getErrorTitle The Function of getting custom error message by error code (errorCode: string) => string

BannerInfo is an object that contains information about the banner.

1
2
3
4
5
6
7
8
9
interface BannerInfo {
  id: string;
  imageHref: string;
  imageSrc: string;
  title: string;
  subtitle?: string;
  buttonText: string;
  buttonHref: string;
}
Property Description Type Required
id Banner's unique identifier string yes
imageHref URL of the page to which a user will go after clicking on the banner's image string yes
imageSrc Path to the banner's image string yes
title Alt text of the banner's image string yes
subtitle The Subtitle of the banner's image content string no
buttonText Text on the button of the banner string yes
buttonHref URL of the page to which a user will go after clicking on a button string yes

Routes

The next routes are available for bettingPath endpoint (see Betting URL):

Route Description Desktop Mobile
/sports Displays the main page with live/pre-match matches grouped by sport. They can be switched in the left menu, the default is live. Classic sports. + +
/esports Displays the main page with live/pre-match matches grouped by sport. They can be switched in the left menu, the default is live. Cyber sports. + +
/sports/{sportSlug} Displays a list of matches for the selected sport. Classic sports. + +
/esports/{sportsSlug} Displays a list of matches for the selected sport. Cyber sports. + +
/sports/{sportSlug}/match/{matchSlug} Displays all data about a given sport event. Classic sport. + +
/esports/{sportSlug}/match/{matchSlug} Displays all data about a given sport event. Cyber sports. + +
/sports/{sportSlug}/tournament/{tournamentSlug} Displays the list of matches of a given tournament. Classic sport. + +
/esports/{sportSlug}/tournament/{tournamentSlug} Displays the list of matches of a given tournament. Cyber sports. + +
/freebets Displays the list of freebets for an authorized player. + +

Reach route supports two query variables:

  • sportEventStatusSlug is used for filtering matches in both the categorizer and match list by sport event status. Supported values are live and prematch.
  • time is used for filtering matches in both the categorizer and match list by event time. Represents the number of hours before the event starts. Supported values for this query parameter are 0, 3, 6, 12, 24, 48. Available for sportEventStatusSlug=prematch only.

Setup example

Here is a minimal example of how to set up the SPA:

1
2
3
4
<script
  type="text/javascript"
  src="https://spa.databet.cloud/static/js/bootstrap.js?v=1"
></script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
  .betting-betslip-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2222;
    width: 100%;
  }

  .betting-betslip-mobile .__app-betslip-expanded {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .betting-betslip-desktop {
    position: fixed;
    bottom: 0;
    right: 100px;
    z-index: 2222;
    width: 360px;
  }

  .betting-betslip-desktop .__app-betslip-expanded {
    height: 60vh;
  }

  .betting-fixed-body {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
function loadBetting() {
  bettingLoader.load(
    {
      url: {
        gqlEndpoint: 'gqlEndpoint.example',
        bettingPath: '/en',
        staticEndpoint: 'staticEndpoint.example',
        widgetsStaticUrl: 'widgetUrl.example',
      },
      token: 'your token',
      locale: 'en',
      currency: 'USD',
      tournamentIds: ['1', '2', '3'], // optional
      rootElement: 'betting__container',
      isAuthorized: false,
      defaultSettings: {
        oddFormat: 'Decimal',
        lineFormat: 'american',
      },
      features: {
        ShowFormatSettings: true,
        ShowOutright: true,
        ShowFreebet: true,
        MatchEmbeddedVideoLink: true,
        ShowSearch: true,
        ShowExpressGenerator: true,
        TopWidgetHideCrossTab: true,
        'main.HideNavigation': true,
      },
    },
    function (bettingAPI) {
      bettingAPI.registerCallbacks({
        getBannersByIds(ids) {
          if (ids.length === 0) return Promise.resolve([]);
          return new Promise((resolve, reject) => {
            fetch('/api/banners/locale/en?ids[]=' + ids.join('&ids[]='))
              .then(function (response) {
                return response.json();
              })
              .then(function (data) {
                resolve(data.data);
              })
              .catch(function (error) {
                reject(error);
              });
          });
        },
      });

      bettingAPI.enableAnalytics(true);

      bettingAPI.subscribe('toggle-widget-betslip', (payload) => {
        const el = document.getElementById('betting-betslip-mobile');
        if (el && payload.isOpen) {
          el.style.setProperty('top', ' 0');
          el.style.setProperty('bottom', 'initial');
          el.style.setProperty('height', '100%');
          document.body.classList.add('betting-fixed-body');
        }
        if (el && !payload.isOpen) {
          el.style.setProperty('top', null);
          el.style.setProperty('bottom', '0');
          el.style.setProperty('height', null);
          document.body.classList.remove('betting-fixed-body');
        }
      });

      bettingAPI.setupWidget('betslipMobile', {
        containerElementId: 'betting-betslip-mobile',
      });

      bettingAPI.setupWidget('betslipTablet', {
        containerElementId: 'betting-betslip-desktop',
      });

      bettingAPI.updatePalette({
        primaryColor: '#060c1f',
        primaryText: '#ffffff',
        primaryAccent: '#00bf9e',
        secondaryColor: '#141c33',
        secondaryText: '#a4a4a4',
      });
    },
  );
}