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:
sportId {number} and its corresponding componentsExample of simplified notation: components: ["headtohead", "form", "teamstats", "lastmatches"].
Manipulating this array enables you to:
Below is an example code with the removed form component and teamstats set as the first component (listed first in an array):
<!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: 620px;
width: 100%;
}
.sr-widget {
border: rgba(0,0,0,0.12) solid 1px;
margin-bottom: 24px;
}
</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>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:
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
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 hockeyBelow is an example code setting:
<!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: 620px;
width: 100%;
}
.sr-widget {
border: rgba(0,0,0,0.12) solid 1px;
margin-bottom: 24px;
}
</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>