Betting Entertainment Tools

Widgets Demo

Custom Bet Widget

Glossary:

UOF → Unified Odds Feeds

Types of integration:

We offer two main types of integration methods, each with distinct advantages depending on the level of control and customization you need.
  1. UOF Proxy
    The UOF Proxy integration enables direct data handling from the Unified Odds Feed (UOF), forwarding responses directly without modification. Here’s how it works:
    • Simplicity: The integration is straightforward, requiring only that responses from the UOF be passed through without modification. We provide a 1-to-1 function setup, which simplifies integration as you don’t need to handle complex transformations; we’ll handle XML validation and parsing.
    • Optimization: We manage caching and optimize request volumes, meaning fewer redundant calls and better data efficiency.
    • Considerations: While UOF Proxy is streamlined, it does have some limitations. There are no customization options since it’s a direct pass-through integration, and it may require a proxy server setup to serve front-end requests if one isn’t already in place.
    For further details, you can refer to the UOF Proxy Documentation.
  2. Data Adapter
    The Data Adapter approach allows for a fully customized integration, giving you complete control over how data is fetched, transformed, and displayed. Here’s what you need to know:
    • Flexibility: With this method, you determine exactly how the data is transformed and presented to match your needs. You have complete control over market and outcome names and the presentation of data in general..
    • Responsibility: This integration provides maximum flexibility, but it also comes with the responsibility of ensuring that all data transformations on the client side adhere strictly to our data specifications.
    • Customization: Ideal for applications needing personalized display options or unique data structures, the Data Adapter approach allows you to maintain the look, feel, and functionality as desired.
      Both integration methods support widget theme customization, enabling you to tailor the appearance to match your style. You can achieve this by applying custom CSS properties directly to the widget's underlying HTML components. Example here.
    You can find more information in the Data Adapter Documentation.

For the widget to render you need to provide matchId and dataProviderConfig properties. In case you are using data adapter implementation you also need to set dataProvider property to 'custom'. Other properties are optional.

Parameters
Name Type Attributes Default Description
props object <required>
matchId string <required>

Sportradar match ID.
dataProviderConfig UOFDataProviderConfig Widgets.CustomBet.UOFProxy.UOFDataProviderConfig | DataAdapterProviderConfig Widgets.CustomBet.DataAdapter.DataAdapterProviderConfig <required>

Configuration props for type of data ingestion of widget. UOF example here, Custom example here
dataProvider string uofProxy

Selection of the type of data provider you are going to use. Options are 'uofProxy' and 'custom'
sportId string

Sport ID. If not provided it will over go calling match info to get sport id.
buttonTitle string Custom Bet

If set will the text on the CTA button.
buttonIcon string

URL to a button icon image.
productTitle string

If set, it will change the widgets title.
validMarketIds array.<string>

If set, it will display only markets specified in the array, must be used on widget initialization, changed dynamically will reset the state of the widget.
blockedMarketIds array.<string>

If set, it will hide markets and markets with specifiers defined in the array, must be used on widget initialization, changed dynamically will reset the state of the widget. Example: ["30", "18:total=5.5"]
addToBetslipTimeoutMs integer 10000

Number in ms, that the widget will wait for the onAddToBetslip callback response before displaying a timeout/error.
useSessionStorage string false

Set if you want to 'remember' selections after closing and reopening widget.
isInline string false

Set to true if the widget will open inline and not as a popup.
overlayWidth string 720

Width of the popup window. Default size is 720px.
overlayParent string

Set if you want to specify the exact parent element where the popup will render.
isDialogInFullScreen boolean false

CustomBet widget overlay takes up full viewport width and height.
hideBetAssist boolean false

When set to true, will hide the bet assist feature.
useClientTheming string false

When set to true, will use custom css definition provided by the client
dbg string false

Set to true to get some extra information on markets and outcomes, can be useful in development or debugging sessions. Mean to be used in development env. only.
showExpandOnItems number 3

Number of outcomes that is shown in the bet builder before collapsing into 1 item. Is shown only on Mobile size
minNumberOfSelections number 1

Minimum number of outcomes that needs to be added to the bet builder in order to toi be able to add to betslip
selectedOutcomes Array.<UniqueOutcome>

Array of UniqueOutcome objects, that can be used to load selections into the bet builder. UniqueOutcome must have all required properties defined here, but no need for methods.
mainMarkets array.<string>

An array of market IDs to display in the main category. If not specified, the default markets will be used. You can find all available markets for each sport here.
categoryFeaturedItems Record.<categoryId, Array.<marketId>>

Custom configuration for featured items in each category (excluding the main category). It's an object where the category ID is the key and an array of market IDs is the value. List of categories with its market id's can be found here. For examples, refer to: here.
disableCache boolean false

Set to true to disable internal caching of provider response data.

Widgets

Type Definitions

Object

# AddToBetSlipHandleResult

Object to be passed into Widgets.CustomBet.CustomBet.addToBetSlip

Properties:
Name Type Attributes Description
succeeded boolean <required>

True if outcomes were successfully validated and added to bet slip.
reason string

Reason for failed action, if present it will be displayed in the widget.
Object

# CBError

Error object required to display correct error.

Properties:
Name Type Description
type number
Value Type Description
1 General Blocks all actions except removing outcomes from bet slip in custom bet widget.
2 BetStop Blocks all actions in custom bet widget.
3 Calculation Blocks adding outcomes to bet slip
message string

Text that will be displayed for error, localization required.

# CalculateArgs

Properties:
Name Type Description
matchId string

Sportradar match ID.
selectedOutcomes Array.<UniqueOutcome> Array.<Widgets.CustomBet.CustomBet.UniqueOutcome>

Array of all the selected outcomes in the widget.

# MatchArgs

Properties:
Name Type Description
matchId string

Sportradar match ID.

# SRMarket

Properties:
Name Type Attributes Description
id string <required>

Sportradar id for this market.
specifiers string

For markets that have same id but different specficer.
Object

# Status

Properties:
Name Type Attributes Description
isActive boolean <required>
message object

Optional message to be displayed as status.
title string <required>

Main text of status message.
superscript string <required>

Superscripted text of status message.
hasIcon boolean <required>

If true, it shows unavaiable icon before superscripted text.
Example

{
 isActive: false,
 message: {
     title: "What will be the score? 2 : 2",
     superscript: "Can't combine with",
     hasIcon: true
 }
}

# TeamArgs

Properties:
Name Type Description
teamId string

# addToBetSlip(args, callback)

This function is called when the user clicks "Add to bet slip" button. Here you receive selected outcomes and validate them befire adding them to your bet slip or reject them.

Parameters
Name Type Attributes Description
args Object <required>

Object with data.
matchId string <required>

Match id of match that outcomes belong to.
selectedOutcomes Array.<UniqueOutcome> Array.<Widgets.CustomBet.CustomBet.UniqueOutcome> <required>

Array of outcomes that were selected in the widget.
displayedOdds string

Snapshot of odds returned by last calculation, CAUTION: ODDS ARE NOT UP TO DATE
callback AddToBetSlipHandleResult Widgets.CustomBet.CustomBet.AddToBetSlipHandleResult | boolean <required>

To accept or reject call this function. If data is not received in time set by addToBetslipTimeoutMs widget prop or by defalt in 10000ms.
Example

Upon succesfull validation your call callback parameter and pass in Widgets.CustomBet.CustomBet.AddToBetSlipHandleResult object.

function betslipCallback(args, callback) {
   if (validation(args) is succesfull) {
       callback(
           {
              succeeded: true
           }
       )
   } else {
       callback(
           {
               succeeded: false,
               reason: 'Reason why it failed'
           }
       )
   }
}