--- title: "Bet Recommendation Highlights" canonical_url: "https://apidocs.sportradar.com/resources/widgets/docs/example/bet-recommendation-highlights" markdown_url: "https://apidocs.sportradar.com/resources/widgets/docs/example/bet-recommendation-highlights.md" last_updated: "2026-03-23T18:44:01Z" --- # Bet Recommendation Highlights **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. **Desktop Layout** ![Bet Recommendation Desktop Layout](https://apidocs.sportradar.com/resources/widgets/static/img/betrecommendation/bet_recommendation_desktop_layout.png) **Mobile Layout** ![Bet Recommendation Mobile Layout](https://apidocs.sportradar.com/resources/widgets/static/img/betrecommendation/bet_recommendation_mobile_layout.png) See the [Bet Recommendation Highlights widget demo](https://widgets.sir.sportradar.com/bet-recommendation). ## Supported Content And Environment ### Required Parameters No parameter is absolutely required, but one of either `user` or `similarEventIds` must be present. **Optional identifiers:** - **user**: When `User ID` is passed via this parameter, the widget offers personalized recommendations. - **similarEventIds**: When an array of event IDs when using "similar" recommendation type via `similarEventIds` parameter, see [Getting Identifiers](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/getting-identifiers.md) - **clientId**: ClientId is a necessary piece of data for every integration. See [Getting Identifiers](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/getting-identifiers.md) **Environment Requirements** ## Technical Requirements: - JavaScript enabled - XMLHttpRequest support for data fetching - CSS3 support for styling and animations **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 Illustrations of main layout variants with relevant property values below. **Tabs Layout** ![Bet Recommendation tabs layout](https://apidocs.sportradar.com/resources/widgets/static/img/betrecommendation/bet_recommendation_layout_tabs.png) - categoryLayout: `"tabs"` Users can switch between recommendation types using tab navigation. **Expanded Layout** ![Bet Recommendation expanded layout](https://apidocs.sportradar.com/resources/widgets/static/img/betrecommendation/bet_recommendation_layout_expanded.png) - categoryLayout: `"expanded"` All recommendation categories are displayed simultaneously in a vertically stacked layout. **Vertical Layout** ![Bet Recommendation vertical layout](https://apidocs.sportradar.com/resources/widgets/static/img/betrecommendation/bet_recommendation_vertical_default.png) - cardsLayout: `"vertical"` - cardVariant: `"default"` Cards are stacked vertically, suitable for sidebar or narrow container placements. **Compact Card** ![Bet Recommendation compact card](https://apidocs.sportradar.com/resources/widgets/static/img/betrecommendation/bet_recommendation_horizontal_compact.png) - cardVariant: `"compact"` - cardsLayout: `"horizontal"` Condensed card layout with minimal information for space-efficient display. See [Bet Recommendation widget demo](https://widgets.sir.sportradar.com/bet-recommendation) ## API Reference | 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](#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` | `undefined` | Array of event IDs for "similar" recommendation type. Required when using `filters.recommendationType.active: "similar"`. See [Getting Identifiers](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/tutorial-getting-identifiers.md) | ### Filters Object The `filters` object controls all filtering capabilities including recommendation types, sports, time, country, and league filters. | Property | Type | Default | Description | | ------------------------------ | ----------------------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `recommendationType` | `object` | **required** | Configuration for recommendation type selection (recommended, popular, trending, similar) | | `recommendationType.available` | `array` | `["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` | All sports | Array of Sportradar sport IDs to display in filter. Omit to show all sports. See [Sports Reference](https://apidocs.sportradar.com/resources/widgets/docs/example/tutorials/tutorial-sports.md). | | `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` | `["live", "not_started"]` | Array of available time filter options. Options: `"live"` (live events only), `"not_started"` (upcoming events only) | | `time.active` | `array` | All values from `available` | Initially active time filters. Can select multiple values from `available` array. | | `country` | `object` | `undefined` | Country filter configuration. See [Get Identifiers](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/getting-identifiers.md). | | `country.available` | `array` | 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` | All leagues | Array of tournament/league identifiers to filter events. Accepts Sportradar unique tournament IDs. See [Get Identifiers](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/getting-identifiers.md). | #### Filters Example ```javascript { "recommendationType": { "available": [ "recommended", "popular", "trending", "similar" ], "active": "popular", "hidden": false }, "sport": { "available": [1, 2, 5, 17, 23, 25], "hidden": false, "sportNames": true }, "time": { "available": ["live", "not_started"], "active": "live" }, "country":{ "available": ["US", "UK", "DE", "ES", "SI"], }, "league": { "available": ["sr:tournament:45632", "sr:tournament:82957"] } } ``` ## Integration Examples ### Property Name Transformations Properties do not always transfer from the above table directly into integration code. Properties must be transformed differently for each integration method: #### JavaScript/Programmatic Integration - Property names remain unchanged in camelCase - Properties become members of the 4th parameter object in `SIR()` call - Example: `cardVariant: "compact"` > **Info** > > 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](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/SIR.md) #### HTML/Declarative Integration - Convert camelCase to lowercase with dashes, e.g. cardVariant becomes card-variant - Add `data-sr-` prefix - Example: `cardVariant` → `data-sr-card-variant` - Example: `filters.sport.hidden` → Complex objects must be passed as JSON strings > **Info** > > In HTML integration, the properties go into the parent HTML object as object properties, prefixed with `data-sr-` as explained above. > **Only base property support** > > This method supports only simple (base) properties and does not support properties that require functions. > **Info** > > In 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: `https://widgets.sir.sportradar.com/client1/widgetloader` > **Info** > > In all examples replace `sportradar` in the widgetloader URL path with your clientId. > > Example if your clientId is `client1`: > This URL: > becomes this: **Tabs Layout** ### JavaScript (Programmatic) Initialize the widget programmatically using the JavaScript API. The widget renders in the specified container element. ```javascript (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'] } } }); ``` #### HTML (declarative) ```html
``` **Expanded Layout** ### JavaScript (Programmatic) Initialize the widget programmatically using the JavaScript API. The widget renders in the specified container element. ```javascript SIR('addWidget', '#sr-widget', 'betRecommendation', { maxRows: 3, categoryLayout: 'expanded', filters: { recommendationType: { available: ['recommended', 'popular', 'trending'] } } }); ``` #### HTML (declarative) ```html
``` **Vertical Layout** ### JavaScript (Programmatic) Initialize the widget programmatically using the JavaScript API. The widget renders in the specified container element. ```javascript SIR('addWidget', '#sr-widget', 'betRecommendation', { count: 18, maxRows: 3, cardsLayout: 'vertical', cardVariant: 'default', filters: { recommendationType: { available: ['recommended', 'popular', 'trending'] } } }); ``` #### HTML (declarative) ```html
``` **Compact Cards** #### Javascript (programmatic) ```javascript SIR('addWidget', '#sr-widget', 'betRecommendation', { count: 18, maxRows: 3, cardsLayout: 'horizontal', cardVariant: 'compact', filters: { recommendationType: { available: ['recommended', 'popular', 'trending'] } } }); ``` #### HTML (declarative) ```html
``` > **Note** > > **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. ### Event Handlers #### onTrack For using the onTrack function see [Tracking Guide](https://apidocs.sportradar.com/resources/widgets/docs/example/tutorials/tracking-guide.md). #### Custom Tracking Facilities Implement interactive behavior and analytics tracking using callback functions. **Complete Event Handler Example** ```javascript (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; } ``` **onItemClick Data Structure** When `onItemClick` is triggered, the `data` parameter contains: ```javascript { event: { id: 12345678, // Event ID name: "Team A vs Team B", // Event name startTime: "2025-11-14T19:00:00Z", sport: { id: 1, name: "Soccer" }, tournament: { id: 17, name: "UEFA Champions League" } }, outcome: { // Only present when target === 'outcome' id: 98765, name: "Team A", odds: 2.50, active: true }, market: { // Only present when target === 'outcome' id: 1, name: "1X2" } } ``` ## Tips ### Performance Considerations - The `count` parameter affects data payload size and rendering performance. Higher values (40-48) may impact initial load time. - Use `maxRows` to limit vertical space without reducing total event count (creates pagination or scrolling). - For optimal mobile performance, consider using `cardVariant: "compact"` with `cardsLayout: "vertical"`. ### Sports Mapping When integrating with existing betting platforms that use different sport identifiers, use the `sportsMapping` parameter: ```javascript 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 } ``` ### Similar Events Feature The "similar" recommendation type requires explicit event IDs: ```javascript 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](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/tutorial-integration-best-practices.md). ## Related Resources ### Getting Identifiers Learn how to obtain sport IDs, tournament IDs, and event IDs for widget configuration and filtering. [Learn More](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/tutorial-getting-identifiers.md) ### Widget Theming Customize widget appearance, colors, fonts, and styling to match your brand identity and design system. [Learn More](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/tutorial-theming-widgets.md) ### Integration Best Practices Learn performance optimization, security considerations, error handling, and deployment strategies for production environments. [Learn More](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/tutorial-integration-best-practices.md)