Head to Head Standalone

Head To Head Standalone widget displays comprehensive pre-match and live match statistics in a full-featured, always-visible format without requiring button interaction. Optional inline display mode presents statistical data within tabs to use less space. The widget presents detailed statistical analysis including game pulse momentum, head-to-head records, team form, season statistics, and recent matches in a responsive layout that adapts from single-column to two-column display based on available width. Designed for dedicated statistics pages, match detail sections, or sidebar placements where continuous access to match analytics enhances user engagement, the standalone widget provides the same rich data visualization as the button variant but in a persistent, immediately accessible format.

Previous slideNext slide

See the Head To Head Standalone widget demo.

#Supported Content and Environment

#Required Parameters

Required identifiers:

• widget-name: headToHead.standalone
• matchId: The Sportradar match identifier. See Getting Identifiers

#Main Configurable Features

The standalone widget provides flexible display modes and content customization.

Overlay Layout

Inline Layout

Custom Components Order

Configuration:

javascript

{
    layout: "overlay"  // Default, two-column when width > 580px
}

Optimal for wider containers. Displays statistics in two-column layout when sufficient width is available (580px+), automatically switching to single-column on narrower displays.

See the Head To Head Standalone demo for live examples.

#API Reference

#Game Pulse Icons

Head to Head is available with three icons sets by default.

Game Pulse Icon Version 1 (Default)

Game Pulse Icon Version 2

Game Pulse Icon Version 3

Custom Game Pulse Icon set

Configuration:

javascript

{
    gamePulseIconVersion: 1
}

#Components Identifiers

components property is an object with sport IDs as keys and arrays of strings (tab identifiers) as 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 hockey
}

For every sport you can:

• re-order components/tabs by changing order of strings in array,
• disable components/tabs by removing specific strings from array

#Examples

components: ['headtohead', 'form', 'teamstats', 'lastmatches']

See Head to Head Custom Components Order Guide for detailed examples.

#Integration Examples

#Property Name Transformations

Properties do not always transfer from the above table directly into integration code. Properties must be transformed differently for each integration method:

JavaScript/Programmatic Integration

• Property names remain unchanged in camelCase
• Properties become members of the 4th parameter object in SIR() call
• Example: cardVariant: "compact"

HTML/Declarative Integration

• Convert camelCase to lowercase with dashes, e.g. cardVariant becomes card-variant
• Add data-sr- prefix
• Example: cardVariant → data-sr-card-variant
• Example: filters.sport.hidden → Complex objects must be passed as JSON strings

#JavaScript (Programmatic)

Initialize the widget programmatically using the JavaScript API. The widget renders in the specified container element.

(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'
});

// Use PREMATCH match ID
SIR('addWidget', '#sr-widget', 'headToHead.standalone', {
    matchId: 61591316,
    layout: 'overlay'
});

<div id="sr-widget"></div>

#HTML (Declarative)

Insert the following HTML code at the target widget location.

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