Integrating DATA.BET Widgets

If you have DATA.BET SPA integrated there is no need to set up widgets additionally.

Before integrating the widgets, it is required to integrate Odds Feed first.

The integration of widgets consists of two parts: back-end and front-end. First, on the back-end side, must generate a token to access widgets. Then, on the front-end side, you need to add the script and widget elements to the page.

This section covers the front-end part of the integration.

Importing the script

Add one of the following scripts to your page, depending on the environment you are working in:

1

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

1

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

Adding widget elements

After importing the script, you can add databet-widget elements on your page.

Attributes are as follows:

• type - type of the widget. There are several widget types you can arrange separately, but the recommended approach is to use a single Multi Widget. Allowed values:
  • multi
  • scoreboard
  • pitchTracker
  • gamesStatistics
  • teamsStatistics
  • h2h
  • stream
  • genius
• token - auth token (see Authorization for details).

Examples of adding databet-widget element:

1

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

1
2
3
4
5
6
7

<databet-widget type="scoreboard" token="<JWT_TOKEN>"></databet-widget>
<databet-widget type="pitchTracker" token="<JWT_TOKEN>"></databet-widget>
<databet-widget type="gamesStatistics" token="<JWT_TOKEN>"></databet-widget>
<databet-widget type="teamsStatistics" token="<JWT_TOKEN>"></databet-widget>
<databet-widget type="h2h" token="<JWT_TOKEN>"></databet-widget>
<databet-widget type="genius" token="<JWT_TOKEN>"></databet-widget>
<databet-widget type="stream" token="<JWT_TOKEN>"></databet-widget>

To determine whether a widget type is available for the sport event, check extensions list app.data.bet/widget in event extensions_updated. In order to display Multi Widget, ensure there is at least one value in the list. To display a specific widget type, use the value matching the type attribute of the databet-widget element:

To manage widget types enabled for your account, refer to STM Widget Configuration or contact DATA.BET Integration Manager.

Configuring paywall UI for video stream widget

Video stream widget may be protected by paywall. You can configure the UI indicating your users what steps they need to take to access the widget. The UI will be displayed in the next cases:

• user not logged in (claim sub in the JWT is empty)
• claim paywall_passed in the JWT is false

To configure the paywall UI, add a child element to databet-widget with attribute slot equal to paywall.

Example of configuring the paywall UI:

1
2
3
4
5
6

<databet-widget type="multi" token="<JWT_TOKEN>">
    <div slot="paywall">
        <p>Log in to watch stream</p>
        <button>Log in</button>
    </div>
</databet-widget>

If paywall element is not provided, the default paywall UI will be displayed. Examples:

Customizing the widget

DATA.BET Widgets can be customized to meet your design requirements.

Restricting the size

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

Example of styling the widget:

1
2
3
4

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

Recommended size restrictions:

• Minimal height is 300px if the width is less than 550px
• Minimal height is 320px if the width is more than 550px

For Multi Widget, minimal height recommended is 360px.

Custom CSS variables

You can customize the appearance using custom CSS variables.

Common color customization

CSS Variables for common color customizations are as follows:

• --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.

Some examples:

Sports-specific color customization

CSS Variables for sports-specific color customizations are as follows:

• --widget-first-team-color: The first team's color in the widget.
• --widget-second-team-color: The second team's color in the widget.

Definitions of the first and second teams depend on the sport:

Some examples of color customization:

Adding a custom tab to Multi Widget

To add a custom tab to Multi Widget, add element with attribute slot prefixed with tab-. This utilizes Web Component Slot element. Example of adding a custom tab:

1
2
3
4
5

<databet-widget type="<WIDGET_TYPE>" token="<JWT_TOKEN>">
    <div slot="tab-<tab-slot-name>">
        OWN_CONTENT
    </div>
</databet-widget>

Configuring order of widgets in Multi Widget

To configure the order of widgets in Multi Widget, add attribute order to the databet-widget element. The value of the attribute is a comma-separated list of widget types (no spaces between values).

If some of the provided widget types are missing in the Multi Widget, they are ignored.

If Multi Widget contains widget types that not specified in the attribute, they go after the specified ones in the default order. The default order is not guaranteed and may always be changed.

Example of configuring the order of widgets in Multi Widget:

1

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

In the example above, widgets will be arranged in the following order:

• Video Stream (if available)
• Scoreboard (if available)
• Pitch Tracker (if available)
• ... remaining widgets in the default order

Excluding widgets from Multi Widget

To exclude some widgets from Multi Widget, add attribute exclude to the databet-widget element. The value of the attribute is a comma-separated list of widget types (no spaces between values).

This may be useful if you want to display Multi Widget and arrange a separate widget type somewhere else on the page.

Example of excluding widgets from Multi Widget:

1
2
3
4
5
6

<databet-widget type="multi" token="<JWT_TOKEN>" exclude="stream,pitchTracker"></databet-widget>
<!-- this goes somewhere else on the page: -->
<div>
    <databet-widget type="stream" token="<JWT_TOKEN>"></databet-widget>
    <databet-widget type="pitchTracker" token="<JWT_TOKEN>"></databet-widget>
</div>

Configuring Multi Widget side-by-side layout

Multi Widget supports side-by-side layout (see example). To enable it, set attribute sideBySideBreakpoint (in pixels). The minimal recommended value is 760. When Multi Widget reaches the breakpoint width, its layout splits into two columns.

Example of configuring Multi Widget layout breakpoint:

1

<databet-widget type="multi" token="<JWT_TOKEN>" sideBySideBreakpoint="760"></databet-widget>

The widget that goes to the left side is the first one from the Multi Widget. To configure it, use order customization.

Customizing Genius Widget Game Tracker

Genius Widget Game Tracker can be customized adding its own attribtes to the databet-widget element:

• geniusLayout - layout of the Genius widget. Allowed values: regular, sideBySide, standalone
• geniusWidget - widget type when geniusLayout is standalone (otherwise must not be specified).

Supported values for geniusLayout depend on the sport:

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

Example of adding databet-widget with custom Genius setup:

1
2
3
4
5
6

<databet-widget
    type="genius"
    token="<JWT_TOKEN>"
    geniusLayout="standalone"
    geniusWidget="teamStats"
></databet-widget>

Some visual examples: