Leagues

Leagues widget is a front end visualization of a competitions list that is personalized and sorted in order of the most relevant tournaments. The list of tournaments is based on the tournament popularity and the punters betting history. This simplifies the process of finding the most relevant competition from the myriad of possible choices and boosts betting volume for both upcoming and live markets.

• 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
• Icons: sport or country icons
• Labels: sport or country labels
• Competitions: number of tournaments displayed (default 5)

#Styling Options

• List items: colors, sizes, icons
• Text: font styles and colors
• Icons: custom icons

#Requirements

• Access to the client API

• Required endpoints: User ID, Tournament info

• 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.leagues

#Supported Content and Environment

#Main Configurable Features

See the Leagues widget demo.

Illustrations of main visual modes and recommendation types with relevant property values below.

Sport Icons

Country Flags

League tabs with sport-specific icons for quick visual identification.

See Leagues widget demo

#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-br-leagues selector class. This ensures that the custom styles only apply to that widget and not to other elements on the page.

To customize tabs, please refer to the Tabs Component.

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

SIR Widgets supports two types of adapter implementations:

1. Self-Service Adapter
2. Hosted Adapter

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

#Data Types

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

Event

#Tips

• When two leagues share the same name (e.g. both called "Premier League"), the widget automatically adds country disambiguation labels even when labelType is set to "hidden".
• Avoid these redundant icon/label combinations: iconType: "sport" with labelType: "sport", and iconType: "flag" with labelType: "country".
• If activeTournamentId does not match any league in the current recommendations, no tab is highlighted — this is expected behavior, not an error.

Recommendation Type Algorithm Options:

Filters Example

For the full flow after a selection is emitted — trusting snapshot odds, re-pricing against your platform, validating availability, and accepting or rejecting the bet — see Handling Selections and Odds.

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

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

Market

Outcome