Similar Bets (Bet Slip)

Similar Bets widget (BetSlip Recommendation) is a front-end widget that provides bet recommendations based on existing selection in the bet slip.

• Punters past activity
• General betting trends
• Overall betting volume
• Seasonal variations
• New discovery and engagement patterns

Recommendation type

• Similar events: List of events that are similar to the events in the bet slip.

Integration options

• The widget can be placed next to or inside the bet slip displaying events that are similar to those that have already been added to the bet slip.

#Key Capabilities

#Settings and Customization

• Time span: live, upcoming, or both (default)
• Sport filter: single sport or multiple sports
• Competition/country filter
• Events: number of recommendations

#Styling Options

• Elements (container, cards, buttons): colors and rounded corners
• Text: font styles and colors

#Requirements

• Access to the client API

• Required endpoints: Odds, Match IDs of selections currently in the bet slip

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

#Main Configurable Features

See the Similar Bets widget demo. Illustrations of main configurations with relevant property values below.

Default

Compact Cards

#Filters Object

The filters object provides optional filtering to refine similar event recommendations. Note: recommendationType is automatically set to "similar" and cannot be changed.

#Filters Example

{
  sport: {
    available: [1, 2],  // Soccer and Basketball only
    sportNames: false
  },
  time: {
    available: ['not_started'],
    active: ['not_started']  // Only upcoming similar events
  },
  country: {
    available: [

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

#Custom Class Selectors

#Integration

Demo: Open demo

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

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.

// 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:

(function

#Data Types

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

Event

#Tips

#Dynamic similarEventIds Management

Re-render the widget whenever the bet slip changes to keep recommendations in sync:

betSlip.on("selectionAdded", updateSimilarBets);
betSlip.on("selectionRemoved", updateSimilarBets);
betSlip.on("selectionChanged", updateSimilarBets);
betSlip.on("cleared", hideSimilarBets);

function updateSimilarBets() {
  const eventIds = betSlip.

Debounce updates if the bet slip fires multiple events in quick succession:

let updateTimer;

function debouncedUpdateSimilarBets() {
  clearTimeout(updateTimer);
  updateTimer = setTimeout(() => {
    updateSimilarBets();
  }, 500);
}

betSlip.on("selectionAdded", debouncedUpdateSimilarBets);
betSlip.on("selectionRemoved", debouncedUpdateSimilarBets)

Limit recommendations as the bet slip grows, and hide the widget when it is full:

function updateSimilarBets() {
  const selections = betSlip.getSelections();
  const eventIds = selections.map((s) => s.eventId);

  if (eventIds.length === 0) {
    hideSimilarBets();
    return;

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

Market

Outcome