Skip to main content
Logo
Explore APIsContact Us
  • Home
  • BET 3-in-1
  • Match Preview
  • Tournament Preview
  • Virtual Stadium
  • StatsHub
  1. Resources
  3. Engagement Tools
  5. Leagues

Leagues

Widgets, Engagement Tools, BET
HighlightsMarkets
Last updated about 8 hours ago
Is this site helpful?
On this page
  • Key Capabilities
  • Placement Options
  • Settings and Customization
  • Styling Options
  • Requirements
  • Supported Content and Environment
  • Main Configurable Features
  • API Reference
  • Basic Properties
  • Theming
  • Custom Class Selectors
  • Integration
  • Widget Setup
  • onItemClick
  • Bet Slip Sync
  • Adapter Setup
  • Data Types
  • Tips

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

AI Personalization

Tailors league recommendations to individual punter preferences and betting history.

Live & Pre-match

Supports both real-time in-play markets and upcoming tournament scheduling.

Easy Integration

Seamlessly connects to client APIs and Sportradar data with minimal configuration.

Responsive Design

Fully optimized for flawless display across desktop, tablet, and mobile devices.

Custom Styling

Extensive CSS selectors for matching the widget to your brand's unique visual identity.

#Placement Options

Navigation Hub

Use as a horizontal scrollable list of top competitions for quick site-wide navigation.

Seamless Redirection

Clicking a league tab automatically directs users to the relevant competition subpage.

Modal Integration

Works perfectly within modals or sidebars to provide context-sensitive league choices.

Mobile First

Optimized touch gestures for mobile swiping and click-friendly desktop layouts.

#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

Environment Requirements

Supported Browsers

BrowserVersionMobile Support
Chrome60+✅ Chrome Mobile 60+
Firefox55+✅ Firefox Mobile 55+
Safari12+✅ iOS Safari 12+
Edge79+✅ Edge Mobile 79+
Internet ExplorerAll versions❌ Not Supported

Technical Requirements:

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

See the Leagues widget demo.

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

Sport Icons

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

See Leagues widget demo

#API Reference

#Basic Properties

PropertyTypeDefaultDescription
userstring|number0User identifier for personalized league recommendations.
activeTournamentIdstring|numberundefinedTournament identifier for pre-selected active tab.
countnumber5Number of league tabs to display (1-30).
labelTypestring"hidden"

Extended Properties
PropertyTypeDefaultDescription
filtersobjectRequiredConfiguration object for recommendation type, sports, and time filtering. See below for detailed structure.
debugbooleanfalseEnables debug mode with console logging for development. When true, logs recommendation generation, API calls, league selection logic, tracking events. Use for troubleshooting integration issues and understanding recommendation process.

Filters Object

The filters object controls recommendation algorithm, time windows, and sport filtering.

Filters Property Details

#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

CSS classSupported CSS properties
srct-br-league__itemcolor, font-size, font-weight
srct-br-league__titlecolor, font-size, font-weight
srct-br-league__labelcolor, font-size, font-weight

#Integration

warning

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

Bet Recommendation technical guide

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.

target valueTriggerKey data properties
"externalOutcome"User clicks a single outcome buttonexternalEvent, externalMarket, externalOutcome
"externalOutcomes"User clicks multiple outcomes at once (e.g. combo card)Array of { externalEvent, externalMarket, externalOutcome }
"externalEvent"User clicks an event header/cardexternalEvent
"externalCompetition"User clicks a competition/league name

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 methodPurpose
SIR('registerAdapter', ...)Configure the adapter that retrieves and displays data from your API.
SIR('addWidget', ...)Mount the widget on the page.
javascript
(function

#Data Types

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

Event

PropertyTypeRequiredDescription
idstring | numberYesSportradar event ID.
externalIdstring | number—Client-side event ID.
datestringYesFormatted date string displayed in the widget.

#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.
  • JavaScript enabled
  • XMLHttpRequest support for data fetching
  • CSS3 support for styling and animations
Label type: "sport", "country", or "hidden".
iconTypestring"sport"Icon type: "sport", "flag", or "hidden".
onItemClickfunctionundefinedCallback for league tab clicks.
PropertyTypeDefaultDescription
recommendationTypeobjectRequiredRecommendation algorithm configuration.

Recommendation Type Algorithm Options:

PropertyTypeDefaultDescription
availablestring"recommended"Required. recommendation algorithm to use. Options:
  • "recommended": Personalized AI recommendations based on user betting history (requires user parameter). Analyzes user's frequently bet items, favorite sports, typical bet timing, and engagement patterns.
  • "popular": Most popular items across all users. Shows items with highest betting volume and user engagement. Good for social proof and mainstream appeal.
  • "trending": Items with momentum and increasing activity. Captures items experiencing betting volume spikes, unusual activity, or time-sensitive popularity.
PropertyTypeDefaultDescription
sportobjectundefinedSport filter configuration.
sport.availablearray<string|number>[]Array of Sportradar sport IDs to include in league recommendations. Empty array or omitted shows leagues from all available sports. See Sports Reference.
timeobjectundefinedTime filter configuration for event scheduling within leagues.
time.rangenumber0Time offset in hours from current time (0-72). 0 shows matches with immediate/current events.
time.availablestringundefinedTime status filter for events within leagues. Options: "live" (only leagues with live/in-play events) or undefined (leagues with any events). When "live", widget shows only competitions currently hosting active matches.

Filters Example

javascript
{
  recommendationType: {
    available: 'recommended'  // Personalized AI recommendations
  },
  sport: {
    available: [1, 2]  // Soccer and Basketball only
  },
  time: {
    range: 6,           // Leagues with events in next 6 hours
    available: undefined  // Both live and upcoming events
  }
}

Basic popular leagues with sport icons for anonymous browsing.

JavaScript

javascript
SIR("addWidget", "#leagues-1", "betRecommendation.leagues", {
  count: 8,
  filters: {
    recommendationType: {
      available: "popular",
    },
  },
});

HTML (data attributes)

html
<div
  class="sr-widget"
  data-sr-widget="betRecommendation.leagues"
  data-count="8"
  data-filters='{"recommendationType": {"available": "popular"}}'
></div>
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" } },
});
(
callback
)
{
changeCallback = callback;
changeCallback && changeCallback(betSlipState); // push current state immediately
}
// 3. Handle outcome clicks from the widget
function onItemClick(target, data) {
if (target === "externalOutcome") {
const newBet = {
externalEventId: data.externalEvent.id,
externalMarketId: data.externalMarket.id,
externalOutcomeId: data.externalOutcome.id,
externalSpecifierId: data.externalMarket.specifier
? data.externalMarket.specifier.value
: undefined,
};
betSlipState = {
betslip: [...betSlipState.betslip, newBet],
combinedOddsValue: "14.52", // replace with your own calculation
};
changeCallback && changeCallback(betSlipState);
}
}
// 4. Register adapter with bet slip sync + add the widget
SIR("registerAdapter", "{ADAPTER_NAME}", { onBetSlipChanged });
SIR("addWidget", "#sr-widget", "betRecommendation.markets", { onItemClick });

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

javascript
SIR("registerAdapter", "mockData", { onBetSlipChanged });
(
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");
sport.idstring | numberYesSport ID. Use sportsMapping if not using Sportradar sport IDs.
sport.namestringYesSport name.
category.idstring | number—Category ID.
category.namestringYesCategory name (e.g. "England").
tournament.idstring | number—Tournament/league ID.
tournament.namestringYesTournament name.
teamsArray<{id, name}>YesHome and away competitors.
isLivebooleanYesWhether the event is currently live.
liveCurrentTimestringYesLive time display (e.g. "2nd set", "45'").
result1 / result2 / result3result—Score columns: { result: [homeScore, awayScore] }.

Market

PropertyTypeRequiredDescription
idstring | numberYesMarket ID.
namestring—Market name (e.g. "Match Winner").
status.isActiveboolean—When false, see Widget Behavior.

Outcome

PropertyTypeRequiredDescription
idstring | numberYesOutcome ID.
namestringYesOutcome name (e.g. "Home", "Draw").
oddsstring | numberYesOdds value. Use a number type to enable odds-change indicators (up/down arrows).
specifier.valuestring | number—Additional specifier (e.g. handicap value "-2.50").
status.isActiveboolean—When false, see Widget Behavior.