Betting Entertainment Tools

Widgets Demo

Bet Slip Widget (with extended properties)

Parameters
Name Type Attributes Default Description
props object <required>
similarEventIds Array.<string> | Array.<number> <required>

Array of similar events IDs.
count number 3

Number of cards from 1 to 3.
maxRows number 3

Max number of cards rows from 1 to 3.
cardsLayout 'horizontal' | 'vertical' 'horizontal'

Set how events within a recommendation category are displayed.
cardVariant 'default' | 'compact' 'default'

Set the style of the event card.
filters object

Filters property is an object where you can set recommendation type, sports and time.
filters.sport object

Object with sport options.
filters.sport.sportNames boolean

Hides sport icon and shows only sport name.
filters.sport.available Array.<(string|number)>

Sportradar sports
filters.time object

Object with time options.
filters.time.available Array.<'live'>

Array of available time filters.
filters.time.active Array.<'live'>

Array of active time filters.
filters.country object

Object with country options.
filters.country.available Array.<(string|number)>

Array of available country filters.
filters.league object

Object with league options.
filters.league.available Array.<(string|number)>

Array of available league filters.
sportsMapping object

sportsMapping property is an object where you map your sport ids with Sportradar ones in case you are not already using Sportradar sport ids (available sports).

{
     "your_sport_id_football": "sportradar_sport_id_football",
     "your_sport_id_X": "sportradar_sport_id_Y",
     "your_sport_id_B": "sportradar_sport_id_A",
     ...
}
branding object

Customization options. Currently supports customization of sports icons. Valid structure is:

sports: {
    icons: { // custom icons for sports
        1: 'path_to_image_file', // `1` is sport id.
        2: 'path_to_image_file',
        5: 'path_to_image_file',
        20: 'path_to_image_file',
    }
}
onItemClick OnItemClick Widgets.BetRecommendation.Integration.OnItemClick

Set a callback to run when the event or outcome is clicked. For more information check OnItemClick.
debug boolean

When set to true, logs adapter schema errors.
silent boolean true

By setting it to true, widget error won't display. This will prevent end customer from having a bad user experience. For debugging purposes this property should be set to false.
Examples

#1

<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://widgets.sir.sportradar.com/sportradar/widgetloader","SIR", {
        language: 'en'
    });

    SIR('registerAdapter', '{ADAPTER_NAME}');

    SIR('addWidget', '#sr-widget', 'betRecommendation.similarBets', { similarEventIds: [123345] });
</script>
<div id="sr-widget"></div>

#2

<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://widgets.sir.sportradar.com/sportradar/widgetloader","SIR", {
        language: 'en'
    });

    SIR('registerAdapter', '{ADAPTER_NAME}');

    SIR('addWidget', '#sr-widget', 'betRecommendation.similarBets', {
         similarEventIds: ['sr:match:27971270'],
         count: 2,
         maxRows: 2,
         filters: {
             sport: {
                 hidden: false,
                 available: ['1', '2', '5', '20'], // Sportradar sport ids.
             },
         },
         branding: {
             sports: {
                 icons: { // custom icons for sports
                     1: 'path_to_image_file',
                     2: 'path_to_image_file',
                     5: 'path_to_image_file',
                     20: 'path_to_image_file'
                 }
             }
         },
         onItemClick: function(target, data) {
             console.log(target, data);
         }
    });
</script>
<div id="sr-widget"></div>