Betting Entertainment Tools

Widgets Demo

Swipe Bet Widget

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

The id of the user.
buttonTitle string 'Swipe Bet'

Displayed text in the button.
productTitle string 'SWIPE BET'

The name in the header. If set value to false, no title will be displayed.
headerIcon string

URL to a custom icon.
buttonIcon string | false

URL for custom icon. If set value to false, no icon will be displayed. If no value is set, the default swipe icon will be displayed.
maxSelectionsMultiMode number 12

The number of maximum selections for multi mode in Bet Slip.
maxSelectionsSingleMode number 12

The number of maximum selections for single mode in Bet Slip.
isMobile boolean false

Mobile view of the widget.
betSlipMode Array.<('multi'|'single')> Array<'multi'>

Bet mode selector.
outcomeNamePosition 'start' | 'end' | 'top' | 'bottom' 'start'

Positioning of outcome name.
filters.sport.available Array.<(string|number)>

Sportradar sports
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.
customLoaderImg string

The URL or path to a custom loader image. This image will be displayed while the widget is loading. If not provided, a default loader image will be used.
customLoaderMs number 250

The duration in milliseconds for which the loader is displayed. This allows you to control how long the loader is shown before the widget content is displayed.
props.onItemClick OnItemClick Widgets.BetRecommendation.Integration.OnItemClick

Set a callback function to be executed upon specific actions within the widget.

Available targets:

  • externalOutcome
  • betSlipMode
  • goToBetSlip

For more details, refer to OnItemClick.
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.swipeBet');
</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.swipeBet', {
         buttonTitle: 'Bet now',
         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>