Head to Head Custom Components Order | Engagement Tools

Head to Head Custom Components Order | Engagement Tools | API Hub

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: 620px;
                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=