Skip to main content
Logo
Explore APIsContact Us
  • Home
  • Match Preview
  • Tournament Preview
  • Virtual Stadium
  1. Resources
  3. Widgets
  5. Markets

Markets

Widgets, Engagement Tools
LeaguesMy Combo
Last updated 15 days ago
Is this site helpful?
On this page
  • Key Capabilities
  • Placement Options
  • Settings and Customization
  • Styling Options
  • Requirements
  • Main Configurable Features
  • API Reference
  • Basic Properties
  • Theming
  • Custom Class Selectors
  • Integration
  • Widget Setup
  • onItemClick
  • Bet Slip Sync
  • Adapter Setup
  • Data Types
  • Widget Behavior
  • Tips

Markets widget is a front end visualization of a market list that is personalized and sorted in order of the most relevant markets. The widget sorts the markets based on their popularity and the punters betting history. It simplifies the process of finding the right betting opportunities from the myriad of possible choices and boosts betting volume for both 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

Smart Recommendations

Personalized AI-powered list of relevant markets tailored to individual punter preferences.

Live & Pre-match

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

Complex Markets

Advanced support for sophisticated layout configurations with more than three outcomes per market.

Responsive Design

Adaptive layout that automatically recalibrates for flawless desktop and mobile experiences.

Custom Integration

Interactive onItemClick callbacks for seamless bet slip and site-wide navigation handling.

Branding Control

Extensive customization and CSS styling options to perfectly match your platform's visual identity.

#Placement Options

Discovery Hub

Integrate on landing, sport, or tournament pages to surface high-relevance markets across matches.

Match Detail Integration

Embed directly on specific match pages to prioritize the most valuable markets for that event.

Global Visibility

Ideal for high-traffic entry points where users need immediate access to popular betting options.

Contextual Awareness

Dynamically adapts between multi-event summaries and deep-dive single event market focuses.

#Settings and Customization

  • Events filter: all events, sports, tournaments, or match
  • Recommendation type: recommended, popular, or trending
  • Time range: all matches, set time range, live matches, or upcoming matches

#Styling Options

  • Elements: background colors, border radius, borders
  • Text: font styles and colors
  • Outcomes: outcome label placement

#Requirements

  • Access to the client API

  • Required endpoints: User IDs, Odds, Event info, Market and Outcome ID mapping (for custom layouts)

  • If IDs are not mapped, outcomes fall back to a single-column layout

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

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 Markets widget demo. Illustrations of main recommendation types and display modes with relevant property values below.

Single Event Markets

Multiple recommended markets from one match with outcomes and odds.

See Markets widget demo

#API Reference

#Basic Properties

PropertyTypeDefaultDescription
userstring|number0User identifier for personalized market recommendations.
countnumber3Number of markets to return (1-100).
eventIdstring|numberundefinedEvent identifier for single-event mode.
enableCollapseExpandbooleanfalse

Extended Properties
PropertyTypeDefaultDescription
filtersobjectRequiredConfiguration object for recommendation type, sports, time, and leagues. See below for detailed structure.

Filters Object

The filters object controls recommendation algorithm, time windows, sports, and leagues.

Filters Property Details
PropertyTypeDefaultDescription
recommendationType

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

#Custom Class Selectors

CSS classSupported CSS properties
srct-br-containerbackground-color, font-family, border-radius, border-style, border-width, border-color, padding
srct-br-headerbackground-color, color, border-radius, font-style, border-style, border-width, border-color, padding
srct-br-eventinfo__iconcolor
srct-br-scoreboard__teamsfont-size, color
srct-br-eventinfofont-size, color
srct-br-eventinfo__statusfont-size, color

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

#Widget Behavior

The widget reacts to market and outcome status changes as follows:

ConditionMarkets widget behavior
Market closed (market.status.isActive: false)Market is not displayed.
Single outcome closed (outcome.status.isActive: false)That outcome's selection is disabled.
All outcomes closedAll outcome selections are disabled.

#Tips

  • When enableCollapseExpand is enabled, the collapsed/expanded state is maintained during the user's session but resets on page reload.
  • JavaScript enabled
  • XMLHttpRequest support for data fetching
  • CSS3 support for styling and animations
Enables collapsible/expandable sections for markets and events.
outcomeNamePositionstring"start"Outcome label position: "start", "end", "top", "bottom", or "outside".
branding.sports.iconsobjectundefinedMap of Sportradar sport IDs to custom icon image paths. Overrides default sport icons. Example: { 1: 'path/to/soccer.svg', 2: 'path/to/basketball.svg' }.
onItemClickfunctionundefinedCallback for outcome or event clicks. See onItemClick reference.
silentbooleanfalseWhen true, suppresses widget error messages displayed to end users. Errors are still logged internally.
object
Required
Recommendation 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 recommendations. See Sports Reference.
timeobjectundefinedTime filter configuration for event scheduling.
time.rangenumber0Time offset in hours from current time (0-12). 0 shows immediate/current events only.
time.availablestringundefinedTime status filter. Options: "live" (only live/in-play events) or undefined (all events).
leagueobjectundefinedLeague/tournament filter configuration.
league.availablearray<string|number>undefinedArray of Sportradar tournament/league IDs to include in recommendations. When provided, only events from specified leagues generate market recommendations. See Getting Identifiers.

Filters Example

javascript
{
  recommendationType: {
    available: 'recommended'  // Personalized AI recommendations
  },
  sport: {
    available: [1, 2, 5]  // Soccer, Basketball, Tennis
  },
  time: {
    range: 3,           // Next 3 hours
    available: 'live'   // Only live events
  },
  league: {
    available: [
      'sr:tournament:17',   // Premier League
      'sr:tournament:132'   // NBA
    ]
  }
}
srct-br-eventinfo__time
font-size, color
srct-br-contentbackground-color, border-style, border-width, border-color, padding
srct-br-market__namefont-size, color, background-color, border-radius, border-style, border-width, border-color, padding
srct-br-outcomesbackground-color, border-radius, border-style, border-width, border-color, padding
srct-br-outcomebackground-color, color, border-radius, border-style, border-width, border-color, padding
srct-br-outcome__namefont-size, color
srct-br-outcome__valuefont-size, color

Basic multi-event popular markets for anonymous users.

JavaScript

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

HTML (data attributes)

html
<div
  class="sr-widget"
  data-sr-widget="betRecommendation.markets"
  data-count="5"
  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.
info

If your adapter only provides market-level closure data, only market-closure behavior applies. If it also provides outcome-level data, outcome-specific behavior is triggered as well.