Bet Insights

Bet Insights widget displays AI-powered betting insights and recommendations for specific markets within a match. The widget analyzes betting patterns, historical data, and statistical trends to highlight valuable betting opportunities with detailed market and outcome information. It provides intelligent suggestions to help users identify potentially profitable bets based on comprehensive data analysis. The widget offers flexible integration modes including inline display for dedicated sections or button-triggered modal for compact placements, multiple card layout variants for different use cases, and extensive customization options for visual presentation and user interaction patterns.

Web Inline

Web Pop-up

Mobile Inline

Mobile Pop-up

See the Bet Insights widget demo.

#Supported Content and Environment

#Required Parameters

• widget-name: betInsights

Required identifiers:

• matchId: The Sportradar match identifier. See Getting Identifiers

#Adapter

For implementation guidance, example adapter implementations, and the adapter endpoint contract required by this widget, see the Adapter overview. It explains how to choose between Generic-Sportradar, custom-mapping, or self-hosted adapters and includes sample payloads you can adapt.

#Adapter Endpoint Requirements

Mandatory Endpoints

• eventMarkets or (market + availableMarketsForEvent)
• event

Optional Endpoints

• betSlipSelection - visual representation of markets already in betslip

#Adapter Implementation Template

This is an example of an adapter implementing all endpoints. It is intended to be a copy/paste template, where only data fetching and transformation need to be implemented. When implementing an adapter, implement only the endpoints which are required by the widget being integrated, and discard the rest. For each endpoint, only the getData${ENDPOINT_NAME}() and transormData${ENDPOINT_NAME}() functions need to be implemented.

#Main Configurable Features

#Integration Mode

The widget can be embedded inline (always visible) or as a button that opens a pop-up overlay.

Inline

Button (Pop-up)

Always-visible insights displayed directly on the page — ideal for dedicated betting sections.

javascript

{

#Widget Title

The title in the widget header (or button label) can include or hide its icon.

With Icon (Default)

Without Icon

javascript

{ widgetTitle: "Bet Insights" }

#Card Variants

Controls the visual style of each insight card.

#Outcome Position

Controls where the outcome name appears relative to the odds on each card.

#Cards Layout

Vertical

Horizontal

Cards stacked vertically — suitable for narrow containers and sidebars.

javascript

{ cardsLayout

#Pop-up Direction

When using button integration (integration: "button"), controls which direction the pop-up opens.

Left

Right

Bottom

javascript

#Widget Header Options

Header Disabled

Collapse Enabled

Start Collapsed

Hides the widget header entirely in inline mode.

javascript

See the Bet Insights demo for live examples.

#API Reference

#Integration Process

This section outlines the process required to integrate the Bet Insights widget into your platform.

#Communication Channel Setup

Your sales contact person will initiate a shared communication channel via Slack invite to facilitate real-time collaboration between teams. This channel serves as the primary medium for answering questions, exchanging required information, and providing ongoing integration support.

#Technical Kickoff Meeting

Your sales contact person will organize a kickoff meeting with your technical team and Sportradar's integration team. This meeting serves as the formal start of the technical integration process and ensures both teams are aligned on requirements, timelines, and next steps. During the kickoff the teams will decide the adapter implementation type — this is important because Sportradar needs to confirm whether we have access to your odds and you can use generic adapter or if your platform uses Unified Odds Feed (UOF) identifiers. If your platform does not use UOF IDs, you may need to implement a custom adapter on your side; that decision can affect timeline, required effort, and the level of market coverage achievable.

#Basic Integration Example

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"

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

To run this widget you must provision an adapter that supplies match and market data. The best adapter type depends on how your data is structured and delivered (for example: a Generic-Sportradar adapter, a custom mapping adapter, or a self-hosted adapter). During onboarding our team will review your data, recommend the optimal adapter, and assist with configuration. After the adapter type is chosen, use the matching example below for the correct integration and configuration steps.

Learn more about adapter options here.

#Advanced Integration

#Handling user selections

The following example shows how to respond when a user clicks an insight card. The onItemClick callback receives the click target and the outcome data, which you can use to build a selection object and push it into your bet slip. Walk through the highlighted sections to understand each part of the flow.

#Bet Slip Integration

The following example shows how to connect the widget to your bet slip so it always reflects the punter's current selections. The adapter's betSlipSelection endpoint keeps the widget in sync, and onItemClick lets you act when the user clicks an outcome card. Walk through the highlighted sections to understand each part of the flow.

We recommend revalidating each selection and refreshing odds when adding them to the bet slip — or at minimum revalidating selections and odds immediately before accepting a bet — to ensure markets are still available and the odds presented to the user are up to date.

{
    onItemClick: function(event, outcomeData) {
        // Add to bet slip
        betSlip.addSelection({
            matchId: outcomeData.matchId,
            marketId: outcomeData.market.id,
            outcomeId: outcomeData.outcome.id,
            odds: outcomeData.

#Hooking Widget Events into the Bet Slip

The following example brings together the widgetloader, the adapter's betSlipSelection endpoint, and the onItemClick handler into a single ready-to-use snippet. Replace the placeholder values.

<

#Market and Outcome Mapping Example

The widget uses Sportradar Unified Odds Feed (UOF) market and outcome identifiers internally. When building a self-hosted adapter, you must map these identifiers to your own market/outcome IDs so the widget can display correct names, odds, and statuses.

To help verify your mapping, the widget provides a testMarkets prop that generates mocked markets and outcomes for a given matchId. This lets you confirm that every market renders correctly before you connect live data.

#Simple format

For quick testing, pass a pipe-delimited list of market IDs. Predefined specifiers are added automatically where needed:

SIR('addWidget', '#bet-insights', 'betInsights', {
    matchId: 61591316,
    testMarkets: "7|8"
});

This generates mocked insights for market 7 and market 8 with their default specifiers.

#Advanced format with specifiers

When you need to test specific specifier values (or multiple values for the same market), use the advanced string format:

marketId1;specifier1,specifier2|marketId2;specifier1,specifier2

Delimiters:

#Specifier examples

A specifier is a key=value pair. Separate multiple specifier sets with a comma:

SIR('addWidget', '#bet-insights', 'betInsights', {
    matchId: 61591316,
    testMarkets: "7;score=1:0,score=1:1|8;total=0.5,total=1.5"
});

This generates mocked insights for:

• Market 7 with specifier score=1:0
• Market 7 with specifier score=1:1
• Market 8 with specifier total=0.5
• Market 8 with specifier total=1.5

#Multiple specifiers in a single set

Some markets require more than one specifier. Use & to combine them within one set.

For example, market 1183 ("{player} total shots (inc. overtime)") uses both a total and a player specifier:

SIR('addWidget', '#bet-insights', 'betInsights', {
    matchId: 61591316,
    testMarkets: "1183;total=0.5&player=sr:player:1234,total=1.5&player=sr:player:2345"
});

This generates mocked insights for:

• Market 1183 with specifiers total=0.5 and player=sr:player:1234
• Market 1183 with specifiers total=1.5 and player=sr:player:2345

#Full test-page example

The following snippet loads the widgetloader, registers a self-hosted mocked adapter, and requests testMarkets for markets 1 (1x2), 18 (Total) and 8 ({!goalnr} goal). The adapter only returns markets 1 and 18, so the widget will display only those — with market 18 using the total=1.5 specifier.

#Widget Behavior

The following describes how the Bet Insights widget reacts to data, market and outcome state changes, and user interactions. It covers visibility rules, how selections and bet-slip events are handled, and how adapter updates or error states affect the widget UI and available actions.

#Flow Diagram

The diagram above illustrates the complete data lifecycle for the Bet Insights widget, which runs in the end user's browser and coordinates data between Sportradar and your systems:

1. Insights Generation (1): AI/ML models in the Sportradar API produce market insights and deliver them to the widget.
2. Market Data Resolution (2–4): The widget requests available markets and odds from your Client API via the Adapter; the Adapter transforms and returns matching available market data.
3. User Interaction (5–7): The end user clicks an outcome (5); the widget invokes the configured onItemClick handler (6) so your app can add the selection to the bet slip (7).
4. State Synchronization (8–9): Your Adapter exposes a betSlipSelection subscription/callback that the widget registers; when your bet slip changes the Adapter invokes the callback (8–9) and the widget updates its UI to reflect current selections.

#Market status

When market status is set to suspended, the widget disables that market's outcomes and displays the label "temporary unavailable" in place of odds, indicating the market is temporarily not available for betting.

const market = {
    id: "1",
    name: "Match Winner (1X2)",
    outcomes: [
        { id: "1", name: "Home", status: "active", odds: { type: "eu", value: "2.10" } },
        { id: "X", name

If a market or outcome has any status other than active (for example: suspended or cancelled), the widget will hide that market to avoid showing stale or unavailable betting options.

#Custom Theming

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. Note that all custom classes must be nested within the .sr-bb.sr-<WIDGET_NAME> selector class. This ensures that the custom styles only apply to that widget and not to other elements on the page.

.sr-bb.sr-insights {
    .srct-ins-button {
        border-radius: 2px;
    }
    .srct-ins-showmore {
        color: #4786ff;
    }
}

#Tips

Practical integration, performance, and UX tips for using the Bet Insights widget effectively.

#Choose Appropriate Integration Mode

Select integration mode based on page layout and user experience goals:

#Dedicated betting insights section

{

#Related Resources

<script type="text/javascript">
// Widget loader script from Step 3 
ndatory 
// -------- Data + Transform functions --------

async function getDataMarket(args) {
  // Here fetch data from your data source and return it
  return {};
}

function transformDataMarket(data) {
  // Here transform your data into data structure exemplified by the object below.
  /*
  // Illustration how data transformation might work from client data to Adapter types
  return {
    market: {
      id: data.marketId,
      name: data.marketName,
      outcomes: data.outcomes.map((outcome) =>  { id: outcome.id, name: outcome.name, odds: outcome.odds } )
    },
    event: { id: data.eventId, type: data.eventType }
  };
  */

  return {
    market: {
      id: "sr:market:1",
      name: "Match Winner",
      outcomes: [
        { id: "1", name: "Home", odds: 2.5 },
        { id: "X", name: "Draw", odds: 3.0 },
        { id: "2", name: "Away", odds: 3.2 }
      ]
    },
    event: { id: "sr:match:12345", type: "uf" }
  };
}

async function getDataAvailableMarketsForEvent(args) {
  // Here fetch data from your data source and return it
  return {};
}

function transformDataAvailableMarketsForEvent(data) {
  // Here transform your data into data structure exemplified by the object below.
  /*
  // Illustration how data transformation might work from client data to Adapter types
  return {
    selection: data.map((selection) => { type: selection.type, event: selection.event, market: selection.market})
  }; 
  */

  return {
    selection: [
      {
        type: "uf",
        event: "61513908",
        market: "1",
      },
    ],
  };
}

async function getDataEventMarkets(args) {
  // Here fetch data from your data source and return it
  return {};
}

function transformDataEventMarkets(data, args) {
  // Here transform your data into data structure exemplified by the object below.
  /*
  // Illustration how data transformation might work from client data to Adapter types
  let markets = []

  function mapMarkets(market){
    return {
      id: market.id,
      status: market.status,
      name: market.name,
      outcomes: market.outcomes.map((outcome) => {id: outcome.id, name: outcome.name , odds: { type: outcome.odds.type, value: outcome.odds.value}, status: outcome.status})
    };
  }

  return data.forEach(mapMarkets);
  */

  return {
    event: args.selection.event,
    markets: [
      {
        id: "1",
        status: "active",
        name: "1x2",
        outcomes: [
          {
            id: "1",
            name: "Tenhaisen",
            odds: { type: "eu", value: "1.88" },
            status: "active",
          },
          {
            id: "2",
            name: "draw",
            odds: { type: "eu", value: "3.85" },
            status: "active",
          },
          {
            id: "3",
            name: "Hoftenstain",
            odds: { type: "eu", value: "3.7" },
            status: "active",
          },
        ],
      },
    ],
  };
}

async function getDataEvent(args) {
  // Here fetch data from your data source and return it
  return {};
}

function transformDataEvent(data) {
  // Here transform your data into data structure exemplified by the object below.
  /*
  // Illustration how data transformation might work from client data to Adapter types
  return {
    event: {
      id: data.event,
      date: {
        displayValue: data.displayTime,
        startTime: data.dateTime,
      },
      sport: {
        id: data.sport.id,
        name: data.sport.name,
      },
      category: {
        id: data.category.id,
        name: data.category.country,
      },
      tournament: {
        id: data.tournament.id,
        name: data.tournament.name,
      },
      teams: data.teams.map((team) => {id: team.id, name: team.name}),
      isLive: data.isLive,
    },
  }; 
  
  */
  return {
    event: {
      id: args.selection.event,
      date: {
        displayValue: "14/01/26, 19:30",
        startTime: "2026-01-14T19:30:00.000Z",
      },
      sport: {
        id: "1",
        name: "Soccer",
      },
      category: {
        id: "30",
        name: "Germany",
      },
      tournament: {
        id: "42",
        name: "Liga Supreme",
      },
      teams: [
        { id: "1270229", name: "Tenhaisen" },
        { id: "31531", name: "Hoftenstain" },
      ],
      isLive: false,
    },
  };
}

async function getDataFilterMarkets(args) {
  // Here fetch data from your data source and return it
  return {};
}

function transformDataFilterMarkets(data) {
  // Here transform your data into data structure exemplified by the object below.
  /*
  // Illustration how data transformation might work from client data to Adapter types
  return {
    selection: data.selection.map((market) => {type: market.type, event: market.event, market: market.id})
  }
  */
  return {
    selection: [
      {
        type: "uf",
        event: "61513908",
        market: "1",
      },
    ],
  };
}

async function getDataBetSlipSelection(args) {
  // Here fetch data from your data source and return it
  return {};
}

function transformDataBetSlipSelection(data) {
  // Here transform your data into data structure exemplified by the object below.
  /*
  // Illustration how data transformation might work from client data to Adapter types
  return {
    selection: data.selection.map((market) => {event: market.event, market: market.market, outcome: market.outcome, type: market.type}),
  };
  */

  return {
    selection: [
      {
        event: "61513908",
        market: "1",
        outcome: "1",
        type: "uf",
      },
    ],
  };
}

async function getDataCashBackSelections(args) {
  // Here fetch data from your data source and return it
  return {};
}

function transformDataCashBackSelections(data) {
  // Here transform your data into data structure exemplified by the object below.
  /*
  // Illustration how data transformation might work from client data to Adapter types
  return {
    events: data.events.map((event) => {event: event.id, type: event.type}),
  }
  */

  return {
    events: [
      {
        event: "56418457",
        type: "uf",
      },
    ],
  };
}

async function getDataTickets(args) {
  // Here fetch data from your data source and return it
  return {};
}

function transformDataTickets(data) {
  // Here transform your data into data structure exemplified by the object below.
  /*
  // Illustration how data transformation might work from client data to Adapter types
  return {
    tickets: data.tickets.map((ticket) => {
      ticketId: ticket.id,
      bets: ticket.bets.map((bet) => {
        betId: bet.id,
        selections: bet.selections.map((selection) => {
          type: selection.type,
          event: selection.event,
          market: selection.market,
          outcome: selection.outcome,
          odds: { type: selection.odds.type, value: selection.odds.value },
        }),
        stake: bet.stake.map((stake) => {
          type: stake.type,
          currency: stake.currency,
          amount: stake.amount,
          mode: stake.mode
        }),
      }),
    }),
  };
  */

  return {
    tickets: [
      {
        ticketId: "ticket_123456",
        bets: [
          {
            betId: "bet_001",
            selections: [
              {
                type: "uf",
                event: "sr:match:12345",
                market: "1",
                outcome: "1",
                odds: { type: "eu", value: "2.10" }
              }
            ],
            stake: [{
              type: "cash",
              currency: "USD",
              amount: "10.00",
              mode: "total"
            }]
          }
        ],
        type: "ticket",
        version: "1.0"
      }
    ]
  };
}

async function getDataMatchEventSuggestedSelection(args) {
  // Here fetch data from your data source and return it
  return {};
}

function transformDataMatchEventSuggestedSelection(data) {
  // Here transform your data into data structure exemplified by the object below.
  /*
  // Illustration how data transformation might work from client data to Adapter types
  return {
    selections: data.selections.map((selection) => {
      event: selection.event,
      market: selection.market,
      outcome: selection.outcome,
      type: selection.type,
      specifiers: selection.specifiers
    })
  };
  */

  return {
    selections: [
      { event: "sr:match:12345", market: "1", outcome: "1", type: "uf" },
      { event: "sr:match:12345", market: "18", specifiers: "total=2.5", type: "uf" }
    ]
  };
}

async function getDataRecommendedSelections(args) {
  // Here fetch data from your data source and return it
  return {};
}

function transformDataRecommendedSelections(data) {
  // Here transform your data into data structure exemplified by the object below.
  /*
  // Illustration how data transformation might work from client data to Adapter types
  return {
    selection: data.selections.map((selection) => {
      event: selection.event,
      market: selection.market,
      outcome: selection.outcome,
      type: selection.type,
      specifiers: selection.specifiers
    })
  };
  */

  return {
    selection: [
      { event: "sr:match:12345", market: "1", outcome: "1", type: "uf" },
      { event: "sr:match:67890", market: "18", specifiers: "total=2.5", outcome: "13", type: "uf" }
    ]
  };
}

async function getDataCalculateCustomBetXML(args) {
  // Here fetch data from your data source and return it
  return {};
}

function transformDataCalculateCustomBetXML(data) {
  // Here transform your data into data structure exemplified by the object below.
  /*
  // Illustration how data transformation might work from client data to Adapter types
  return {
    payload: '<xml>data</xml>',
  }
  */
  return {
    payload: `<filtered_calculation_response generated_at="2025-04-16T13:29:08+00:00">
                <calculation odds="27.50303106727931" probability="0.027418715351118873" harmonization="false"/>
                <available_selections>
                  <event id="sr:match:12345678">
                    <markets>
                      <market id="65" specifiers="hcp=0:2" conflict="false">
                        <outcome id="1711" conflict="true"/>
                        <outcome id="1712" conflict="true"/>
                        <outcome id="1713" conflict="false"/>
                      </market>
                      ...
                    </markets>
                  </event>
                </available_selections>
              </filtered_calculation_response>`
  };
}

// -------- Adapter --------

const adapter = {
  config: {},
  endpoints: {
    market: (args, callback) => {
      getDataMarket(args)
        .then(data => transformDataMarket(data))
        .then(result => callback(undefined, result));
      return () => {};
    },

    availableMarketsForEvent: (args, callback) => {
      getDataAvailableMarketsForEvent(args)
        .then(data => transformDataAvailableMarketsForEvent(data))
        .then(result => callback(undefined, result));
      return () => {};
    },

    eventMarkets: (args, callback) => {
      getDataEventMarkets(args)
        .then(data => transformDataEventMarkets(data, args))
        .then(result => callback(undefined, result));
      return () => {};
    },

    event: (args, callback) => {
      getDataEvent(args)
        .then(data => transformDataEvent(data, args))
        .then(result => callback(undefined, result));
      return () => {};
    },

    filterMarkets: (args, callback) => {
      getDataFilterMarkets(args)
        .then(data => transformDataFilterMarkets(data))
        .then(result => callback(undefined, result));
      return () => {};
    },

    betSlipSelection: (args, callback) => {
      getDataBetSlipSelection(args)
        .then(data => transformDataBetSlipSelection(data))
        .then(result => callback(undefined, result));
      return () => {};
    },

    cashBackSelections: (args, callback) => {
      getDataCashBackSelections(args)
        .then(data => transformDataCashBackSelections(data))
        .then(result => callback(undefined, result));
      return () => {};
    },

    tickets: (args, callback) => {
      getDataTickets(args)
        .then(data => transformDataTickets(data))
        .then(result => callback(undefined, result));
      return () => {};
    },

    matchEventSuggestedSelection: (args, callback) => {
      getDataMatchEventSuggestedSelection(args)
        .then(data => transformDataMatchEventSuggestedSelection(data))
        .then(result => callback(undefined, result));
      return () => {};
    },

    recommendedSelections: (args, callback) => {
      getDataRecommendedSelections(args)
        .then(data => transformDataRecommendedSelections(data))
        .then(result => callback(undefined, result));
      return () => {};
    },

    calculateCustomBetXML: (args, callback) => {
      getDataCalculateCustomBetXML(args)
        .then(data => transformDataCalculateCustomBetXML(data))
        .then(result => callback(undefined, result));
      return () => {};
    },
  },
};
</script>

Standard card with market name and outcome information.

{ integration: "button", modalPosition: "left" }

{ disableWidgetHeader: true }

<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'
    });

    const adapter = {
        endpoints: {
          event: (args, callback) => {
            console.log(args); // development-only: logs incoming request args so developers can inspect payloads (remove in production)

            callback(undefined, {
              event: {
                id: args.selection.event,
                isLive: false,
                date: {
                  displayValue: "2026-02-02 18:00",
                  startTime: "2026-02-02T18:00:00Z",
                },
                sport: { id: "sr:sport:1", name: "Soccer" },
                category: { id: "sr:category:1", name: "England" },
                tournament: { id: "sr:tournament:17", name: "Premier League" },
                teams: [
                  { id: "sr:competitor:1", name: "Manchester United" },
                  { id: "sr:competitor:2", name: "Liverpool" },
                ],
              },
            });
            return () => {};
          },
          market: (args, callback) => {
            console.log(args); // development-only: logs incoming request args so developers can inspect payloads (remove in production)

            callback(undefined, {
              event,
              markets: [
                {
                  id: "1",
                  name: "1x2",
                  status: "active",
                  outcomes: [
                    {
                      id: "1",
                      name: "Home",
                      status: "active",
                      odds: { type: 'eu', value: "1.85" },
                    },
                    {
                      id: "X",
                      name: "Draw",
                      status: "active",
                      odds: { type: 'eu', value: "3.40" },
                    },
                    {
                      id: "2",
                      name: "Away",
                      status: "active",
                      odds: { type: 'eu', value: "4.20" },
                    },
                  ],
                },
                {
                  id: "18",
                  name: "Total Goals",
                  specifiers: "total=1.5",
                  status: "active",
                  outcomes: [
                    {
                      id: "12",
                      name: "Over 2.5",
                      status: "active",
                      odds: { type: 'eu', value: "1.95" },
                    },
                    {
                      id: "13",
                      name: "Under 2.5",
                      status: "active",
                      odds: { type: 'eu', value: "1.85" },
                    },
                  ],
                },
              ],
            });
            return () => {};
          },
        },
      };

    SIR('registerAdapter', adapter);

    SIR('addWidget', '#bet-insights', 'betInsights', {
        matchId: 61591316,
        testMarkets: "1|18;total=0.5,total=1.5|8"
    });
</script>

<div id="bet-insights"></div>

#4. Mobile-First Layouts

In a mobile view, screen real estate is at a premium. The inline mode stacks naturally between other page elements, ensuring that the insights don't overlap or hide important UI components like the navigation bar or the "Place Bet" button.