Integrating the DATA.BET widget into your website

DATA.BET widgets allow you to include any of the real time widgets directly inside your website.

Using our SPA, widgets are already integrated and can be enabled by our Customer Support if this package is available for you. If you are integrating our Odds Feed, it is essential to implement widget support within your frontend yourself.

You can also dynamically load the script and insert the widget at the desired location on your page inside React/Angular/Vue as well.

How-to

1. Adding the script to your project

To integrate the DATA.BET widget, add the bootstrap.js script to your project. You can do this using JavaScript.

1

<script type="module" src="https://widgets-static.databet.cloud/bootstrap.js">

1

<script type="module" src="https://widgets-static.int.databet.cloud/bootstrap.js">

2. Inserting the widget into the page

After adding the script, you can insert the widget at the desired location on your page.

1
2
3

<databet-widget type="scoreboard" token="<JWT_TOKEN>"></databet-widget>
<databet-widget type="pitchTracker" token="<JWT_TOKEN>"></databet-widget>
<databet-widget type="multi" token="<JWT_TOKEN>"></databet-widget>

Supported widget types

The <databet-widget> element can accept the following attributes:

• type: A string specifying the type of widget. Currently, the supported type is:
  • scoreboard: Displays a general scoreboard for a event.
  • pitchTracker: Displays a pitch tracker for detailed analysis of player movement.
  • multi: Displays one widget that includes scoreboard and pitchTracker in different tabs.
  • genius: Displays Genius Sports widget (see Genius Sports Widgets section).
• token: A string representing a valid JWT (JSON Web Token) required to authenticate and access the data for the widget.

Restricting the size

By default, the widget stretches to 100% of the width and height of its parent element. You can restrict the parent element's size or directly style the widget using CSS.

Example of styling the widget

You can add styles directly to the widget via CSS.

1
2
3
4

databet-widget {
    width: 550px;
    height: 320px;
}

Recommendations for widget sizes

• Use a minimum of 300px height if the widget's width is less than 550px
• Use a minimum of 320px height if the widget's width is more than 550px

Recommendations for multi widget sizes

• Use a minimum of 360px height

3. Customizing the widget with CSS variables

You can customize the appearance of the DATA.BET widget using CSS variables. Below is a list of available CSS variables that you can modify to match your website's theme.

List of customizable CSS variables for Scoreboard:

• --widget-primary-color: The primary color of the widget.

• --widget-secondary-color: The secondary color of the widget.

• --widget-accent-color: The accent color of the widget

• --widget-bg-color: The background color of the widget.

Sports

Counter-Strike

• --widget-first-team-color: The color representing the CT team.

• --widget-second-team-color: The color representing the T team.

Valorant

• --widget-first-team-color: The color representing the Defender team.

• --widget-second-team-color: The color representing the Attacker team.

Dota 2

• --widget-first-team-color: The color representing the Radiant team.

• --widget-second-team-color: The color representing the Dire team.

League of Legends

• --widget-first-team-color: The color representing the Blue team.

• --widget-second-team-color: The color representing the Red team.

Example of customizing theme

1
2
3
4
5
6
7
8

databet-widget {
    --widget-first-team-color: #1BAABE;
    --widget-second-team-color: #EC2040;
    --widget-primary-color: #B0B0B0;
    --widget-secondary-color: #6F6F6F;
    --widget-accent-color: #00EBAA;
    --widget-bg-color: #0d0d0d;
}

List of customizable Dota 2 variables for PitchTracker:

--widget-primary-color: The primary color of the widget.

--widget-secondary-color: The secondary color of the widget.

--widget-first-team-color: The color representing the first team.

--widget-second-team-color: The color representing the second team.

--widget-bg-color: The background color of the widget.

Example of customizing theme

1
2
3
4
5
6
7

databet-widget {
    --widget-first-team-color: #1BAABE;
    --widget-second-team-color: #EC2040;
    --widget-primary-color: #898989;
    --widget-secondary-color: #FEFEFE;
    --widget-bg-color: #0d0d0d;
}

Genius Sports Widgets

DATA.BET widgets allow you to integrate third-party widgets like Genius Sports using a single integration approach.

Embedding to your website

1. Inserting the widget into the page

1
2
3
4
5

<databet-widget 
        type="genius" 
        token="<JWT_TOKEN>" 
        geniusLayout="<GENIUS_LAYOUT>" 
        geniusWidget="<GENIUS_WIDGET>"></databet-widget>

2. Configuring Genius Widget

There are multiple values are supported for geniusLayout and geniusWidget, and they are depend on the sport you use it with.

Supported layouts

Supported Widgets

For layouts other than standalone, various widgets are included by default (see examples) and cannot be customized using the geniusWidget attribute.

The geniusWidget attribute can only be used when the geniusLayout is set to standalone. This allows you to specify the widget manually.

Examples

American Football with regular layout:

American Football with standalone layout and playByPlay widget:

American Football with standalone layout and teamStats widget:

Summary

Integrating widgets is a simple and straightforward process. If you have any questions, please do not hesitate to contact support.