Button Widget

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:

1. Widget Loader Integration - The Sportradar widget loader script must be integrated on your page
2. Channel ID - A valid Virtual Stadium channel ID
3. API Key - Your Sportradar API key for read-only access
4. 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:

<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
        }
    }
  });

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

{
  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:

// 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:

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:

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:

<!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:

// 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

1. Positioning - Place the button in a visible, accessible location (e.g., bottom-right corner as a floating button)

2. Variant Selection - Choose the variant that best fits your layout without overwhelming the page

3. Multiple Channels - If you have multiple channels, use separate buttons with different channelId values

4. Error Handling - Implement fallback behavior if the widget fails to load

5. Accessibility - Ensure the button is keyboard accessible and has appropriate ARIA labels

Best Practices Example:

// 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;