Event List widget (Listing widget) is a frontend visualization that displays a personalized event list sorted by the most relevant tournaments. The widget shows tournaments and events based on popularity and punters' betting history. It simplifies finding the right events among many options 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.
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-eventlist selector class. This ensures that the custom styles only apply to that widget and not to other elements on the page.
Mandatory Configuration
The filters property is required for this widget to function correctly. It defines the recommendation logic and basic data constraints.
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.
Expanded Table
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.
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 statelet changeCallback;let betSlipState = { betslip: [], combinedOddsValue: undefined };// 2. Notify the widget whenever the bet slip changesfunction onBetSlipChanged
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:
Expanded Table
SIR method
Purpose
SIR('registerAdapter', ...)
Configure the adapter that retrieves and displays data from your API.
Enabling H2H data (headToHeadEnable: true) increases each card's height by approximately 50–90px. H2H data is not useful on live events.
The "recommended" type requires a user with sufficient betting history; without it, the widget may fall back to popular recommendations.
Property
Type
Default
Description
user
string|number
0
User identifier for personalized recommendations. When provided with filters.recommendationType.available: "recommended", the AI generates personalized suggestions. When 0 or omitted, the widget shows general recommendations.
outcomeNamePosition
string
"start"
Position of outcome label relative to odds button. Options: "start", "end", "top", "bottom". Affects market outcome visual layout.
onItemClick
function
undefined
Callback function triggered when user clicks events or outcomes. Receives target (interaction type) and data (selection details). Target types: "event" (navigation), "outcome" (bet slip). Use for bet slip integration and analytics tracking.
hideMarketNameRow
boolean
false
Hides market name labels in event cards. When true, removes market name text rows (e.g., "Match Result"), showing only outcomes and odds. Reduces card height for compact layouts.
collapseLayout
boolean
false
Forces mobile/collapsed layout on small breakpoints. When true, applies vertical stacked layout optimized for narrow containers even on tablet/desktop widths. Useful for sidebar placements.
showMoreMarketsButton
boolean
false
Displays "More Markets" button on each event card. When true, shows button linking to full event page with complete market list. Enables discovery of additional betting options.
Property
Type
Default
Description
filters
object
Required
Configuration for recommendation type, sports, and time filtering. See below for detailed structure.
numberOfEvents
number
25
Maximum number of events to display per tournament/league. Controls density of events shown in each expanded competition section. Range: 1-50 events. Higher values show more events per tournament but increase vertical scroll. Lower values focus on top events.
numberOfExpandedCompetitions
number|string
3
Number of tournaments/leagues to display in expanded state on initial load. Options:
1, 2, 3: Specific number of expanded tournaments (most relevant first). User can manually expand/collapse others.
"all": All tournaments expanded simultaneously. Shows complete view without interaction. Best for comprehensive overviews.
Affects initial vertical height and user browsing pattern.
orderBy
string
"+begin"
Sorting order for events within each tournament section. Options:
"+begin": Chronological order (earliest events first). Best for scheduled betting, pre-match focus, time-sensitive planning.
"relevance": AI-determined relevance order based on recommendation scores, popularity, user preferences. Best for discovery, high-value events first, personalized experiences.
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: "similar". AI finds events similar to specified reference events based on sport, league, teams, odds patterns, timing. Example: [12345, 67890] finds events similar to these matches. Useful for "Related Events" sections on match detail pages.
headToHeadEnable
boolean
false
Enables embedded head-to-head comparison widget within each event card. When true, displays H2H button/section showing team statistics, recent form, past meetings. Adds informational depth but increases card height. Best for pre-match betting where historical context valuable.
headToHeadLabel
string
"H2H"
Custom label text for head-to-head button. Only applies when headToHeadEnable: true. Localize this label for different languages (e.g., "Form", "Stats", "History").
headToHeadGamePulseBtnEnable
boolean
false
Shows Game Pulse button within head-to-head section. Only applies when headToHeadEnable: true. Game Pulse provides live match momentum indicators and advanced statistics.
headToHeadGamePulseBtnTooltip
boolean
false
Enables tooltip for Game Pulse button explaining feature. Only applies when both headToHeadEnable: true and headToHeadGamePulseBtnEnable: true.
headToHeadShowGamePulse
boolean
false
Automatically displays Game Pulse content without button click. Only applies when headToHeadEnable: true. Shows momentum data inline for immediate access.
enableCashbackIcon
boolean
false
Displays cashback indicator icon on eligible events. When true, shows icon/badge on events where operator offers cashback promotions. Requires backend configuration of cashback-eligible events. Enhances promotional visibility.
cashbackIcon
string
undefined
Custom URL/path for cashback icon image. Only applies when enableCashbackIcon: true. Use to match operator's cashback branding. Example: "/assets/cashback-badge.svg". Falls back to default icon if omitted.
streamIcon
string
undefined
Custom URL/path for live stream icon image. Displays on events with available live streaming. Use to match operator's streaming branding. Example: "/assets/stream-icon.svg". Falls back to default icon if omitted.
streamIconPosition
string
undefined
Position of stream icon within event card. Options: "start" (left side near teams), "end" (right side near odds). Affects visual hierarchy and space allocation.
debug
boolean
false
Enables debug mode with console logging for development. When true, logs recommendation generation, API calls, event filtering, league grouping, expand/collapse actions, errors with stack traces. Use for troubleshooting integration issues and understanding recommendation logic.
Filters Object
The filters object controls recommendation algorithms, time windows, and sport filtering.
Expanded Table
Property
Type
Default
Description
recommendationType
object
Required
Recommendation algorithm configuration.
recommendationType.available
string
"recommended"
Required. Recommendation type to use. Options:
"recommended": AI-powered personalized recommendations based on user betting history (requires user parameter). Analyzes user's favorite sports, preferred leagues/teams, typical odds ranges, bet timing patterns, market type preferences, win rates by competition.
"popular": Most popular events across all users. Shows events with highest betting volume, number of unique bettors, consistent popularity. Social proof effect, safe recommendations.
"trending": Events experiencing momentum and increasing popularity. Captures betting volume spikes, rapid odds changes, unusual activity patterns, social media buzz. Time-sensitive opportunities, ideal for live betting.
"similar": Events similar to specified reference events (requires similarEventIds parameter). AI finds comparable matches based on sport, league, teams, odds, timing.
Unlike Highlights widget, Event List shows single recommendation type (no tabs or multiple types).
sport
object
undefined
Sport filter configuration.
sport.available
array<string|number>
[]
Array of Sportradar sport IDs to include. Empty array or omitted shows all available sports. Example: [1, 2, 5] for soccer, basketball, tennis only. Filters both tournaments and events by specified sports. See Sports Reference.
sport.sportNames
boolean
false
Display mode for sport indicators in tournament headers. When true, shows sport names as text labels. When false, shows sport-specific icons (⚽ soccer, 🏀 basketball, etc.). Set true for accessibility or when icons are unclear.
time
object
undefined
Time/status filter configuration for event scheduling.
time.range
number
0
Time window in hours for upcoming events. Defines maximum hours ahead to include events. Range: 0-72 hours. Examples:
0: No time limit (show all future events)
3: Only events starting within next 3 hours
12: Only events starting within next 12 hours (half-day window)
24: Events starting today/tomorrow (1 day window)
72: Events within next 3 days
Only applies to upcoming events (time.available: "not_started"). Ignored for live events. Useful for focusing on immediate betting opportunities or limiting long-term forecasts.
time.available
string
undefined
Event status filter. Options:
"live": Only live/in-play events. Shows matches currently in progress. Best for live betting hubs.
"not_started": Only upcoming/pre-match events. Shows scheduled future matches. Best for pre-match betting, planning ahead.
Omitted: Shows both live and upcoming events (no status filtering).
Filters Example
javascript
{ recommendationType: { available: 'popular' // Single type (not array like Highlights) }, sport: { available: [1, 2, 5], // Soccer, Basketball, Tennis sportNames: false // Show sport icons }, time: { range: 12, // Next 12 hours available: 'not_started' // Upcoming events only }}
CSS class
Supported CSS properties
srct-br-footer
color
srct-br-loading
background-color, border-radius
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--unavailable
background-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
srct-br-market__name
font-size, color
srct-br-market__type
font-size, color
srct-br-market__more-markets
background-color, color, border-radius
srct-br-eventcard
background, color
srct-br-leagueinfo
background, font-size, color, border
srct-br-leagueinfo__info
font-size, color
srct-br-leagueinfo__icon
font-size, color
srct-br-table__content
background-color
srct-br-table__header
font-size, color, background-color
srct-br-table__subheader
font-size, color, background-color
srct-br-table__cell
border
srct-br-table__row-spacing
width
Basic tournament list with popular recommendations.
