Betting Entertainment Tools

Widgets Demo

Data Adapter

Overview

This type of integration offers more flexibility but does require more work on the client side. How and when you fetch data is up to you, we only expect that the data returned is in correct format.

  1. Widget will request data by executing functions provided to widget by DataAdapterProviderConfig parameter. Detailed flow of data can be seen in chart bellow.
  2. Widget will call getOffering function every 30s to update offering.
  3. Transform offering data to OfferingResponse format, them execute callback from getOffering function getOfferingCallback in order to pass data back to widget.
  4. Widget will call calculate function whenever selection within widget is updated.
  5. Calculate odds and remaining markets available for selection
  6. Transform calculated data to CalculateResponse format, them execute callback from getOffering function calculateCallback in order to pass data back to widget.
  7. When user clicks on "Add to bet slip" button, addToBetSlip function is executed.
  8. We recommend that you check if provided selection is still valid.
  9. If validation passed, add outcomes to your bet slip and execute addToBetSlip setting succeeded property to true.
  10. If you wish to reject adding selection, set succeeded property to false and add localized reason to be displayed in the widget.

Data flow chart


Custom views integration tutorial

For a comprehensive step-by-step guide on creating custom views for the Custom Bet widget using Data Adapter functions, check out the tutorial.
This tutorial will walk you through the process, making it easier to design and implement custom views.

Example

Data Adapter Integration Example - for dataProviderConfig example check Widgets.CustomBet.DataAdapter.DataAdapterProviderConfig

<script>
    (function (a, b, c, d, e, f, g, h, i) {
      a[e] || (i = a[e] = function () {
        (a[e].q = a[e].q || []).push(arguments)
      }, i.l = 1 * new Date, i.o = f,
        g = b.createElement(c), h = b.getElementsByTagName(c)[0], g.async = 1, g.src = d, g
          .setAttribute("n", e), h.parentNode.insertBefore(g, h)
      )
    })(window, document, "script",
      "https://master-cb.review.widgets.bets-stg.euc1.srcloud.io/betradarsolid/widgetloader", "SIR", {
      language: "en",
      oddsType: "eu" // eu, uk, us is accepted
    });

    SIR("addWidget", ".sr-widget", "customBet", {
      matchId: 32015685,
      dataProvider: 'custom',
      dataProviderConfig: {
        getOffering,
        calculate,
        addToBetSlip
      }
    });
</script>
<div id="sr-widget"></div>

Type Definitions

Object

# CalculateResponse

Properties:
Name Type Attributes Description
cbMarkets Array.<CalculationMarket> Array.<Widgets.CustomBet.DataAdapter.CalculationMarket> <required>

Array of available markets based on already selected outcomes
odds string

Calculated odds
error string

Error to be displayed instead of odds.
Example
{
    cbMarkets: [
    {
        // id: 267674245,
        id: '1',
        status: {
            isActive: true
        },
        srMarket: {
            id: '1'
        },
        outcomes: [
        {
            // id: 619793109,
            srOutcomeId: '1',
            status: {
                isActive: true
            }
        },
        {
            // id: 619793110,
            srOutcomeId: '2',
            status: {
                isActive: true
            }
        },
        {
            // id: 619793111,
            srOutcomeId: '3',
            status: {
                isActive: true
            }
        }
        ]
    }
    ],
    odds: '1.23'
}
Object

# CalculationMarket

Properties:
Name Type Attributes Description
id string | number
srMarket SRMarket Widgets.CustomBet.CustomBet.SRMarket

If you are using srMarket and srOutcome in OfferingResponse then provide this property
status Status Widgets.CustomBet.CustomBet.Status <required>
outcomes Array.<CalculationOutcome> Array.<Widgets.CustomBet.DataAdapter.CalculationOutcome> | Array.<SRCalculationOutcome> Array.<Widgets.CustomBet.DataAdapter.SRCalculationOutcome> <required>

If you are using srMarket and srOutcome in OfferingResponse then provide SRCalculationOutcome type.
Object

# CalculationOutcome

Properties:
Name Type Description
id string | number

Outcome id you are using in OfferingResponse
status Status Widgets.CustomBet.CustomBet.Status
Object

# DataAdapterProviderConfig

Collection of functions used for commination between widget and client code. Examples can be found in corresponding type definitions.

Properties:
Name Type Description
getOffering getOffering Widgets.CustomBet.DataAdapter.getOffering

Function called to get market offering.
calculate calculate Widgets.CustomBet.DataAdapter.calculate

Function called to get check for conflicts in selected markets, to get calculated odds for selection amd to get which markets are still available with current selection
addToBetSlip addToBetSlip Widgets.CustomBet.CustomBet.addToBetSlip

This function is called when the user clicks "Add to bet slip" button.
Object

# Market

Properties:
Name Type Attributes Default Description
id string | number <required>

Unique id for category
status Status Widgets.CustomBet.CustomBet.Status <required>
name string <required>

Market name to be displayed
fullName string

The full name of the market (usually for player markets) displayed in the tooltip on mouse hover.
outcomes Array.<Outcome> Array.<Widgets.CustomBet.DataAdapter.Outcome> <required>

Array of outcomes for market
srMarket SRMarket Widgets.CustomBet.CustomBet.SRMarket

If given we will try to match it with recommended configuration
srAllowMultipleOutcomes boolean

Set to true if you wish to enable selection of multiple outcomes of this market. CAUTION: Using this setting might not work with custom bet
srMarketLayout 'list' | 'grid' | 'accordion' 'list'

Layout used to display outcomes
iconUrl string

Url to for custom icon of market
Example
{
 id: oneXtwo,
 status: { isActive: true }
 name: '1x2',
 outcomes: [{ id: 1, status: { isActive: true }, name: 'Luton Town' }, ...]
 srMarket: { id: '1' }
}
Object

# MarketCategory

Properties:
Name Type Description
id string | number

Unique id for category
name string

Category name
cbCategoryItems Array.<string> | Array.<number>

Array of market ids for category.
Example

{
 id: 1,
 name: 'Top Markets',
 cbCategoryItems: ['3way_market_UniqueId', 'doubleChance_market_UniqueId', ...]
}
Object

# MarketMapping

Market mapping is configuration object that combines multiple markets into one view.

Properties:
Name Type Attributes Default Description
id string | number <required>

Unique id for market mapping and market
status Status Widgets.CustomBet.CustomBet.Status <required>
name string <required>

Displayed market mapping name
marketList Array.<string> | Array.<number> <required>

Array of market ids to be combined in this view.
cbViewLayout 'row' | 'tabs' 'tabs'

Layout used to display markets listed in marketList
srHideHeader string

If set to true it will hide either column or row header depending on the layout
iconUrl string

Url to for custom icon of market
Object

# OfferingResponse

Properties:
Name Type Attributes Description
markets Array.<Market> Array.<Widgets.CustomBet.DataAdapter.Market> <required>
matchName string

If provided it will replace '{teams.home} vs. {'teams.away'}' derived from teams prop. If nether is present only product name will be displayed.
teams object
home string <required>

Home team name
away string <required>

Away team name
marketCategories Array.<MarketCategory> Array.<Widgets.CustomBet.DataAdapter.MarketCategory>

Required if you are not using sr ids. If provided it will also replace default settings for category.
metaMarkets Array.<MarketMapping> Array.<Widgets.CustomBet.DataAdapter.MarketMapping>

Market categories (metaMarkets) group markets together.
Example
{
    teams: {
        home: England,
        away: Germany
    }
    markets: [
        {
            "id": 267674427,
            "status": {
                "isActive": true
            },
            "name": "Exact goals",
            "outcomes": [
                {
                    "id": 619793849,
                    "status": {
                        "isActive": true
                    },
                    "name": "0",
                    "srOutcomeId": "sr:exact_goals:5+:1336"
                },
                {
                    "id": 619793850,
                    "status": {
                        "isActive": true
                    },
                    "name": "1",
                    "srOutcomeId": "sr:exact_goals:5+:1337"
                },
                {
                    "id": 619793851,
                    "status": {
                        "isActive": true
                    },
                    "name": "2",
                    "srOutcomeId": "sr:exact_goals:5+:1338"
                },
                {
                    "id": 619793852,
                    "status": {
                        "isActive": true
                    },
                    "name": "3",
                    "srOutcomeId": "sr:exact_goals:5+:1339"
                },
                {
                    "id": 619793853,
                    "status": {
                        "isActive": true
                    },
                    "name": "4",
                    "srOutcomeId": "sr:exact_goals:5+:1340"
                },
                {
                    "id": 619793854,
                    "status": {
                        "isActive": true
                    },
                    "name": "5+",
                    "srOutcomeId": "sr:exact_goals:5+:1341"
                }
            ],
            "srMarket": {
                "id": "21",
                "specifiers": "sr:exact_goals:5+"
            }
        },
        ...
    ]
}
Object

# Outcome

Properties:
Name Type Attributes Description
id string | number <required>

Outcome unique id
status Status Widgets.CustomBet.CustomBet.Status <required>
name string <required>

Outcome name
cbColumn string

If present we will sort the outcomes in the given column, srOutcomeId will be ignored
srOutcomeId string

Sportradar outcome id
Example

Outcome 'Other' will bi placed in draw column:

{
 id: 'cs_other',
 status: { isActive: true }
 name: 'Other',
 cbColumn: 'Draw'
 srOutcomeId: '324'
}
Object

# SRCalculationOutcome

Properties:
Name Type Description
srOutcomeId string

Sportradar outcome id
status Status Widgets.CustomBet.CustomBet.Status

# calculate(args, callback)

Parameters
Name Type Description
args CalculateArgs Widgets.CustomBet.CustomBet.CalculateArgs
callback calculateCallback Widgets.CustomBet.DataAdapter.calculateCallback
Example
function calculate(args, callback) {
    // Args parameter has data needed to call CustomBet calculate api.
    // Parse and convert calculate api response.
    callback(undefined, dataObject]
    });
};

# calculateCallback(error, data)

Parameters
Name Type Description
error CBError Widgets.CustomBet.CustomBet.CBError | string | undefined

Error object or UOF forwarded xml as string.
data CalculateResponse Widgets.CustomBet.DataAdapter.CalculateResponse

# getOffering(args, callback)

Parameters
Name Type Description
args MatchArgs Widgets.CustomBet.CustomBet.MatchArgs
callback getOfferingCallback Widgets.CustomBet.DataAdapter.getOfferingCallback
Example
function getOffering(args, callback) {
    // Get and convert data
    callback(undefined, dataObject]
    });
};

# getOfferingCallback(error, data)

Parameters
Name Type Description
error CBError Widgets.CustomBet.CustomBet.CBError | string | undefined

Error object or UOF forwarded xml as string.
data OfferingResponse Widgets.CustomBet.DataAdapter.OfferingResponse