Skip to main content Open Assistant Open Assistant Head to Head Custom Components Order | Engagement Tools | API Hub
Engagement Tools Head to Head Custom Components Order Widgets, Engagement Tools, BET
Last updated 3 months ago
Is this site helpful? Head To Head has an option to change the default order of its components (tabs when using layout: inline option) by passing components property to SIR function. This option also controls which components are enabled.
components property supports two notations:
simplified notation: array of strings representing available components
full object notation: key-value mapping between sportId {number} and its corresponding components
# Simplified Notation
Example of simplified notation: components: ["headtohead", "form", "teamstats", "lastmatches"].
Manipulating this array enables you to:
re-order components by changing the order of strings in the array,
disable components by removing specific strings from the array.
# Example
Below is an example code with the removed form component and teamstats set as the first component (listed first in an array):
html
<!DOCTYPE HTML >
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" />
< title >
Head To Head Components Re-order
</ title >
< style >
body {
display : flex ;
justify-content : center ;
}
. sr-widgets {
max-width : 620 px ;
width : 100% ;
}
# Full Object Notation
Using full object notation, the value for each sport is basically a simplified notation mapped to a specific sport.
This notation enables per-sport components configuration for Head To Head when the match can be dynamically changed.
Each sport has its own set of available components. Here is a list of all possible values:
plaintext
default: ["headtohead", "form", "teamstats", "lastmatches"],
1: ["gamePulse", "headtohead", "form", "teamstats", "teamstatsmatch", "lastmatches"], // soccer
2: ["headtohead", "form", "teamstats", "lastmatches"], // basket
3: ["headtohead", "form", "teamstats", "lastmatches"], // baseball
4: ["headtohead", "form", "teamstats", "lastmatches"], // ice hockey
5: ["headtohead", "form", "teamstats", "lastmatches"], // tennis
6: ["headtohead", "form", "teamstats", "lastmatches"], // handball
12: ["headtohead", "form", "lastmatches"], // rugby
# Example
Below is an example code setting:
default components order (switched "teamstats" and "form") config,
overriding config for soccer (adding "gamepulse" because it's not present in "default") and
overriding config for basketball (setting "lastmatches" as the first component)
html
<!DOCTYPE HTML >
< html >
< head >
< meta http-equiv = "Content-Type" content =
. sr-widget {
border : rgba ( 0 , 0 , 0 , 0.12 ) solid 1 px ;
margin-bottom : 24 px ;
}
< / style >
</ head >
< body >
< 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" , {
theme : "betradar" , // using custom theme
language : "en"
} ) ;
SIR ( "addWidget" , ".sr-widget-1" , "headToHead.standalone" , {
layout : "inline" ,
matchId : match_id_here ,
components : [ "teamstats" , "headtohead" , "lastmatches" ]
} ) ;
< / script >
< div class = "sr-widgets" >
< div class = "sr-widget sr-widget-1" ></ div >
</ div >
</ body >
</ html >
13: ["headtohead", "form", "teamstats", "lastmatches"], // aussie rules
16: ["headtohead", "form", "lastmatches"], // american football
19: ["headtohead", "teamstats", "lastmatches"], // snooker
20: ["headtohead", "lastmatches"], // table tennis
21: ["headtohead", "form", "teamstats", "lastmatches"], // cricket
22: ["headtohead", "form", "teamstats", "lastmatches"], // darts
23: ["headtohead", "form", "lastmatches"], // volleyball
26: ["headtohead", "form", "teamstats", "lastmatches"], // waterpolo
29: ["headtohead", "form", "teamstats", "lastmatches"], // futsal
31: ["headtohead", "lastmatches"], // badminton
34: ["headtohead", "form", "lastmatches"], // beach volleyball
37: ["headtohead", "lastmatches"], // squash
60: ["headtohead", "form", "lastmatches"], // beach soccer
61: ["headtohead", "form", "teamstats", "lastmatches"], // pesapallo
137: ["headtohead", "form", "teamstats", "lastmatches"], // esport: E-soccer
153: ["headtohead", "lastmatches"], // esport: E-basketball
195: ["headtohead", "lastmatches"], // esport: E-ice hockey
"text/html; charset=UTF-8"
/>
< title >
Head To Head Components Re-order
</ title >
< style >
body {
display : flex ;
justify-content : center ;
}
. sr-widgets {
max-width : 620 px ;
width : 100% ;
}
. sr-widget {
border : rgba ( 0 , 0 , 0 , 0.12 ) solid 1 px ;
margin-bottom : 24 px ;
}
< / style >
</ head >
< body >
< 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" , {
theme : "betradar" , // using custom theme
language : "en"
} ) ;
SIR ( "addWidget" , ".sr-widget-1" , "headToHead.standalone" , {
layout : "inline" ,
matchId : match_id_here ,
components : {
default : [ "headtohead" , "teamstats" , "form" , "lastmatches" ] , // default - reorder "teamsstats" and "form"
1 : [ "gamepulse" , "headtohead" , "form" , "teamstats" , "lastmatches" ] , // soccer - add "gamepulse"
2 : [ "lastmatches" , "headtohead" , "teamstats" , "form" ] // basketball - move "lastmatches" to first place
}
} ) ;
< / script >
< div class = "sr-widgets" >
< div class = "sr-widget sr-widget-1" ></ div >
</ div >
</ body >
</ html >