Skip to content

Widgets

You can configure the following widgets: Betslip Mobile, Betslip Tablet, and Betslip Desktop outside of the betting layout.

First, create an html element with a unique id where you want to display the widget

1
<div id="YOUR_UNIQUE_ID"></div>

During the initialization, call method bettingAPI.setupWidget(name: WidgetName, options: WidgetBetslipOptions) using the following types:

1
2
3
4
5
6
type WidgetName = 'betslipMobile' | 'betslipTablet' | 'betslipDesktop';

interface WidgetBetslipOptions {
  // undefined - place based on our application; null - no render; string - render widget in you dom element
  containerElementId?: string | null;
}

Example of widget Betslip Mobile:

1
<div id="YOUR_BETSLIP_MOBILE" class="your-betslip__mobile"></div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
.your-betslip__mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2222;
    width: 100%;
}

.your-betslip__mobile .__app-betslip-expanded {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
}

1
2
3
4
5
const betslipMobileOptions: WidgetBetslipOptions = {
    containerElementId: 'YOUR_BETSLIP_MOBILE',
};

bettingAPI.setupWidget('betslipMobile', betslipMobileOptions);