My Combo

My Combo widget is a front-end widget that provides a personalized betting experience and a simplified way to discover and place multi bets. The main feature of the widget is the user interface that allows punters to quickly add multi bet combinations to the bet slip, find new ones or create their own on the fly.

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

#Key Capabilities

#UI and Interaction Options

#Settings and Customization

• Version: mixed match multi bets or same match multi bets (same match depends on API readiness)
• Recommendation type: recommended (default) or popular (when user ID is not available)
• Sport filter
• Time span: live, pre-match, or hours until kickoff
• Widget name
• Add/remove legs toggle
• Load new combo button
• Load different leg button (not compatible with add/remove legs)
• Ticket length: maximum ticket length (default 4, minimum 2)
• Maximum combined odds threshold
• Mobile/desktop mode

#Styling Options

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

#Requirements

• Access to the client API

• Required endpoints: User ID, Odds, Bet slip content, combined odds for multi bets

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

#Main Configurable Features

See the My Combo widget demo. Illustrations of main layout variants and bet types with relevant property values below.

Single Card Layout

Carousel Layout

Combo Card Details

Single combo card showing multi-leg accumulator with combined odds and add to bet slip button.

#API Reference

#Basic Properties

{
  sport: {
    available: [1, 2, 5]  // Soccer, Basketball, Tennis
  },
  league: {
    available: [
      "sr:tournament:17",   // Premier League
      "sr:tournament:34",   // Bundesliga
      "sr:tournament:132"   // NBA
    ]
  }
}

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

#Widget Setup

SIR("addWidget", "#my-combo-1", "betRecommendation.myCombo", {
  layout: "single",
  betType: "mixed",
  filters: {
    sport: {
      available: [1, 2],
    },
  },
});

<div
  class="sr-widget"
  data-sr-widget="betRecommendation.myCombo"
  data-layout="single"
  data-bet-type="mixed"
  data-filters='{"sport": {"available": [1, 2]}}'
></div>

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

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" } },
});

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.

#Total Odds Sync

The onTotalOddsChanged adapter method lets you provide pre-calculated total odds for combo tickets displayed in the widget (used by My Combo and Swipe Bet). When a user's selection changes, the widget calls this method with the current set of outcomes and expects you to return the computed total odds.

Register it alongside your adapter:

function onTotalOddsChanged(args, callback) {
  // Replace with your own odds calculation implementation
  const oddsResponse = getOdds(args);
  callback(oddsResponse);
}

SIR("registerAdapter", "{ADAPTER_NAME}", {
  onTotalOddsChanged: onTotalOddsChanged,
});
SIR("addWidget", "#sr-widget", "betRecommendation.myCombo");

OddsRequest — passed to onTotalOddsChanged as args:

Outcome (item in odds array):

OddsResponse — returned via callback:

OutcomesResponse (item in response odds array):

#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(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:

SIR("registerAdapter", "mockData", { 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 (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");

#Data Types

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

Event

Market

Outcome

#Tips

• When maxAllowedOdds is exceeded, the widget trims legs starting from the highest-odds one and recalculates; this repeats until combined odds fall below the limit or the card drops below minTicketLength, in which case the card is discarded.
• Setting a high minRequiredLegOdds combined with a low maxTicketLength can result in no cards being returned. Use debug: true to inspect how thresholds are filtering combos.
• With editLegAction: "replace", the replacement leg is constrained to the same sport, a similar odds range, and compatibility with the remaining legs.