Highlights

Highlights widget (Bet Recommendation) is a front-end widget that provides a personalized betting experience. It displays a list of events based on event popularity and the punters betting history via a user friendly interface. It simplifies the process of finding the right bet from the myriad of possible choices and boosts betting volume for upcoming and live events.

Punters past activity
General betting trends
Overall betting volume
Seasonal variations
New discovery and engagement patterns

Recommendation types

Recommended: Personalized list of recommendations based on punters betting history and preferences. Requires the user to be logged in.
Popular: List of the most popular items based on the total number of bets placed (no login required).
Trending: List of the currently trending items based on the number of recently placed bets (no login required).

info

Personalization requirement To enable personalized recommendations (the recommended type), you must provide a unique user identifier. When no user ID is provided, the widget will fall back to popular recommendations.

#Key Capabilities

Personal Touch

Smart AI-driven event recommendations tailored to each individual punter's unique betting history.

Live & Pre-match

Full support for real-time in-play event highlights and upcoming pre-match betting opportunities.

Discovery Engine

Simplifies the selection process by surfacing the most relevant bets from thousands of available options.

Volume Growth

Strategically designed to boost betting turnover for both upcoming matches and live events.

Painless Setup

Rapid client-side integration with minimal development resources required for a full deployment.

Flexible Styling

Complete creative freedom to customize colors, shapes, and typography to fit your brand identity.

#Placement Options

Homepage Grid

Engaging horizontal or vertical carousel of events that serves as the perfect entry point.

Sidebar Stacks

Optimized vertical layouts for sidebar placement, keeping users engaged across every page.

Full-Screen Focus

Expansive grid support for high-density, multi-row event showcases on desktop landing pages.

Mobile First

Native-feeling scrolling and swiping interactions built specifically for the mobile-betting generation.

#Settings and Customization

Recommendation type: recommended, popular, or trending
Time span: live, upcoming, or both (default)
Sport filter: single sport or multiple sports
Competition/country filter

#Styling Options

Elements (container, cards, buttons): colors and rounded corners
Text: font styles and colors
Recommendation selector: enable/disable or show only one recommendation type
Sports selector: enable/disable (all sports selected if disabled)
Events: number of rows (1-3, default 1)

#Requirements

Access to the client API
Required endpoints: User ID, Odds (WIP)
Requires an adapter to be registered via SIR('registerAdapter', '{ADAPTER_NAME}'). See the adapter overview: https://apidocs.sportradar.online/resources/widgets/docs/adapter/Overview
widget-name: betRecommendation

Environment Requirements

Technical Requirements:

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

Supported Sports

American Football NFL only (including NCAA)
Aussie Rules
Badminton
Bandy
Baseball & MLB
Basketball & NBA (including NCAA)
Beach soccer
Beach Volleyball
Cricket
Curling
Cycling
Darts
Field Hockey
Floorball
Futsal
Golf
Handball
Ice Hockey & NHL
Pesapallo
Rugby (League & Union)
Snooker
Soccer
Squash
Table Tennis
Tennis
Volleyball
Waterpolo
Winter sports

#Main Configurable Features

Illustrations of main layout variants and card types with relevant property values below. See the Highlights widget demo.

#API Reference

#Basic Properties

Extended Properties

#Theming

Theming customization allows to tailor the appearance of Bet Recommendation widgets to meet specific needs and preferences. In the context of the Bet Recommendation widget, customization refers to the ability to modify the default styling of the widget by applying custom CSS properties to the various HTML elements that make up the widget.

Widget comes with pre-existing styling but can be customized by applying custom CSS properties to its different HTML elements. The widget's custom class selectors and supported CSS properties are listed below.

All custom classes must be nested within the .sr-bb.sr-betRecommendation selector class. This ensures that the custom styles only apply to that widget and not to other elements on the page.

#Custom Class Selectors

#Integration

warning

Mandatory Configuration The filters property is required for this widget to function correctly. It defines the recommendation logic and basic data constraints.

Demo: Open demo

#onItemClick

The onItemClick callback is fired whenever the user interacts with the widget. The first argument is a target string that identifies the interaction type; the second argument is a data object containing contextual information.

Note: Widgets support callbacks on outcome clicks — the onItemClick handler receives target === "outcome" and a data object containing externalEvent, externalMarket and externalOutcome. Use this for custom outcome callbacks (e.g., add-to-betslip, analytics, modals).

The widget also exposes onTrack for event tracking analytics. See the tracking guide for details.

#Bet Slip Sync

To keep the widget's selected-outcome state in sync with your own bet slip (i.e. show outcomes as selected when they were added outside the widget), use registerOnBetSlipChange inside registerAdapter.

javascript

// 1. Track your bet slip state
let changeCallback;
let betSlipState = { betslip: [], combinedOddsValue: undefined };

// 2. Notify the widget whenever the bet slip changes
function onBetSlipChanged

#Adapter Setup

An adapter is a software component developed by the Sportradar engineering team that bridges the Bet Recommendation widgets and your platform's API. It retrieves data from your API and feeds it to the widget, ensuring seamless communication between the two systems.

Before adapter development begins, confirm and align your API contract with the Sportradar engineering team. Integration requires two SIR calls:

SIR method	Purpose
`SIR('registerAdapter', ...)`	Configure the adapter that retrieves and displays data from your API.
`SIR('addWidget', ...)`	Mount the widget on the page.

javascript

#Data Types

The following data types are provided by the adapter and are also available in the onItemClick callback payload.

Event

#Tips

With cardsLayout: "horizontal", visible cards = cards per row × maxRows. Cards per row varies by container width: 1 (< 400px), 2 (400–660px), 3 (660–970px), 4 (970px+).

Property	Type	Default	Description
`user`	`string\|number`	`0`	User identifier for personalized recommendations.
`count`	`number`	`24`	Number of event cards to display (1-48).
`cardsLayout`	`string`	`"horizontal"`	Layout direction: `"horizontal"` (grid) or `"vertical"` (single column).
`categoryLayout`	`string`	`"tabs"`	Display mode: `"tabs"` (one category at a time) or `"expanded"` (all categories).
`cardVariant`	`string`	`"default"`	Card style: `"default"`, `"compact"`, or `"table"`.
`outcomeNamePosition`	`string`	`"start"`	Position of outcome label: `"start"`, `"end"`, `"top"`, or `"bottom"`.
`onItemClick`	`function`	`undefined`	Callback for user clicks on events or outcomes.

Property	Type	Default	Description
`filters`	`object`	Required	Configuration for all filter types including recommendation type, sports, time, country, and leagues. See below for detailed structure.
`maxRows`	`number`	`1`	Maximum number of card rows to display. Determines vertical height of widget. Combined with responsive cards-per-row calculation, this controls total visible cards. Example: 3 rows × 4 cards/row = 12 visible cards. Range: 1-3 rows.
`sportsMapping`	`object`	`undefined`	Maps client's sport identifiers to Sportradar sport IDs. Object with keys as client sport IDs (string/number) and values as Sportradar sport IDs. Example: `{101: 1, 102: 2}` maps client sport 101 to soccer, 102 to basketball. Allows using client's sport taxonomy in filter configurations.
`similarEventIds`	`array<number>`	`undefined`	Array of event IDs for "similar" recommendation type. Required when `filters.recommendationType.available` includes `"similar"` and `active: "similar"`. AI finds events similar to specified reference events based on sport, league, teams, odds patterns, and market characteristics. Example: `[12345, 67890]` finds events similar to these two matches.
`debug`	`boolean`	`false`	Enables debug mode with console logging for development. When `true`, logs recommendation generation, API calls, event filtering, card rendering, interaction tracking, errors with stack traces. Use for troubleshooting integration issues and understanding recommendation logic.
`styling`	`object`	`undefined`	Custom styling configuration for layout adjustments.
`styling.disablePaddingTop`	`boolean`	`false`	Removes top padding from widget container. Use when widget follows other content without spacing gap.
`styling.disablePaddingBottom`	`boolean`	`false`	Removes bottom padding from widget container. Use when widget precedes other content without spacing gap.

Property	Type	Default	Description
`recommendationType`	`object`	Required	Recommendation algorithm configuration controlling which recommendation types display and initial active type.
`recommendationType.available`	`array<string>`	`["recommended", "popular", "trending", "similar"]`	Required. Array of recommendation types to enable. Order determines tab sequence (when `categoryLayout: "tabs"`) or section order (when `categoryLayout: "expanded"`). Options: `"recommended"`: AI-powered personalized recommendations based on user betting history (requires `user` parameter). Analyzes user's favorite sports, preferred odds ranges, typical bet types, bet timing, win rates, and engagement patterns. `"popular"`: Most popular events across all users. Shows events with highest betting volume, number of unique bettors, and consistent popularity. Social proof effect. `"trending"`: Events experiencing momentum and increasing popularity. Captures betting volume spikes, rapid odds changes, unusual activity patterns, social media buzz. Time-sensitive opportunities. `"similar"`: Events similar to specified reference events (requires `similarEventIds` parameter). AI finds comparable matches based on sport, league, teams, odds, market characteristics, timing.
`recommendationType.active`	`string`	First value from `available`	Initially active/selected recommendation type. Must be one value from `available` array. When `categoryLayout: "tabs"`, determines which tab displays first. When `categoryLayout: "expanded"`, determines initial scroll position/emphasis. Example: `"popular"` starts with popular recommendations visible.
`recommendationType.hidden`	`boolean`	`false`	Controls visibility of recommendation type selector. When `true`, hides category tabs/headers entirely (widget shows events from active type only, no switching UI). When `false`, shows navigation between recommendation types. Set `true` for single-type focused displays, clean minimal layouts.
`sport`	`object`	`undefined`	Sport filter configuration.
`sport.available`	`array<string\|number>`	`[]`	Array of Sportradar sport IDs to include in recommendations and sport filter. Empty array or omitted shows all available sports. Example: `[1, 2, 5]` for soccer, basketball, tennis only. When provided, widget shows sport filter UI with these options. See Sports Reference.
`sport.hidden`	`boolean`	`false`	Controls visibility of sport filter UI. When `true`, hides sport selector (events still filtered by `sport.available` if specified, but no user-facing filter controls). When `false`, shows sport filter icons/tabs for user selection. Set `true` for single-sport pages, clean minimal interfaces.
`sport.sportNames`	`boolean`	`false`	Display mode for sport filter. When `true`, shows sport names as text labels instead of sport icons. When `false`, shows sport-specific icons (⚽ soccer, 🏀 basketball, etc.). Set `true` for accessibility, text-heavy designs, or when icons unclear to users.
`time`	`object`	`undefined`	Time/status filter configuration for event scheduling.
`time.available`	`array<string>`	`["live", "not_started"]`	Array of available time filter options. Options: `"live"` (only live/in-play events), `"not_started"` (only upcoming/pre-match events). Example: `["live"]` shows live-only filter, `["not_started"]` shows upcoming-only, `["live", "not_started"]` shows both with toggle.
`time.active`	`array<string>`	All values from `available`	Initially active time filters. Can select multiple values from `available` array for combined filtering. Example: `["live"]` starts showing live events only, `["live", "not_started"]` shows both (no time filtering), `[]` shows nothing (edge case - avoid).
`time.hidden`	`boolean`	`false`	Controls visibility of time filter UI. When `true`, hides time selector (events still filtered by `time.active`, but no user controls). When `false`, shows time filter toggle/buttons. Set `true` for fixed time scope pages (e.g., "Live Betting Hub" always shows live).
`country`	`object`	`undefined`	Country/region filter configuration.
`country.available`	`array<string\|number>`	`undefined`	Array of country identifiers to filter events geographically. Accepts Sportradar country IDs or ISO country codes (A2/A3). Example: `["US", "GB", "DE"]` shows only events from USA, UK, Germany. When provided, only events from specified countries appear. See Getting Identifiers.
`league`	`object`	`undefined`	League/tournament filter configuration.
`league.available`	`array<string\|number>`	`undefined`	Array of tournament/league identifiers to filter events by competition. Accepts Sportradar unique tournament IDs. Example: `["sr:tournament:17", "sr:tournament:34"]` shows only Premier League and Bundesliga events. Powerful for league-specific pages or premium competition focus. See Getting Identifiers.

javascript

{
  recommendationType: {
    available: ['recommended', 'popular', 'trending'],
    active: 'popular',
    hidden: false
  },
  sport: {
    available: [1, 2, 5],  // Soccer, Basketball, Tennis
    hidden: false,
    sportNames: false
  },
  time: {
    available: ['live', 'not_started'],
    active: ['live', 'not_started']  // Show both
  },
  country: {
    available: ['GB', 'DE', 'ES', 'IT']  // Top European countries
  },
  league: {
    available: [
      'sr:tournament:17',   // Premier League
      'sr:tournament:34',   // Bundesliga
      'sr:tournament:7'     // La Liga
    ]
  }
}

CSS class	Supported CSS properties
`srct-br-container`	`background-color`, `font-family`
`srct-br-header`	`background-color`, `color`
`srct-br-header__divider`	`border-color`
`srct-br-footer`	`color`
`srct-br-loading`	`background-color`, `border-radius`
`srct-br-navigation`	`background-color`, `color`
`srct-br-sportsfilter`	`background-color`, `color`
`srct-br-content`	`background-color`
`srct-br-content__title`	`color`
`srct-br-cardlist`	`background-color`, `border-radius`
`srct-br-card`	`background-color`, `color`, `border-radius`
`srct-br-card__divider`	`border-color`
`srct-br-outcome`	`background-color`, `color`, `border-radius`
`srct-br-outcome--selected`	`background-color`, `color`, `border-radius`
`srct-br-outcome--disabled`	`background-color`, `color`, `border-radius`
`srct-br-outcome__name`	`font-size`, `color`
`srct-br-outcome__value`	`font-size`, `color`
`srct-br-eventinfo`	`font-size`, `color`
`srct-br-eventinfo__info`	`font-size`
`srct-br-eventinfo__icon`	`color`
`srct-br-eventinfo__time`	`font-size`, `color`
`srct-br-eventinfo__status`	`font-size`, `color`
`srct-br-eventinfo__name`	`font-size`, `color`
`srct-br-scoreboard`	`font-size`, `color`
`srct-br-scoreboard__teams`	`font-size`, `color`
`srct-br-scoreboard__scores`	`font-size`, `color`
`srct-br-scoreboard__score-1`	`font-size`, `color`
`srct-br-scoreboard__score-2`	`font-size`, `color`
`srct-br-scoreboard__score-3`	`font-size`, `color`

Basic horizontal grid with popular and trending recommendations.

JavaScript

javascript

SIR("addWidget", "#highlights-1", "betRecommendation", {
  count: 24,
  maxRows: 3,
  filters: {
    recommendationType: {
      available: ["popular", "trending"],
    },
  },
});

HTML (data attributes)

html

<div
  class="sr-widget"
  data-sr-widget="betRecommendation"
  data-count="24"
  data-max-rows="3"
  data-filters='{"recommendationType": {"available": ["popular", "trending"]}}'
></div>

`target` value	Trigger	Key `data` properties
`"externalOutcome"`	User clicks a single outcome button	`externalEvent`, `externalMarket`, `externalOutcome`
`"externalOutcomes"`	User clicks multiple outcomes at once (e.g. combo card)	Array of `{ externalEvent, externalMarket, externalOutcome }`
`"externalEvent"`	User clicks an event header/card	`externalEvent`
`"externalCompetition"`	User clicks a competition/league name	`externalCompetition`
`"goToBetSlip"`	User clicks the "Go to Bet Slip" button (swipeBet only)	—
`"betSlipMode"`	Bet slip mode changes between single and multi (swipeBet only)	`value: "single" \| "multi"`

javascript

SIR("addWidget", "#sr-widget", "betRecommendation.markets", {
  onItemClick: function (target, data) {
    if (target === "externalOutcome") {
      // Add single outcome to bet slip
      const { externalEvent, externalMarket, externalOutcome } = data;
      betSlip.add({
        eventId: externalEvent.id,
        marketId: externalMarket.id,
        outcomeId: externalOutcome.id,
      });
    } else if (target === "externalEvent") {
      // Navigate to event/match detail page
      window.location.href = `/matches/${data.externalEvent.id}`;
    } else if (target === "externalCompetition") {
      // Navigate to competition/league page
      window.location.href = `/league/${data.externalCompetition.tournament.id}`;
    }
  },
  filters: { recommendationType: { available: "popular" } },
});

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

SIR("registerAdapter", "{ADAPTER_NAME}");
SIR("addWidget", "#sr-widget", "betRecommendation.markets");

Property	Type	Required	Description
`id`	`string \| number`	Yes	Sportradar event ID.
`externalId`	`string \| number`	—	Client-side event ID.
`date`	`string`	Yes	Formatted date string displayed in the widget.
`sport.id`	`string \| number`	Yes	Sport ID. Use `sportsMapping` if not using Sportradar sport IDs.
`sport.name`	`string`	Yes	Sport name.
`category.id`	`string \| number`	—	Category ID.
`category.name`	`string`	Yes	Category name (e.g. "England").
`tournament.id`	`string \| number`	—	Tournament/league ID.
`tournament.name`	`string`	Yes	Tournament name.
`teams`	`Array<{id, name}>`	Yes	Home and away competitors.
`isLive`	`boolean`	Yes	Whether the event is currently live.
`liveCurrentTime`	`string`	Yes	Live time display (e.g. `"2nd set"`, `"45'"`).
`result1` / `result2` / `result3`	`result`	—	Score columns: `{ result: [homeScore, awayScore] }`.

Property	Type	Required	Description
`id`	`string \| number`	Yes	Market ID.
`name`	`string`	—	Market name (e.g. `"Match Winner"`).
`status.isActive`	`boolean`	—	When `false`, see Widget Behavior.

Property	Type	Required	Description
`id`	`string \| number`	Yes	Outcome ID.
`name`	`string`	Yes	Outcome name (e.g. `"Home"`, `"Draw"`).
`odds`	`string \| number`	Yes	Odds value. Use a `number` type to enable odds-change indicators (up/down arrows).
`specifier.value`	`string \| number`	—	Additional specifier (e.g. handicap value `"-2.50"`).
`status.isActive`	`boolean`	—	When `false`, see Widget Behavior.

Highlights

#Key Capabilities

Personal Touch

Live & Pre-match

Discovery Engine

Volume Growth

Painless Setup

Flexible Styling

#Placement Options

Homepage Grid

Sidebar Stacks

Full-Screen Focus

Mobile First

#Settings and Customization

#Styling Options

#Requirements

Technical Requirements:

#Main Configurable Features

#API Reference

#Basic Properties

#Theming

#Custom Class Selectors

#Integration

#Widget Setup

#onItemClick

#Bet Slip Sync

#Adapter Setup

#Data Types

#Tips

Filters Object

Filters Example

Highlights

Highlights

#Key Capabilities

Personal Touch

Live & Pre-match

Discovery Engine

Volume Growth

Painless Setup

Flexible Styling

#Placement Options

Homepage Grid

Sidebar Stacks

Full-Screen Focus

Mobile First

#Settings and Customization

#Styling Options

#Requirements

Technical Requirements:

#Main Configurable Features

#API Reference

#Basic Properties

Expanded Table

Expanded Table

#Theming

#Custom Class Selectors

Expanded Table

#Integration

#Widget Setup

#onItemClick

Expanded Table

#Bet Slip Sync

#Adapter Setup

Expanded Table

#Data Types

Expanded Table

#Tips

Filters Object

Expanded Table

Filters Example

Expanded Table

Expanded Table