Skip to main content
Logo
Explore APIsContact Us
  • Home
  1. Resources
  3. Virtual Stadium
  5. Button Widget

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
Button Widget

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

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
{
    channelId: 'channel_123',
    apiKey: 'your-api-key',
    buttonVariant: 'compact',
    onAction: function(value) {
        if (value.type === 'OpenVirtualStadium') {
            // load/open virtual stadium widget
        }
    }
}

#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>
    (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/<clientId>/widgetloader", "SIR", {
      language: "en",
    });
    
    // Add Button Widget
    SIR('addWidget', '#vs-button', 'button', {
      channelId: 'your-channel-id',
      apiKey: 'your-api-key',
      buttonVariant: 'large',
      onAction: function(value) {
        if (value.type === 'OpenVirtualStadium') {
          // Remove button widget
          SIR('removeWidget', '#vs-button');
          
          // Add Virtual Stadium widget
          SIR('addWidget', '#vs-container', 'virtualStadium', {
            // ... 
          });
        }
      }
    });
  </script>
  
  <!-- Button Container -->
  <div id="vs-button"></div>
  
  <!-- Virtual Stadium Container -->
  <div id="vs-container"></div>
</body>
</html>

#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 (value.type === 'OpenVirtualStadium') {
      // load/open virtual stadium widget
    }
  }
};

// Add widget with initial configuration
SIR('addWidget', '#vs-button', 'button', buttonConfig);

// Update on window resizewindow.addEventListener('resize', () => {
  const isMobile = window.innerWidth < 768;
  const newVariant = isMobile ? 'compact' : 'large';
  
  // Only update if variant changed
  if (buttonConfig.buttonVariant !== newVariant) {
    buttonConfig.buttonVariant = newVariant;
    
    // Update widget with complete configuration
    SIR('updateWidget', '#vs-button', buttonConfig);
  }
});

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

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;
`;
document.body.appendChild(buttonContainer);

SIR('addWidget', '#vs-button', 'button', {
  channelId: 'your-channel-id',
  apiKey: 'your-api-key',
  buttonVariant: window.innerWidth < 768 ? 'compact' : 'large',
x  onAction: function(value) {
    if (value.type === 'OpenVirtualStadium') {
      // load/open virtual stadium widget
    }
  }
});

// Good: Multiple channels
const channels = ['channel-1', 'channel-2'];
channels.forEach((channelId, index) => {
  SIR('addWidget', `#button-${index}`, 'button', {
    channelId,
    apiKey: 'your-api-key',
    onAction: function(value) {
      if (value.type === 'OpenVirtualStadium') {
        // load/open virtual stadium widget
      }
    }
  });
});
Last updated about 1 month ago
Is this site helpful?
Virtual Stadium, Moderation, Engagement Tools
VIPCentral Hub Widget
On this page
  • Prerequisites
  • Live Demo
  • Basic Integration
  • Minimal Setup
  • Configuration
  • Required Properties
  • Optional Properties
  • Button Variants
  • Large Variant
  • Compact Variant
  • Complete Integration Example
  • Responsive Design
  • Adapting to Screen Size
  • Best Practices