Betting Entertainment Tools

Widgets Demo

Highlights Widget (with extended properties)

Parameters
Name Type Attributes Default Description
props object
user string | number

User ID.
count number 24|5

The number of cards to display. Must be a number between 1 and 48. If cardVariant is set to table, the default value is 5. Otherwise, the default value is 24.
maxRows number 1

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

Set how events within a recommendation category are displayed.
categoryLayout 'tabs' | 'expanded' 'tabs'

Set how the recommendation categories are displayed.
cardVariant 'default' | 'compact' | 'table' 'default'

Set the style of the event card.
outcomeNamePosition 'start' | 'end' | 'top' | 'bottom' 'start'

Positioning of outcome name.
filters object

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

Object with recommendationType options.
filters.recommendationType.hidden boolean

If true, hide recommendation types.
filters.recommendationType.available Array.<('recommended'|'popular'|'trending')>

Change display order by shuffling array values.
filters.recommendationType.active 'recommended' | 'popular' | 'trending'

Active recommendation type.
filters.sport object

Object with sport options.
filters.sport.sportNames boolean

Hides sport icon and shows only sport name.
filters.sport.hidden boolean

If true, hide sport filters.
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'|'not_started')>

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.
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');
</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', {
         count: 10,
         maxRows: 2,
         filters: {
             recommendationType: {
                 hidden: false,
                 available: ['popular', 'recommended', 'trending'],
                 active: 'trending' // one value from `available`.
             },
             sport: {
                 hidden: false,
                 available: ['1', '2', '5', '20'], // Sportradar sport ids.
                 active: ['2'] // one value from `available`.
             },
         },
         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>