Betting Entertainment Tools

Widgets Demo

Button

A headToHead.standalone brings match head to head statistics and betting suggestions. Widget contents are available in a popover.

For the widget to render you need to provide matchId.

Parameters
Name Type Attributes Default Description
props object <required>
matchId number <required>

Match ID
position string <required>
 "right"

Initial popover position (right, left, bottom). Popover will appear on the right by default (or left for RTL languages)
layout string <required>
 "grid"

Head to head layout to be used. Possible values are grid and inline. Defaults to grid.
width number <required>

Popover width
label string <required>

Button label
icon string <required>

URL to a button icon image
disableScoreboard boolean false

Enables/disables scoreboard. Defaults to false.
disableScoreboardTeamColors boolean false

Enables/disables scoreboard team colors for NFL, MLB, NHL and NBA. Defaults to false.
statisticsEnableSeasonStats boolean true

Enables/disables season stats Statistics. Defaults to true.
statisticsEnableMatchStats boolean

Enables/disables match stats Statistics. Pre-match will display season stats.
gamePulseBtnEnable boolean false

Enables/disables dynamic game pulse icon.
gamePulseBtnVersion number 1

Changes the version of the gamePulseButton. Possible values are 1, 2 or 3.
gamePulseBtnTooltip boolean false

If set to true, hover over button icon will display tooltip with Game Pulse widget.
s5ClientAlias string

Statistics client alias override.
enableShowMore boolean

Enable "more" link button with S5 statistics link.
gamePulseIconSet Object

Used to set custom match pulse icons. Value for each icon should contain URL pointing to the desired icon.

All 5 icons have to be provided using the following pattern:

iconSet: {
    veryLow: 'URL_to_your_image_file',
    low: 'URL_to_your_image_file',
    medium: 'URL_to_your_image_file',
    high: 'URL_to_your_image_file',
    veryHigh: 'URL_to_your_image_file'
};
components array

Definition for components that are displayed. See this Guide for valid values and structure.
branding object

Branding options and widget customization. More info in this Guide.
Examples

HTML/Declarative

<div id="sr-widget" data-sr-widget="headToHead.button" data-sr-match-id="21514521"></div>
<script type="application/javascript" src="https://widgets.sir.sportradar.com/sportradar/widgetloader" async></script>

JS/Programmatic

 <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('addWidget', '#sr-widget', 'headToHead.button', {matchId: 21514521});
</script>
<div id="sr-widget"></div>