Widgets integration

Include the following script on the page:

<script type="text/javascript" src="https://{APP_URL}/assets/sdk/init.js"></script>

The Best Highlights widget displays popular events and is available as a slider. This widget allows users to quickly browse matches from various disciplines and place bets.

Interface and Functionality

• Disciplines: At the top of the widget, there is a row with icons representing different disciplines (e.g., football, basketball, tennis, etc.). Selecting an icon highlights the chosen discipline in orange and filters the displayed live events accordingly.

• Event list: Ongoing events are displayed as cards in a slider. Each card includes:

  • Tournament: The name of the tournament the event belongs to (e.g., “Spain. La Liga”).
  • Match start time: The date and time the event starts.
  • Fire icon: Indicates that the event is featured or top-rated.
  • Teams or participants: The names of the two competing teams or participants (e.g., “Espanyol vs Sevilla”).
  • Match winner market: Odds for available outcomes, including two or three possible results: win for the first team, draw, or win for the second team.

• Slider navigation: Pagination dots and navigation arrows are located below the slider, indicating the current position and allowing scrolling through the list of events.

This widget provides players with convenient access to popular events and quick bet selection, offering all necessary information in a compact format.

Widget integration

Insert this element in the place where you want to embed our widget:

<div id="top-events-widget-container"></div>

TIP

To initialize the Best Highlights widget, call the BetSdk.initTopEventsWidget() function:

const  topEventsWidget = BetSdk.initTopEventsWidget({
    mainFrameUrl:  "http://<Partner_host>/"  //Sportsbook main app URL
    host: "{{HOST}}"  //Sportsbook host
    cid: "demopartner", //Partner id
    lang:  "en", //language
    containerId:  "top-events-widget-container", // Id of element to render widget
    height:  "<string>", //Should be specified 372px by the height of the widget
    customStyles:  "http://<url>", //url with custom css styles
})

The Live Bets widget displays events happening in real time and is available as a slider. This widget allows players to view ongoing events and place bets on markets.

Interface and Functionality

• Disciplines: At the top of the widget, there is a row of discipline icons (e.g., football, basketball, tennis, etc.). Selecting an icon highlights the chosen discipline in orange and filters the displayed live events accordingly.

• Live events: Ongoing events are displayed as cards in a slider. Each card includes:

  • Tournament: The name of the tournament the event belongs to (e.g., “Ukraine. Premier League”).
  • Live indicator: Indicates that the event is currently ongoing.
  • Streaming icon: Shows that a live stream is available for the event.
  • Score: The current score of the match.
  • Teams or participants: The names of the two competing teams or participants (e.g., “Rukh Lviv vs Chernomorets Odessa”).
  • Match winner market: Odds for available outcomes, which can change in real time. Two or three possible results are displayed: win for the first team, draw, or win for the second team.

• Slider navigation: Pagination dots and navigation arrows are located below the slider, indicating the current position and allowing scrolling through the list of events.

This widget provides players with quick access to real-time events and enables them to place live bets on ongoing matches.

Widget integration

Insert this element in the place where you want to embed our widget:

<div id="live-events-widget-container"></div>

TIP

To initialize the Live Bets widget, call the BetSdk.initLiveEventsWidget() function:

const  liveEventsWidget = BetSdk.initLiveEventsWidget({
    mainFrameUrl:  "http://<Partner_host>/"  //Sportsbook main app URL
    host: "{{HOST}}"  //Sportsbook host
    cid: "demopartner", //Partner id
    lang:  "en", //language
    containerId:  "live-events-widget-container", //An element of DOM to render widget
    height:  "<string>", //Should be specified 372px by the height of the widget
    customStyles:  "http://<url>", //url with custom css styles
})

The Bets History widget provides users with information about their unsettled and settled bets.

Interface and Functionality

• Bet List: Each tab lists bets sorted by the time they were placed.
• Bet Information:
  • Bet number and placement time (e.g., “#3, Oct 25, 16:19”).
  • Match and bet type (e.g., “Fenerbahce vs Panathinaikos, Winner”).
  • Odd and Bet amount.
  • Possible win shows the maximum amount that can be won.
  • Cash out: An active button for withdrawing funds. Displays the amount that can be returned.
  • Copy code: This function allows users to copy the bet code, which can then be entered in the betslip to display it. This feature enables users to share this bet with another user.
  • Copy bet ID: Next to each bet, there is a Copy bet ID button that allows users to quickly copy the unique identifier of the bet.

This widget allows users to easily view unsettled and settled bets, quickly copy bet IDs and codes, and use the Cash Out function for partial returns.

Widget integration

Insert this element in the place where you want to embed our widget:

<div id="bet-history-widget"></div>

TIP

To initialize the Bet history widget, call the BetSdk.initBetsHistory() function:

const betsHistoryWidget = BetSdk.initBetsHistory({
    mainFrameUrl: "http://<Partner_host>/" //Sportsbook main app URL
    host: "{{HOST}}" //Sportsbook host
    cid: "demopartner", //Partner id
    lang: "en", //language
    containerId: "bet-history-widget", //An element of DOM to render widget
    //additional parameter:
    width: "<string>", //widget width (100%)
    height: "<string>", //widget height (100%)
    customStyles: "http://<url>", //url with custom css styles
    sub_purtner_id: "partner#123", //<string> sub partner id
})