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
  • pitch_tracker
  • timeline_log
  • games_statistics
  • teams_statistics
  • h2h_statistics
  • stream
  • genius
  • basic_scoreboard
• token - auth token (see Authorization for details).
• locale (optional) - language tag defined by RFC 5646. It can be either a two-letter ISO639-1 language code or can contain a region subtag. Examples: en, en-CA. If the locale is not explicitly set, the widget will use the browser’s locale. It falls back to en if not supported.

Examples of adding databet-widget element:

1

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

1
2
3
4
5
6
7

<databet-widget type="scoreboard" token="<JWT_TOKEN>" locale="en"></databet-widget>
<databet-widget type="pitch_tracker" token="<JWT_TOKEN>" locale="en"></databet-widget>
<databet-widget type="games_statistics" token="<JWT_TOKEN>" locale="en"></databet-widget>
<databet-widget type="teams_statistics" token="<JWT_TOKEN>" locale="en"></databet-widget>
<databet-widget type="h2h_statistics" token="<JWT_TOKEN>" locale="en"></databet-widget>
<databet-widget type="genius" token="<JWT_TOKEN>" locale="en"></databet-widget>
<databet-widget type="stream" token="<JWT_TOKEN>" locale="en"></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 manage widget types enabled for your account, refer to STM Widget Configuration or contact DATA.BET Integration Manager.

Supported locales

The current list of supported locales is represented in the table below:

The list may expand over time. If you need additional locales, please contact your 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 is not logged in (claim sub in the JWT is empty)
• paywall is not passed (see claims paywall_passed and paywall_preference in the JWT)

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>" locale="en">
    <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:

Handling login button click

In order to improve UX, you may opt to having a button in the default paywall UI when user is not logged in.

The button can be enabled by your integration manager.

To handle the click, listen for widget:login event on the databet-widget element or its parents (the event is bubbled). Example:

1
2
3
4
5

<databet-widget id="databetwidget" type="multi" token="<JWT_TOKEN>" locale="en"></databet-widget>
<script>
  const widget = document.getElementById('databetwidget');
  widget.addEventListener('widget:login', () => {/** handle click here */});
</script>

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.

Some examples of widget styling:

1
2
3
4

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

1
2
3
4
5
6

<databet-widget
  type="multi"
  token="<JWT_TOKEN>"
  locale="en"
  style="width: 550px; height: 320px;"
></databet-widget>

1
2
3

<div style="width: 550px; height: 320px;">
  <databet-widget type="multi" token="<JWT_TOKEN>" locale="en"></databet-widget>
</div>

The restrictions for minimal widget size are as follows:

Custom CSS variables

You can customize the appearance using custom CSS variables.

General layout customization

CSS Variables for general layout customizations are as follows:

• --widget-gap-between-widgets: The gap between widgets in Multi Widget layout.
• --widget-border-radius: The border radius of widget containers.

Some examples of layout customization:

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.
• --widget-overlay-bg-color: The background color of overlays, tooltips, and tab selectors.

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:

Pitch Tracker color customization

CSS Variables for Pitch Tracker-specific color customizations are as follows:

• --widget-map-color: The background color of the map in the Pitch Tracker widget.

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

<databet-widget type="<WIDGET_TYPE>" token="<JWT_TOKEN>" locale="en">
  <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,pitch_tracker" locale="en"></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,pitch_tracker" locale="en"></databet-widget>
<!-- this goes somewhere else on the page: -->
<div>
    <databet-widget type="stream" token="<JWT_TOKEN>" locale="en"></databet-widget>
    <databet-widget type="pitch_tracker" token="<JWT_TOKEN>" locale="en"></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" locale="en"></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:

JSON customization

To make customization more flexible, DATA.BET Widget allows passing configuration as a JSON string via the widgetconfig attribute. Currently, only Multi Widget can be customized using this approach.

The supported configuration schema is as follows:

 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

type WidgetConfig = {
  multiWidgetTab?: {
    css?: {
      fontFamily?: string
      height?: string
      text?: {
        color?: WidgetConfigColor
        fontSize?: string
      }
      background?: {
        color?: WidgetConfigColor
      }
      icon?: {
        color?: WidgetConfigColor
      }
      border?: {
        border?: "top" | "bottom" | "left" | "right" | "all"
        radius?: string[]
        width?: string
        color?: WidgetConfigColor
      }
    }
    labels?: Record<string, string>
  }
}

interface WidgetConfigColor {
  default?: string
  hover?: string
  active?: string
}

In the schema above, the only property that requires explanation is labels. It is a dictionary where the key is the widget type (e.g., scoreboard, pitch_tracker, etc.), and the value is the label that will be displayed on the corresponding tab.

Example of passing JSON customization to Multi Widget:

1
2
3
4
5

<databet-widget
  type="multi"
  token="<JWT_TOKEN>"
  widgetconfig='{"multiWidgetTab":{"css":{"fontFamily":"Arial, sans-serif"}},"labels":{"scoreboard":"Match Insights","stream":"Live Map"}}'
></databet-widget>

In the example above, the Multi Widget tabs will use Arial, sans-serif font family, the "Scoreboard" tab will be labeled as "Match Insights", and the "Stream" tab will be labeled as "Live Map":

Observing widget state

The widget reports changes in its state by emitting lifecycle events with type widget:state_changed. Each instance of databet-widget emits its own events. The events are bubbled, so you can also listen for them on any parent element (up to window).

The widget-related payload is stored in the detail property of the event (as per CustomEvent). The payload contains the following properties:

• type - indicates the lifecycle event type.
  • mounted - the widget is mounted (fired once after the widget is added to the DOM).
  • error - an error occurred (bad widget configuration, network error, etc.).
  • auth_failed - authentication failed (e.g., invalid or expired token).
  • content_missing - no requested widget types are available for the sport event (attributes type and exclude are respected). If the widget is configured correctly, this typically occurs when a requested widget has just become unavailable before the extension app.data.bet/widget is updated (see Adding widget elements). In general, widget availability is eventually consistent with the feed. You may want to handle this event to hide the widget in such cases.
  • loaded - the widget data has been loaded.
  • list_updated - the list of available widget types has been updated (available for Multi Widget).
  • tab_switched - the active tab in Multi Widget has been switched.
  • pip_changed - the Picture-in-Picture mode has been changed.
  • unmounted - the widget is unmounted (fired once after the widget is removed from the DOM).
• message - a textual description of the event.
• data (optional) - contains additional information depending on the event type.

The payload schema is as follows:

 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

enum WidgetEventType {
  MOUNTED = 'mounted',
  ERROR = 'error',
  AUTH_FAILED = 'auth_failed',
  CONTENT_MISSING = 'content_missing',
  LOADED = 'loaded',
  LIST_UPDATED = 'list_updated',
  TAB_SWITCHED = 'tab_switched',
  PIP_CHANGED = 'pip_changed',
  UNMOUNTED = 'unmounted',
}

type WidgetEvent = {
  type: WidgetEventType
  message: string
}

type WidgetEventTabChanged = {
  type: WidgetEventType.TAB_SWITCHED
  data: {
    tabKey: string
  }
}

type WidgetEventPiPChanged = {
  type: WidgetEventType.PIP_CHANGED
  data: {
    isPiPOpen: boolean
  }
}

type Detail = WidgetEvent & (WidgetEventTabChanged | WidgetEventPiPChanged)

Example of listening for the events:

1
2
3
4
5
6
7
8
9

const handleWidgetEvent = (event: CustomEvent<Detail>) => {
  const { detail } = event

  console.log(`widget state changed: ${detail.type}`, detail.message, detail.data)
}

const target = document.getElementById('some-widget-id')!

target.addEventListener('widget:state_changed', handleWidgetEvent as EventListener)