Complete API reference for the Bet Concierge widget with detailed parameter descriptions.

#API Reference

#onAction callback

Pass onAction function when you need to handle user events on bet concierge. The widget calls it with one argument: an object { type, data }.

• type — Which category of event occurred. Use this in a switch (or equivalent) as the first branch.
• data — Payload for that event. The shape depends on type.

#Action object

Each time the widget invokes your callback, it passes an object with the following fields:

#Action types

#CloseBetConcierge

Emitted when the user closes the widget from the header (X) button. Your integration should hide or unmount the widget (or navigate away), according to how you embedded it.

{
  source: "CloseSolution",
}

#DeclineTerms

Emitted when the user taps Decline on the terms screen. Treat it like a close action for your shell (hide the widget) and, if you track consent, record that terms were not accepted.

{
  source: "DeclineTerms",
  entityId: "sr:match:123456",
}

#ReadMoreTerms

Emitted when the user opens Read more on the 'Terms and conditions' screen. Set the enableTermsLink prop to true if this link should appear.

Example payload:

{
  source: "ReadMoreTerms",
  entityId: "sr:match:123456",
}

#AcceptTerms

Emitted when the user taps Agree on the 'Terms and conditions' screen. Persist consent in your app if required, then stop showing the terms screen by updating widget props (for example set termsPage to 'hidden').

Example payload:

{
  source: "AcceptTerms",
  entityId: "sr:match:123456",
}

#WidgetError

Emitted when the widget reports an error (for example JWT failure). You can use error / details for logging.

Example payload:

{
  error: "401 Error when requesting https://sportradar.com/status",
  details: "Client token exception - Invalid token",
}

#AddSelectionsToBetSlip

Emitted when the user selects an outcome from AI-suggested markets (full integration with bet suggestion). Use the IDs to add the selection to your bet slip (or remove selection from bet slip - if selection is already in the bet slip).

Example payload:

{
  selections: [
    {
      type: "uf",
      event: "sr:match:123456",
      market: "1",
      outcome: "3",
      odds: {
        type: "eu",
        value: "2.50",
      },
    },
  ];
}

#CustomBetAddToBetSlip

Emitted when 'Bet Combo' is enabled and the user adds a combo to the bet slip by clicking on 'Add to Betslip' button on the bet combo. Map selectedOutcomes into your bet slip.

Example payload:

{
  entityId: "sr:match:61623782",
  displayedOdds: "2.95",
  selectedOutcomes: [
    {
      marketId: "1",
      outcomeId: "1",
      marketName: "1x2",
      marketSpecifier: undefined,
      outcomeName: "Ceuta",
    },
    {
      marketId: "18",
      outcomeId: "12",
      marketName: "Total Goals",
      marketSpecifier: "total=0.5",
      outcomeName: "Over 0.5",
    },
  ],
}

#Example: handle all action types

onAction: function (action) {
  const { type, data } = action;
  switch (type) {
    case "Close": {
      if (data.source === "CloseSolution") {
        // Hide or destroy the widget container (header close).
      } else if (data.source === "DeclineTerms") {
        // User declined terms; hide widget and optionally record non-consent.
      }
      break;
    }
    case "Click": {
      if (data.source === "ReadMoreTerms") {
        // Open your full terms URL.
      } else if (data.source === "AcceptTerms") {
        // Persist acceptance and set termsPage so the terms screen stays hidden.
      }
      break;
    }
    case "Error": {
      // Surface data.error / data.details to the user or your logger.
      break;
    }
    case "AddSelectionsToBetSlip": {
      // Add data.selections to the bet slip.
      break;
    }
    case "CustomBetAddToBetSlip": {
      // Map data.selectedOutcomes to your bet slip (requires enableCustomBet).
      break;
    }
    default:
      // Optional: ignore or log unexpected types for forward compatibility.
      break;
  }
},

#getJwt()

Defines the structure of a callback promise function that retrieves a JWT token for user authentication. This function gets called when the Bet Concierge widget is initialized and when token refresh is needed.

// Example implementation of getJwt function:
function getJwt() {
  return fetch("https://example.com/api/get-jwt/user123")
    .then((response) => response.json())
    .then((data) => data.token); // Must resolve to the JWT string - assuming backend returns { "token": "..." }
}

#Widget Integration

This guide provides step-by-step instructions for integrating the Sportradar Bet Concierge widget into your website. It includes details about the required components, such as an adapter developed by Sportradar's engineering team, and options for custom theming. Following these instructions will help ensure a seamless integration and an improved user experience.

#Prerequisites

Before starting, ensure you have:

See Getting Identifiers for information on obtaining match IDs and authentication tokens.

#Integration Examples

The Bet Concierge widget can be integrated into your website using JavaScript. There are three levels of integration, each offering different features and requiring varying levels of development effort:

<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'
   });
   // Bet Concierge Widget
   SIR('addWidget', '.sr-bc-widget', 'betConcierge', {
        entityId: {ENTITY_ID},
        jwt: "{JWT}"
    });
</script>

async function getJwt() {
  const response = await fetch("/api/get-token");
  const data = await response.json();
  return data.jwt;
}

SIR("addWidget", ".sr-bc-widget", "betConcierge", {
  entityId: { ENTITY_ID },
  getJwt: getJwt,
});

<div class="bc-wrapper">
  <div class="sr-bc-widget"></div>
</div>

#Next Steps

Now that you have integration working, check Theming customization for custom styling.