Head to Head Button

Head to Head Button widget displays a compact button that, when clicked, opens a popover containing comprehensive pre-match and live match statistics, head-to-head records, team form, and game momentum data. The widget provides an unobtrusive way to present rich statistical analysis without consuming permanent page space, making it ideal for match pages, live score tickers, or event listings where detailed statistics need to be available on demand. The popover features two distinct layouts: overlay layout where all statistics are displayed in a single- or two-column display (based on available width), and inline layout with fixed popover height and tabbed navigation.

Previous slideNext slide

See the Head To Head Button widget demo.

#Supported Content and Environment

#Required Parameters

Required identifiers:

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

#Main Configurable Features

The widget offers several display modes and content customization options.

See the Head To Head Button 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:

Button opens a floating popover overlay. Ideal for compact spaces where statistics should appear on-demand.

Configuration: