Betting Entertainment Tools

Widgets Demo

Event List (with extended properties)

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

User ID.
numberOfEvents number 25

Number of events shown for each competition in the list. Possible values are:
- Min: 1
- Max: 50
numberOfExpandedCompetitions number | 'all' 3

The number of competition rows that are expanded. Use a numerical value for a specific number of expanded rows, or set it to all to expand all competitions.
- Min: 1
- Max: 3
similarEventIds Array.<string> | Array.<number>

Array of similar events IDs.
orderBy 'relevance' | '+begin' +begin

The order by which the events should be sorted. Possible values are:
- relevance: Events will be sorted by relevance.
- +begin: Events will be ordered by kickoff time (start time) in ascending order.
outcomeNamePosition 'start' | 'end' | 'top' | 'bottom' start

Positioning of outcome name.
streamIconPosition 'start' | 'end'

Positioning of stream icon.
streamIcon string

URL for custom stream icon.
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.available 'recommended' | 'popular' | 'trending'

Change display order by shuffling array values.
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 'live' | 'not_started'

Specifies the availability status of an event based on its start time. The value can be either live or not_started. If this option is not provided, it will not be used as a filter criteria.
filters.time.range number

Time offset in hours to which point in time events will be displayed.
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 function

Function/event handler. Emits event and outcome data on click or touch. Example:

onItemClick: function(target, data) {
     // do something with `target` and `data`
      console.log(target, data);
 }

Click on the card emits object with externalEvent property as an object.

Click on one of the outcomes emits object with following properties: externalEvent, externalMarket and externalOutcome (all properties are objects).
hideMarketNameRow boolean false

Hides the display of market name row in table.
enableCashbackIcon boolean

Enables the display of clickable cashback icon.
cashbackIcon string

URL for custom cashback icon.
collapseLayout boolean false

Collapses layout to two row view If no value is set, the default icon will be displayed, if enableCashbackIcon prop is set to true.
showMoreMarketsButton boolean false

Makes the button that displays the number of available markets for the event visible (navigates to the event page)
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.eventList');
</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.eventList', {
         numberOfEvents: 2,
         numberOfExpandedCompetitions: 'all',
         filters: {
             sport: {
                 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>