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. You can also dynamically load in the script, and insert the widget in the desired place on your page inside a React/Angular/Vue as well.

1. Adding the script to your project

To integrate the DATA.BET widget, you need to add the bootstrap.js script to your project. This can be done using JavaScript.

1

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

2. Inserting the widget into the page

After adding the script, you can insert the widget in the desired place on your page.

1
2

<databet-widget type="scoreboard" token="yourJWTToken"></databet-widget>
<databet-widget type="pitchTracker" token="yourJWTToken"></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.
• 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 size of the parent element 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

3. Customizing the widget with CSS variables

You can customize the look and feel of the DATA.BET widget using CSS variables. Below is a list of the available CSS variables 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-score-color: The score color of the widget.

• --widget-unknown-team-color: The color used for unknown teams.

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

• --widget-tab-item-color: The color of the tab items in the widget.

• --widget-tab-active-color: The color of the active tab.

• --widget-tab-hover-color: The color of the tab on hover.

• --widget-level-bg-color: The background color of level indicators.

• --widget-level-text-color: The color of text in level indicators.

Counter-Strike

• --widget-first-team-name-color: The color of the CT team's name.

• --widget-second-team-name-color: The color of the T team's name.

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

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

Valorant

• --widget-first-team-name-color: The color of the Defender team's name.

• --widget-second-team-name-color: The color of the Attacker team's name.

• --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-name-color: The color of the Radiant team's name.

• --widget-second-team-name-color: The color of the 'Dire team's name.

• --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-name-color: The color of the Blue team's name.

• --widget-second-team-name-color: The color of the Red team's name.

• --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
 9
10
11
12
13
14
15
16

databet-widget {
    --widget-primary-color: #B0B0B0;
    --widget-secondary-color: #6F6F6F;
    --widget-score-color: #FEFEFE;
    --widget-first-team-name-color: #B0B0B0;
    --widget-second-team-name-color: #B0B0B0;
    --widget-first-team-color: #1BAABE;
    --widget-second-team-color: #EC2040;
    --widget-unknown-team-color: #868686;
    --widget-bg-color: #0d0d0d;
    --widget-tab-item-color: #B7B7B7;
    --widget-tab-active-color: #00EBAA;
    --widget-tab-hover-color: #00EBAA;
    --widget-level-bg-color: #1A1A1ACC;
    --widget-level-text-color: #FFFFFF;
}

List of customizable CSS 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-destroyed-tower-color: The color used for destroyed structures (like towers).

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

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

--widget-first-team-structure-color: The color representing the first team's structures.

--widget-second-team-structure-color: The color representing the second team's structures.

Example of customizing theme

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

databet-widget {
    --widget-primary-color: #898989;
    --widget-secondary-color: #FEFEFE;
    --widget-first-team-color: #1BAABE;
    --widget-second-team-color: #EC2040;
    --widget-destroyed-tower-color: #868686;
    --widget-bg-color: #0d0d0d;
    --widget-border-color: #3E3E3E;
    --widget-first-team-structure-color: #097786;
    --widget-second-team-structure-color: #9E2034;
}

Summary

Now you know how to integrate the DATA.BET widget into your website. You have added the required script to your project, inserted the widget in the desired location, and customized its size. If you have any further questions, refer to the DATA.BET documentation or contact our support team.