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.

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.

#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",

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

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

#JavaScript (Programmatic)

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

#HTML (Declarative)

Insert the following HTML code at the target widget location.

Configuration:

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

Configuration: