Quick Start

Get started quickly with Virtual Stadium widgets by following this comprehensive integration guide. This guide covers the essential steps to integrate Virtual Stadium into your application.

#Overview

To integrate Virtual Stadium widgets:

1. Include the Virtual Stadium script loader in your HTML
2. Configure authentication with JWT tokens and channel information
3. Register your adapter (depending on adapter type integration this step can be skipped)
4. Add Virtual Stadium widgets to your page
5. Customize the appearance and behavior as needed

This guide will walk you through each step with code examples and best practices.

#Include the Widget Loader

Before adding Virtual Stadium widgets, you need to include the SIR widget loader script. See the Script Initiation section in the API documentation for detailed instructions on loading the SIR library and configuring global options.

#Read-Only Mode Integration

Add Virtual Stadium widgets in read-only mode when you don't have user authentication. This mode allows users to view chat and match information without placing bets or interacting with betting features.

For detailed API method documentation, see the SIR API Reference.

#Read-Only Configuration

apiKey string required

API key for read-only access (obtained from moderation tool). See Moderation Tool Setup Steps for instructions on generating API keys.

channelId string required

Unique identifier for your chat channel. See Moderation Tool Setup Steps for instructions on creating channels.

Read-Only Mode Integration:

<html>
<head>
    <!-- Virtual Stadium Script Loader -->
    <script>
        /**
         * TODO(developer): Replace <CLIENT_ID> with your actual client ID
         *   provided by Sportradar before running this code.
         */
        (function(

#Integration Mode Using User Authentication

Add Virtual Stadium widgets for authenticated users with full betting functionality. This is the standard integration mode that enables bet placement, user-specific features, and personalized experiences.

For detailed API method documentation, see the SIR API Reference.

#Authenticated Configuration

jwt string required

Client's JWT token for authenticated access and betting functionality. See Authenticated Configuration for details on JWT setup.

channelId string required

Unique identifier for your chat channel. See Moderation Tool Setup Steps for instructions on creating channels.

Authenticated Widget Integration:

<html>
<head>
    <title>Virtual Stadium Integration</title>
    <!-- Virtual Stadium Script Loader -->
    <script>
        /**
         * TODO(developer): Replace <CLIENT_ID> with your actual client ID

#Widget Configuration

Virtual Stadium widgets support various configuration options to customize appearance, behavior, and functionality.

jwt string optional

Client's JWT token for authenticated access and betting functionality. See Authentication Configuration for details on JWT setup.

apiKey string optional

API key for read-only mode. Either jwt or apiKey must be provided. See Moderation Tool Setup Steps for instructions on generating API keys.

channelId string required

Unique identifier for your chat channel. See Moderation Tool Setup Steps for instructions on creating channels.

bookmakerThemeVersion string | object optional

Bookmaker branding and theming configuration.

Bookmaker Theme Configuration:

bookmakerThemeVersion: {
    backgroundColor: '#1a1a1a',
    textColor: '#ffffff',
    oddNameBackgroundColor: '#333333',
    oddNameTextColor: '#ffffff',
    oddValueBackgroundColor: '#007bff',
    oddValueTextColor: '#ffffff',
    logoImage: 'https://example.com/logo.png',
    hasBorder: true
}

avatarGeneratorConfiguration object optional

Configuration for avatar color generation based on user ID.

saturation number required

Saturation value for avatar colors (0-100).

lightness number required

Lightness value for avatar colors (0-100).

range number required

Color range for avatar generation.

Avatar Generator Configuration:

avatarGeneratorConfiguration: {
    saturation: 0.7,
    lightness: 0.5,
    range: 360
}

isRelativeTimeFormat boolean optional

Controls time display format. Default is relative format ("4m ago"). Set to false for absolute time ('12:54').

dateFormat 'narrow' | 'short' | 'long' optional

Defines date format style. Default is 'narrow'. Use 'long' for better readability in some languages.

disableHeader boolean optional

Disables the widget header (top bar) including scoreboard and competition container.

disableNavigation boolean optional

Disables navigation elements like back buttons.

disableScoreboard boolean optional

Hides the scoreboard component in the header.

disablePitchClock boolean optional

Disables the Pitch Clock component.

disableShareBet boolean optional

Hides the Share Bet button.

disableChat boolean optional

Hides the message input. Also hides option to quote messages in the chat and express opinions when sharing a new bet.

hideCompetitionContainer boolean optional

Hides the competition container in the header.

liveColorMode 'disabled' | 'automatic' | 'live' optional

Controls live match color styling. 'automatic' uses Sportradar data, 'live' forces live colors, 'disabled' turns off.

lmtVariant 'disabled' | 'compact' | 'full' optional

Configures Live Match Tracker display variant. See LMT Full Mode and LMT Compact Mode documentation for details.

enableLiveFeed boolean optional

Enables video streaming via Live Match Tracker (requires valid JWT with 'av' scope). For more information see LMT Documentation.

enableStreamLcp boolean optional

Enables Stream LCP component (requires valid JWT with 'av' scope). For more information see LMT Documentation.

enableBetInsights boolean optional

Enables the Bet Insights component for betting analytics (requires adapter implementation).

enableFlashBet boolean optional

Enables the Flashbet module for quick betting (requires adapter implementation).

forceExternalSelections boolean optional

When true, Flash Bet and Bet Insights use external (bookmaker) selection IDs on outcome clicks when mapping is available — that is, when a mapper exists (V2 adapter selectionUfToExternal or widgetloader adapterDataSource: 'f3'). If mapping is unavailable or fails, the payload uses UF ids. Default is false. V1 adapter integrations are unchanged. Enable when your bet slip expects external outcome, market, and event identifiers.

Details: Flash Bet · Bet Insights

Use external selection IDs when mapping is available:

SIR('addWidget', '#sr-vs-widget', 'virtualStadium', {
    enableFlashBet: true,
    enableBetInsights: true,
    forceExternalSelections: true,
    onAction: onAction,
    // ... other configuration
});

enableCopyBetButton boolean optional

Enables the "Copy Bet" button functionality (requires onAction implementation).

enableContactSupportButton boolean optional

Enables the "Contact Support" button (requires onAction implementation).

shareNewBetButtonPosition 'top' | 'bottom' optional

Controls position of the "Share New Bet" button. Default is 'top'.

enableChannelLink boolean optional

Allows navigation between channels via channel tags. Default is true.

Channel linking enabled (default):

Channel linking disabled:

onAction function optional

Callback function triggered when specific events occur in the widget (bet placement, navigation, etc.).

onTrack function optional

Tracking callback function invoked whenever specified events occur in the widget. Events include data changes, user interactions, and errors.

Event Types:

• data_change - Widget receives new data or encounters an error
• odds_click - User clicks on an odds button
• social_share - User clicks on social share button
• license_error - Widget returns a licensing error

Parameters:

• eventType (string) - Type of triggered event
• data (object) - Relevant data depending on event type

Tracking Events:

/**
 * TODO(developer): Replace 'your-jwt-token' with your actual JWT token
 * and 'your-channel-id' with your actual channel ID before running this code.
 */
SIR('addWidget', '#virtual-stadium-container', 'virtualStadium', {
    jwt: 'your-jwt-token',
    channelId: 'your-channel-id',
    onTrack: function(eventType, data) {
        console.log

onDataChange function optional

Callback function triggered when widget data changes.

contactSupport function optional

Deprecated. Use onAction and enableContactSupportButton instead.

testMarkets string optional

Pipe-separated market IDs for testing specific market configurations (e.g., '7|8|12').

dbg boolean optional

Enables additional debugging options and verbose logging.

Features are enabled through widget properties. Some features require additional adapter configuration or backend integration.

#Available Features

• Live Match Tracker: Advanced match tracking with video streaming

  • lmtVariant - Configure display variant
  • enableLiveFeed - Enable video streaming
  • enableStreamLcp - Enable Stream LCP component

• Flashbet: Quick betting functionality

  • enableFlashBet - Enable Flashbet module

• Bet Insights: Betting analytics and insights

  • enableBetInsights - Enable Bet Insights component

• External selection IDs (Flash Bet & Bet Insights)

  • forceExternalSelections - Use external selection IDs on outcome clicks when mapping is available

• Bet Share: Social betting features

  • shareNewBetButtonPosition - Configure button position

• Copy Bet Button: Bet sharing functionality

  • enableCopyBetButton - Enable copy bet button

• Contact Support Button: Customer support integration

#Next Steps

For optimal integration, implement features in this recommended order based on your chosen adapter approach:

#Hosted Adapter Path

#Custom Adapter Path

• enableContactSupportButton - Enable contact support button
• onAction - Handle support actions