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:

Include the Virtual Stadium script loader in your HTML
Configure authentication with JWT tokens and channel information
Register your adapter (if using hosted adapter)
Add Virtual Stadium widgets to your page
Customize the appearance and behavior as needed

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

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.

info

The apiKey and channelId are minimum required attributes that need to be set. See Widget Configuration for additional attributes.

Read-Only Mode Integration:

html

<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(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/<CLIENT_ID>/widgetloader", "SIR", {
                language: "en"
            });
    </script>
</head>
<body>
    <div id="virtual-stadium-container"></div>

    <script>
        // SIR function is available immediately and queues actions until DOM is ready
        /**
         * TODO(developer): Replace 'your-api-key' with your actual API key
         * and 'your-channel-id' with your actual channel ID before running this code.
         */
        SIR('addWidget', '#virtual-stadium-container', 'virtualStadium', {
            apiKey: 'your-api-key',
            channelId: 'your-channel-id'
            // ... additional attributes as needed
        });
    </script>
</body>
</html>

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

info

The jwt and channelId are minimum required attributes that need to be set. See Widget Configuration for additional attributes.

warning

To implement chat only functionality without adapter integration please set disableShareBet prop to true to hide the share bet button as it requires the adapter integration to work properly.

Authenticated Widget Integration:

html

<html>
<head>
    <title>Virtual Stadium Integration</title>
    <!-- Virtual Stadium Script Loader -->
    <script>
        /**
         * TODO(developer): Replace <CLIENT_ID> with your actual client ID
         * provided by Sportradar before running this code.
         */
        (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/<CLIENT_ID>/widgetloader", "SIR", {
                language: "en"
            });
    </script>
</head>
<body>
    <div id="virtual-stadium-container"></div>

    <script>
        // SIR function is available immediately and queues actions until DOM is ready
        /**
         * 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'
            // ... additional attributes as needed
        });
    </script>
</body>
</html>

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:

javascript

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:

javascript

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

').

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.

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

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:

javascript

/**
 * 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('Event:', eventType, data);
        
        // Track with analytics service
        analytics.track('widget_event', {
            event_type: eventType,
            widget_data: data
        });
    }
});

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
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
- enableContactSupportButton - Enable contact support button
- onAction - Handle support actions

#Next Steps

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

#Hosted Adapter Path

Configure Sportradar Entity IDs

Set Sportradar entity IDs on your channels. This is a prerequisite for LMT, Flash Bet, and Bet Insights features.

Create Channels

Bet Share

Allow users to share their bets on social media and with other users directly from the widget.

#Overview

#Include the Widget Loader

#Read-Only Mode Integration

#Read-Only Configuration

#Integration Mode Using User Authentication

#Authenticated Configuration

#Widget Configuration

#Available Features

#Next Steps

#Hosted Adapter Path

Configure Sportradar Entity IDs

Bet Share

Copy Bet

Contact Support

#Custom Adapter Path

Live Match Tracker

Bet Share

Copy Bet

Flash Bet

Bet Insights

Contact Support

Quick Start

#Overview

#Include the Widget Loader

#Read-Only Mode Integration

#Read-Only Configuration

#Integration Mode Using User Authentication

#Authenticated Configuration

#Widget Configuration

#Available Features

#Next Steps

#Hosted Adapter Path

Configure Sportradar Entity IDs

Bet Share

Copy Bet

Contact Support

#Custom Adapter Path

Live Match Tracker

Bet Share

Copy Bet

Flash Bet

Bet Insights

Contact Support