Match Preview

Match Preview widget provides comprehensive pre-match information and statistics across multiple sports through an expandable/collapsible tabbed interface. The widget consolidates essential match context including team form, head-to-head records, lineups, league standings, season leaders, team statistics, and tournament brackets into a single organized component. It supports 16 different sports with sport-specific tab configurations and data presentations. The widget features an expandable interface that allows users to switch between collapsed (compact) and expanded (full-detail) modes, making it suitable for both space-constrained match pages and dedicated pre-match hubs.

Previous slideNext slide

See the Match Preview widget demo.

#Supported Content and Environment

#Required Parameters

• widget-name: match.preview
• matchId: Unique identifier for the match. See Getting Identifiers

#Main Configurable Features

Illustrations of main layout variants and tab configurations with relevant property values below.

Full View

Collapsed View

Custom Tab Order

• isCollapsed: false

Full-height immersive experience with complete tab details. Ideal for dedicated pre-match pages.

See Match Preview widget demo

#API Reference

#Tabs Identifiers

tabs property is an object with sport IDs as keys and arrays of strings (tab identifiers) as values.

{
  1: ['matchInfo', 'standings', 'leaders', 'lineups', 'cup', 'playoffs', 'teamStats'], // soccer
  2: ['matchInfo', 'standings', 'leaders', 'lineups'

For every sport you can:

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

#Example

To only display Match Info and Standings for soccer and Lineups and Match Info (different order) for basketball, the following configuration can be set:

tabs: {
  1: ['matchInfo', 'standings'], // soccer
  2: ['matchInfo', 'lineups'] // basketball
}

See Match Preview Custom Tabs 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 →

• JavaScript enabled
• XMLHttpRequest support for data fetching
• CSS3 support for styling and animations

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. Complex object properties must be passed as JSON-encoded strings.