API Reference

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

#API Reference

Property	Type	Required	Default	Description
`matchId`	`number`	Yes	-	Sportradar match identifier. See Getting Identifiers.
`jwt` `getJwt`	`string` `function` `getJwt`	Yes	-	User's JWT Token or a callback promise function that returns user's JWT Token for authentication. Either `jwt` or `getJwt` must be provided.
`numberOfSuggestedQuestions`	`number`	No	`3`	Number of suggested questions (conversation starters) to display for each category. Range: 0-5. Set to 0 to hide suggestions entirely.
`isInline`	`boolean`	No	`false`	When `true`, enables inline mode without close button.
`disableHeader`	`boolean`	No	`false`	When `true`, hides widget header.
`disableHomeLink`	`boolean`	No	`false`	When `true`, hides home navigation link in header.
`disableCoverage`	`boolean`	No	`false`	When `true`, hides match coverage information. Coverage displays information about the data availability for the selected match and bet concierge capabilities in answering questions about that match.
`disableChatHistory`	`boolean`	No	`false`	When `true`, disables chat history stored in local storage. Chat history is stored for each matchId separately with expiration time set to 1 day.
`termsPage`	`string`	No	`"hidden"`	Controls terms page display. Options: `"hidden"`: Never show terms page `"visible"`: Always show terms page `"visibleOnEmptyChat"`: Show only when there are no messages in the chat history Terms and conditions page is meant to be displayed on the widget load. When user clicks on `agree` or `decline` buttons, `AcceptTerms` & `DeclineTerms` click actions are handled in the onAction function. Client is expected to handle these actions and show/hide 'termsPage' in the widget accordingly.
`enableTermsLink`	`boolean`	No	`false`	When `true`, displays terms and conditions link
`enableCustomBet`	`boolean`	No	`false`	Set this prop to `true` when implementing Custom Bet feature. This will enable `calculateCbXml` adapter call.
`enableInsights`	`boolean`	No	`true`	When `true`, the widget will display insights on the start screen to users, providing them with valuable information and enhancing their engagement.
`enableMarketQuestions`	`boolean`	No	`false`	When `true`, the widget will display AI-generated market based questions on the start screen to users, enhancing their engagement and interaction with the available betting options.
`onAction`	function `OnActionInterface`	No		Handles application-wide actions by routing them to the appropriate logic based on the action type.

#OnActionInterface

Defines the structure of an action object that can be dispatched in the application. Each action includes:

Property	Type	Attributes	Description
`type`	`string \| number`	Required	A string literal from `TriggerActionEnum` signifying the kind of event (e.g., `'Close'`, `'Click'`, `'BetConciergeOutcome'`).
`data`	`string \| Object`	Optional	An optional payload that provides additional information needed to handle the action. This can be an object, string, or undefined if no extra data is needed.

javascript

// A complete switch-case example illustrating multiple action types:
onAction: function(action) {
    switch (action.type) {
        case 'Close': {
            const { data } = action;
            // ... implement logic to close the widget
            break;
        }
        case 'Click': {
            const { data } = action;
            // ... implement logic for handling terms link or statistics link clicks
            break;
        }
        case 'Error': {
            const { data } = action;
            // ... implement logic for handling widget errors
            break;
        }
        case 'BetConciergeOutcome': {
            const { data } = action;
            // ... implement logic for handling clicks on AI market suggestions
            break;
        }
        // ... add new cases here for other actions
        default:
            // Handle unknown or unanticipated action types
            console.warn(`Unknown action type: ${action.type}`);
            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.

javascript

// 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": "..." }
}

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:

info

Match ID: The Sportradar match identifier for the event. Example: 50955863.
JWT Authentication: Either a static JWT token or a function to retrieve one. See tutorial on how to create and use JWT.
Client ID: Your Sportradar client id. Don't have Client ID? Please read how to get one.

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:

This is the simplest option and requires minimal development effort. It includes an interactive AI chat widget that can answer all stats-related queries.

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

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

Step 1: Add Widgetloader

Add the widgetloader script to your HTML page:

html

<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', {
        matchId: {MATCH_ID},
        jwt: "{JWT}"
    });
</script>

Replace sportradar in the widgetloader URL path with your clientId, MATCH_ID with Sportradar match id and JWT with your JSON Web Token.

JWT can be provided as string or a callback promise function that returns string with signed JSON Web Token.

Dynamic JWT Function

javascript

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

  SIR('addWidget', '.sr-bc-widget', 'betConcierge', {
    matchId: {MATCH_ID}, 
    getJwt: getJwt
  });

Step 2: Create a Widget Container

Add a container element where the widget will be displayed:

html

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

That's it! The Bet Concierge widget is now live on your page.

#Next Steps

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

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

#API Reference

Property	Type	Required	Default	Description
`matchId`	`number`	Yes	-	Sportradar match identifier. See Getting Identifiers.
`jwt` `getJwt`	`string` `function` `getJwt`	Yes	-	User's JWT Token or a callback promise function that returns user's JWT Token for authentication. Either `jwt` or `getJwt` must be provided.
`numberOfSuggestedQuestions`	`number`	No	`3`	Number of suggested questions (conversation starters) to display for each category. Range: 0-5. Set to 0 to hide suggestions entirely.
`isInline`	`boolean`	No	`false`	When `true`, enables inline mode without close button.
`disableHeader`	`boolean`	No	`false`	When `true`, hides widget header.
`disableHomeLink`	`boolean`	No	`false`	When `true`, hides home navigation link in header.
`disableCoverage`	`boolean`	No	`false`	When `true`, hides match coverage information. Coverage displays information about the data availability for the selected match and bet concierge capabilities in answering questions about that match.
`disableChatHistory`	`boolean`	No	`false`	When `true`, disables chat history stored in local storage. Chat history is stored for each matchId separately with expiration time set to 1 day.
`termsPage`	`string`	No	`"hidden"`	Controls terms page display. Options: `"hidden"`: Never show terms page `"visible"`: Always show terms page `"visibleOnEmptyChat"`: Show only when there are no messages in the chat history Terms and conditions page is meant to be displayed on the widget load. When user clicks on `agree` or `decline` buttons, `AcceptTerms` & `DeclineTerms` click actions are handled in the onAction function. Client is expected to handle these actions and show/hide 'termsPage' in the widget accordingly.
`enableTermsLink`	`boolean`	No	`false`	When `true`, displays terms and conditions link
`enableCustomBet`	`boolean`	No	`false`	Set this prop to `true` when implementing Custom Bet feature. This will enable `calculateCbXml` adapter call.
`enableInsights`	`boolean`	No	`true`	When `true`, the widget will display insights on the start screen to users, providing them with valuable information and enhancing their engagement.
`enableMarketQuestions`	`boolean`	No	`false`	When `true`, the widget will display AI-generated market based questions on the start screen to users, enhancing their engagement and interaction with the available betting options.
`onAction`	function `OnActionInterface`	No		Handles application-wide actions by routing them to the appropriate logic based on the action type.

#OnActionInterface

Defines the structure of an action object that can be dispatched in the application. Each action includes:

Property	Type	Attributes	Description
`type`	`string \| number`	Required	A string literal from `TriggerActionEnum` signifying the kind of event (e.g., `'Close'`, `'Click'`, `'BetConciergeOutcome'`).
`data`	`string \| Object`	Optional	An optional payload that provides additional information needed to handle the action. This can be an object, string, or undefined if no extra data is needed.

javascript

// A complete switch-case example illustrating multiple action types:
onAction: function(action) {
    switch (action.type) {
        case 'Close': {
            const { data } = action;
            // ... implement logic to close the widget
            break;
        }
        case 'Click': {
            const { data } = action;
            // ... implement logic for handling terms link or statistics link clicks
            break;
        }
        case 'Error': {
            const { data } = action;
            // ... implement logic for handling widget errors
            break;
        }
        case 'BetConciergeOutcome': {
            const { data } = action;
            // ... implement logic for handling clicks on AI market suggestions
            break;
        }
        // ... add new cases here for other actions
        default:
            // Handle unknown or unanticipated action types
            console.warn(`Unknown action type: ${action.type}`);
            break;
    }
}

#getJwt()

javascript

// 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": "..." }
}

#Prerequisites

Before starting, ensure you have:

info

Match ID: The Sportradar match identifier for the event. Example: 50955863.
JWT Authentication: Either a static JWT token or a function to retrieve one. See tutorial on how to create and use JWT.
Client ID: Your Sportradar client id. Don't have Client ID? Please read how to get one.

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

#Integration Examples

This is the simplest option and requires minimal development effort. It includes an interactive AI chat widget that can answer all stats-related queries.

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

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

Step 1: Add Widgetloader

Add the widgetloader script to your HTML page:

html

<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', {
        matchId: {MATCH_ID},
        jwt: "{JWT}"
    });
</script>

Replace sportradar in the widgetloader URL path with your clientId, MATCH_ID with Sportradar match id and JWT with your JSON Web Token.

JWT can be provided as string or a callback promise function that returns string with signed JSON Web Token.

Dynamic JWT Function

javascript

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

  SIR('addWidget', '.sr-bc-widget', 'betConcierge', {
    matchId: {MATCH_ID}, 
    getJwt: getJwt
  });

Step 2: Create a Widget Container

Add a container element where the widget will be displayed:

html

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

That's it! The Bet Concierge widget is now live on your page.

#Next Steps

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

#API Reference

#OnActionInterface

#getJwt()

#Widget Integration

#Prerequisites

#Integration Examples

JavaScript/Programmatic Integration

HTML/Declarative Integration

Step 1: Add Widgetloader

Dynamic JWT Function

Step 2: Create a Widget Container

#Next Steps

API Reference

#API Reference

#OnActionInterface

#getJwt()

#Widget Integration

#Prerequisites

#Integration Examples

JavaScript/Programmatic Integration

HTML/Declarative Integration

Step 1: Add Widgetloader

Dynamic JWT Function

Step 2: Create a Widget Container

#Next Steps