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).

#Key Capabilities

#Placement Options

#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

#Main Configurable Features

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

Default

Expanded Categories

Compact Event Format

Table Event Format

#API Reference

#Basic 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

Demo: Open demo

#Widget Setup

#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.

// 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:

(function

#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+).

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

Filters Object

The filters object controls recommendation algorithms, time windows, sports, geographic regions, and league filtering.

Filters Example

Until a custom adapter is developed, use the mockData adapter for local testing:

Market

Outcome