Button Widget | Virtual Stadium

Button Widget | Virtual Stadium | API Hub

The Button Widget provides a floating call-to-action button that opens the Virtual Stadium experience. It displays real-time user counts and can be configured in two visual variants to fit your integration needs.

Key Features:

Real-time user count display
Compact and large display modes

#Prerequisites

Before integrating the Button Widget, ensure you have:

Widget Loader Integration - The Sportradar widget loader script must be integrated on your page
Channel ID - A valid Virtual Stadium channel ID
API Key - Your Sportradar API key for read-only access
Authentication (Optional) - JWT token for authenticated features

For complete setup instructions, see Getting Started.

#Live Demo

See the Button Widget in action: Working Example

#Basic Integration

#Minimal Setup

Add the Button Widget with minimal configuration. The widget will display the large variant by default with real-time user counts.

Basic Button Widget:

html

<script>
  SIR('addWidget', '#button-container', 'button', {
    channelId: 'your-channel-id',
    apiKey: 'your-api-key',
    onAction: function(value) {
        if (value.type === 'OpenVirtualStadium') {
            // load/open virtual stadium widget
        }
    }
  });
</script>

<div id="button-container"></div>

#Configuration

#Required Properties

channelId string required

The unique identifier for the Virtual Stadium channel this button will open.

apiKey string required

Your Sportradar API key for read-only mode. Used to fetch channel statistics like user counts.

Required Configuration:

javascript

{
  channelId: 'channel_123',
  apiKey: 'your-api-key'
}

#Optional Properties

buttonVariant 'large' | 'compact' optional

Controls the button's display size and content. Default: 'large'

'large' - Full button with icon, "Virtual Stadium" text, and user count
'compact' - Icon-only button for space-constrained layouts

onAction function optional

Callback function invoked when the button is clicked. Receives an action object with type and data properties.

Action Type: 'OpenVirtualStadium'

Parameters:

value.type - Action type identifier
value.data.source - Action source (e.g., 'OpenSolution')
value.data.channelId - The channel ID being opened

Button Variants:

javascript

// Large button (default)
{
    channelId: 'channel_123',
    apiKey: 'your-api-key',
    buttonVariant: 'large',
    onAction: function(value) {
        if (value.type === 'OpenVirtualStadium') {
            // load/open virtual stadium widget
        }
    }
}

// Compact button

#Button Variants

#Large Variant

The large variant displays the full button experience with:

Virtual Stadium icon
"Virtual Stadium" label
Real-time user count
User icon

Best for:

Desktop layouts
Prominent placement
When space is available
Primary call-to-action

Large Button:

javascript

SIR('addWidget', '#button-large', 'button', {
    channelId: 'channel_123',
    apiKey: 'your-api-key',
    buttonVariant: 'large',
    onAction: function(value) {
        if (value.type === 'OpenVirtualStadium') {
            // load/open virtual stadium widget
        }
    });

#Compact Variant

The compact variant displays only the Virtual Stadium icon, providing a minimal footprint.

Best for:

Mobile layouts
Space-constrained areas
Secondary placement
Floating buttons

Compact Button:

javascript

SIR('addWidget', '#button-compact', 'button', {
    channelId: 'channel_123',
    apiKey: 'your-api-key',
    buttonVariant: 'compact',
    onAction: function(value) {
        if (value.type === 'OpenVirtualStadium') {
            // load/open virtual stadium widget
        }
    }
})

#Complete Integration Example

Here's a complete example showing the Button Widget integrated with the Virtual Stadium widget. When users click the button, the Virtual Stadium experience opens.

Complete Integration:

html

<!DOCTYPE html>
<html>
<head>
  <title>Virtual Stadium Button</title>
</head>
<body>
  <!-- Widget Loader -->
  <script

#Responsive Design

#Adapting to Screen Size

Consider switching between button variants based on screen size for optimal user experience.

Recommended approach:

Desktop (>768px): Use 'large' variant
Mobile (<768px): Use 'compact' variant

You can implement this using CSS media queries for positioning or by dynamically changing the widget configuration.

Responsive Button:

javascript

// Store widget configuration
const buttonConfig = {
  channelId: 'your-channel-id',
  apiKey: 'your-api-key',
  buttonVariant: window.innerWidth < 768 ? 'compact' : 'large',
  onAction: function(value) {
    if

#Best Practices

Positioning - Place the button in a visible, accessible location (e.g., bottom-right corner as a floating button)
Variant Selection - Choose the variant that best fits your layout without overwhelming the page
Multiple Channels - If you have multiple channels, use separate buttons with different channelId values
Error Handling - Implement fallback behavior if the widget fails to load
Accessibility - Ensure the button is keyboard accessible and has appropriate ARIA labels

Best Practices Example:

javascript

// Good: Floating button placement
const buttonContainer = document.createElement('div');
buttonContainer.id = 'vs-button';
buttonContainer.style.cssText = `
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
`