Bet Recommendation Highlights widget displays AI-powered betting recommendations across multiple categories. The widget provides either personalized or general betting suggestions with configurable display layouts, filtering capabilities, and interactive outcome selection. It is designed for sports betting platforms that require intelligent bet suggestions to improve user engagement and conversion rates. The widget supports multiple sports simultaneously, offers extensive filtering options, and provides flexible card layouts including navigation using either tabs or the expanded view layout. Integration with bet slip as well as optional analytics tracking is provided through click handlers.
See the Bet Recommendation Highlights widget demo.
No parameter is absolutely required, but one of either user or similarEventIds must be present.
Optional identifiers:
User ID is passed via this parameter, the widget offers personalized recommendations.similarEventIds parameter, see Getting IdentifiersEnvironment Requirements
Supported Sports
Illustrations of main layout variants with relevant property values below.
See Bet Recommendation widget demo
The filters object controls all filtering capabilities including recommendation types, sports, time, country, and league filters.
{
"recommendationType": {
"available": [ "recommended", "popular", "trending", "similar" ],
"active": "popular",
"hidden": false
},
"sport": {
"available": [1, 2, 5, 17, 23, 25]
Properties do not always transfer from the above table directly into integration code. Properties must be transformed differently for each integration method:
SIR() callcardVariant: "compact"In javascript integration, the properties go into an object which is passed as the 4th argument of the call ti SIR() function. Please see Global SIR API
data-sr- prefixcardVariant → data-sr-card-variantIn all examples replace sportradar in the widgetloader URL path with your clientId.
Example if your clientId is client1:
This URL: https://widgets.sir.sportradar.com/sportradar/widgetloader
becomes this: https://widgets.sir.sportradar.com/client1/widgetloader
Note: Event handlers like onItemClick cannot be set via HTML attributes. Use the JavaScript/Programmatic integration method if you need to capture user interactions or implement tracking. See the JavaScript examples for implementation details.
For using the onTrack function see Tracking Guide.
Implement interactive behavior and analytics tracking using callback functions.
count parameter affects data payload size and rendering performance. Higher values (40-48) may impact initial load time.maxRows to limit vertical space without reducing total event count (creates pagination or scrolling).cardVariant: "compact" with cardsLayout: "vertical".When integrating with existing betting platforms that use different sport identifiers, use the sportsMapping parameter:
sportsMapping: {
'soccer': '1', // Client's 'soccer' → Sportradar sport ID 1
'basketball': '2', // Client's 'basketball' → Sportradar sport ID 2
'tennis': '5' // Client's 'tennis' → Sportradar sport ID 5
}The "similar" recommendation type requires explicit event IDs:
similarEventIds: [12345678, 87654321, 11223344],
filters: {
recommendationType: {
available: ['similar'],
active: 'similar'
}
}This feature displays events similar to the specified events based on sport, tournament, teams, and betting patterns.
For integration assistance, performance optimization, and security best practices, see Integration Best Practices.
Learn how to obtain sport IDs, tournament IDs, and event IDs for widget configuration and filtering.
Customize widget appearance, colors, fonts, and styling to match your brand identity and design system.
Learn performance optimization, security considerations, error handling, and deployment strategies for production environments.
"tabs"Users can switch between recommendation types using tab navigation.
| Property | Type | Default | Description |
|---|---|---|---|
count | number | 24 (default card) or 5 (table card) | Number of event cards to display. Must be between 1 and 48. |
maxRows | number | 3 | Maximum number of card rows to display. Must be between 1 and 3. |
cardVariant | string | "default" | Cards display mode.
|
cardsLayout | string | "horizontal" | Layout direction for event cards.
|
categoryLayout | string | "tabs" | Display mode for categories.
|
outcomeNamePosition | string | "start" | Position of outcome name relative to odds. Options: "start", "end", "top", "bottom" |
user | string|number | undefined | User identifier for personalized recommendations. Can be string or numeric ID. |
sportsMapping | object | undefined | Maps client's sport identifiers to Sportradar sport IDs. Object with keys as client sport IDs and values as Sportradar sport IDs (string or number). |
filters | object | See Filters Object | Required. Configuration for all filter types including recommendation type, sport, time, country, and league filters. |
onItemClick | function | undefined | Callback function triggered when event or outcome is clicked. Receives target (string: "event" or "outcome") and data object containing event and outcome information. |
similarEventIds | array<number> | undefined | Array of event IDs for "similar" recommendation type. Required when using filters.recommendationType.active: "similar". See Getting Identifiers |
| Property | Type | Default | Description |
|---|---|---|---|
recommendationType | object | required | Configuration for recommendation type selection (recommended, popular, trending, similar) |
recommendationType.available | array<string> | ["recommended", "popular", "trending", "similar"] | Required. Array of available recommendation types. Order determines display sequence.
|
recommendationType.active | string | First value from available | Initially active recommendation type. Must be one value from available array. |
recommendationType.hidden | boolean | false | When true, hides the recommendation type selector from UI |
sport | object | undefined | Sport filter configuration. |
sport.available | array<string|number> | All sports | Array of Sportradar sport IDs to display in filter. Omit to show all sports. See Sports Reference. |
sport.hidden | boolean | false | When true, hides the sport filter from UI |
sport.sportNames | boolean | false | When true, displays sport names instead of sport icons |
time | object | undefined | Time/status filter configuration. |
time.available | array<string> | ["live", "not_started"] | Array of available time filter options. Options: "live" (live events only), "not_started" (upcoming events only) |
time.active | array<string> | All values from available | Initially active time filters. Can select multiple values from available array. |
country | object | undefined | Country filter configuration. See Get Identifiers. |
country.available | array<string|number> | All countries | Array of country identifiers to filter events. Accepts Sportradar country IDs or ISO country codes. |
league | object | undefined | League filter configuration. |
league.available | array<string|number> | All leagues | Array of tournament/league identifiers to filter events. Accepts Sportradar unique tournament IDs. See Get Identifiers. |
filters.sport.hidden → Complex objects must be passed as JSON stringsIn HTML integration, the properties go into the parent HTML object as object properties, prefixed with data-sr- as explained above.
This method supports only simple (base) properties and does not support properties that require functions.
In all examples replace sportradar in the widgetloader URL path with your clientId.
Example if your clientId is client1:
https://widgets.sir.sportradar.com/sportradar/widgetloaderhttps://widgets.sir.sportradar.com/client1/widgetloaderInitialize the widget programmatically using the JavaScript API. The widget renders in the specified container element.
(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', {
maxRows: 3,
categoryLayout: 'tabs',
filters: {
recommendationType: {
available: ['recommended', 'popular', 'trending']
}
}
});<div id="sr-widget"
data-sr-widget="betRecommendation"
data-sr-max-rows="3"
data-sr-category-layout="tabs">
</div>
<script type="application/javascript"
src="https://widgets.sir.sportradar.com/sportradar/widgetloader"
async>
</script>(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('addWidget', '#sr-widget', 'betRecommendation', {
user: 'user_12345',
count: 24,
maxRows: 3,
cardVariant: 'default',
cardsLayout: 'horizontal',
categoryLayout: 'tabs',
filters: {
recommendationType: {
available: ['recommended', 'popular', 'trending']
}
},
onItemClick: function(target, data) {
// Handle clicks on events or outcomes
console.log('User clicked:', target);
console.log('Data received:', data);
if (target === 'outcome') {
// User clicked on an outcome (betting odd)
addToBetSlip({
eventId: data.event.id,
eventName: data.event.name,
outcomeId: data.outcome.id,
outcomeName: data.outcome.name,
odds: data.outcome.odds,
marketId: data.market.id,
marketName: data.market.name
});
} else if (target === 'event') {
// User clicked on event details (not an outcome)
navigateToEvent(data.event.id);
}
}
});
// Example bet slip integration function
function addToBetSlip(selection) {
console.log('Adding to bet slip:', selection);
// Implement your bet slip logic here
// Example: call your betting platform's API
window.betSlipAPI.addSelection(selection);
}
// Example navigation function
function navigateToEvent(eventId) {
console.log('Navigating to event:', eventId);
window.location.href = '/event/' + eventId;
}