Data Adapter
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.
- Widget will request data by executing functions provided to widget by DataAdapterProviderConfig parameter. Detailed flow of data can be seen in chart below.
- Widget will call getOffering function every 30s to update offering.
- Transform offering data to OfferingResponse format, then execute callback from getOffering function getOfferingCallback in order to pass data back to widget.
- Widget will call calculate function whenever selection within widget is updated.
- Calculate odds and remaining markets available for selection
- Transform calculated data to CalculateResponse format, then execute callback from getOffering function calculateCallback in order to pass data back to widget.
- When user clicks on "Add to bet slip" button, addToBetSlip function is executed.
- We recommend that you check if provided selection is still valid.
- If validation passed, add outcomes to your bet slip and execute addToBetSlip setting succeeded property to true.
- 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 Creating Custom Views tutorial. This tutorial will walk you through the process, making it easier to design and implement custom views.
#Integration Example
Data Adapter Integration Example - for dataProviderConfig example check DataAdapterProviderConfig
html
<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
#CalculateResponse
Type: Object
| Property | Type | Required | Description |
|---|---|---|---|
cbMarkets | CalculationMarket[] | Yes | Array of available markets based on already selected outcomes |
odds | string | No | Calculated odds |
error | string | No | Error to be displayed instead of odds. |
#Example
javascript
{
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'
}#CalculationMarket
Type: Object
The calculate function is called whenever a selection within the widget is updated. The cbMarkets array in CalculateResponse must be populated with CalculationMarket entries to display available markets and outcomes in Custom Bet views. For markets and outcomes to appear, every entry must define at minimum a status and an outcomes array.
| Property | Type | Required | Description |
|---|---|---|---|
id | string | number | No | |
srMarket | SRMarket | No | If you are using srMarket and srOutcome in OfferingResponse then provide this property |
status | Status | Yes | |
outcomes | CalculationOutcome[] | SRCalculationOutcome[] | Yes | If you are using srMarket and srOutcome in OfferingResponse then provide SRCalculationOutcome type. |
#Example
javascript
{
id: "99",
status: {
isActive: true
},
outcomes: [
{ id: "1", status: { isActive: true } },
{ id: "2", status: { isActive: true } }
]
}#CalculationOutcome
Type: Object
| Property | Type | Description |
|---|---|---|
id | string | number | Outcome id you are using in OfferingResponse |
status | Status |
#DataAdapterProviderConfig
Type: Object
Collection of functions used for communication between widget and client code. Examples can be found in corresponding type definitions.
| Property | Type | Description |
|---|---|---|
getOffering | getOffering | Function called to get market offering. |
calculate | calculate | Function called to get check for conflicts in selected markets, to get calculated odds for selection and to get which markets are still available with current selection |
addToBetSlip | addToBetSlip | This function is called when the user clicks "Add to bet slip" button. |
#Market
Type: Object
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
id | string | number | Yes | Unique id for category | |
status | Status | Yes | ||
name | string | Yes | Market name to be displayed | |
fullName | string | No | The full name of the market (usually for player markets) displayed in the tooltip on mouse hover. | |
outcomes | Outcome[] | Yes | Array of outcomes for market | |
srMarket | SRMarket | No | If given we will try to match it with recommended configuration | |
srAllowMultipleOutcomes | boolean | No | 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' | No | 'list' | Layout used to display outcomes |
iconUrl | string | No | Url to for custom icon of market |
#Example
javascript
{
id: oneXtwo,
status: { isActive: true }
name: '1x2',
outcomes: [{ id: 1, status: { isActive: true }, name: 'Luton Town' }, ...]
srMarket: { id: '1' }
}#MarketCategory
Type: Object
| Property | 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
javascript
{
id: 1,
name: 'Top Markets',
cbCategoryItems: ['3way_market_UniqueId', 'doubleChance_market_UniqueId', ...]
}#MarketMapping
Type: Object
Market mapping is configuration object that combines multiple markets into one view.
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
id | string | number | Yes | Unique id for market mapping and market | |
status | Status | Yes | ||
name | string | Yes | Displayed market mapping name | |
marketList | array<string> | array<number> | Yes | Array of market ids to be combined in this view. | |
cbViewLayout | 'row' | 'tabs' | No | 'tabs' | Layout used to display markets listed in marketList |
srHideHeader | string | No | If set to true it will hide either column or row header depending on the layout | |
iconUrl | string | No | Url to for custom icon of market |
#OfferingResponse
Type: Object
| Property | Type | Required | Description |
|---|---|---|---|
markets | Market[] | Yes | |
matchName | string | No | 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 | No | |
teams.home | string | Yes | Home team name |
teams.away | string | Yes | Away team name |
marketCategories | MarketCategory[] | No | Required if you are not using sr ids. If provided it will also replace default settings for category. |
metaMarkets | MarketMapping[] | No | Market categories (metaMarkets) group markets together. |
#Example
javascript
{
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+"
}
},
...
]
}#Outcome
Type: Object
| Property | Type | Required | Description |
|---|---|---|---|
id | string | number | Yes | Outcome unique id |
status | Status | Yes | |
name | string | Yes | Outcome name |
cbColumn | string | No | If present we will sort the outcomes in the given column, srOutcomeId will be ignored |
srOutcomeId | string | No | Sportradar outcome id |
#Example
Outcome 'Other' will be placed in draw column:
javascript
{
id: 'cs_other',
status: { isActive: true }
name: 'Other',
cbColumn: 'Draw'
srOutcomeId: '324'
}#SRCalculationOutcome
Type: Object
| Property | Type | Description |
|---|---|---|
srOutcomeId | string | Sportradar outcome id |
status | Status |
#Callbacks
#calculate
| Parameter | Type | Description |
|---|---|---|
args | CalculateArgs | |
callback | calculateCallback |
#Example
javascript
function calculate(args, callback) {
// Args parameter has data needed to call CustomBet calculate api.
// Parse and convert calculate api response.
callback(undefined, dataObject]
});
};#calculateCallback
| Parameter | Type | Description |
|---|---|---|
error | CBError | string | undefined | Error object or UOF forwarded xml as string. |
data | CalculateResponse |
#getOffering
| Parameter | Type | Description |
|---|---|---|
args | MatchArgs | |
callback | getOfferingCallback |
#Example
javascript
function getOffering(args, callback) {
// Get and convert data
callback(undefined, dataObject]
});
};#getOfferingCallback
| Parameter | Type | Description |
|---|---|---|
error | CBError | string | undefined | Error object or UOF forwarded xml as string. |
data | OfferingResponse |
Last updated 13 days ago