---
title: "Button Widget"
canonical_url: "https://apidocs.sportradar.com/resources/virtual-stadium/docs/web/widgets/button/quickStart"
markdown_url: "https://apidocs.sportradar.com/resources/virtual-stadium/docs/web/widgets/button/quickStart.md"
last_updated: "2026-02-25T08:49:25Z"
---

# 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](https://apidocs.sportradar.com/resources/virtual-stadium/static/static/img/widget-button.png)

***

## 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](https://apidocs.sportradar.com/resources/virtual-stadium/docs/web/overview.md).

## Live Demo

See the Button Widget in action: [Working Example](https://widgets.sir.sportradar.com/demo/borg#page:\(status:inPlay\),settings:\(lmtVersion:lmtVirtualisedLight\))

***

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