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

Central Hub

#Overview

Central Hub is a social betting feature that enables users to share betslips, interact with other users, comment on bets, and manage their betting social network within the application. It serves as a comprehensive social layer for the betting experience.

To integrate the Central Hub widget, follow these steps:

  1. Include the Central Hub script loader in your HTML
  2. Configure authentication with JWT tokens
  3. Register your adapter (if using hosted adapter)
  4. Add Central Hub widgets to your page
  5. Customize the appearance and behavior as needed

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

info

If you are using the Virtual Stadium widget and you want to enable Central Hub, see Virtual Stadium Central Hub Feature.

#Include the Widget Loader

Before adding the Central Hub widget, you need to include the SIR widget loader script.

Script Initiation

See the Script Initiation section in the API documentation for detailed instructions on loading the SIR library and configuring global options.

#Integration

#Authenticated Central Hub Integration

Add the Central Hub widget for authenticated users to unlock the full social betting experience:

  • Bet placement directly from the widget
  • Personalized features tailored to each user
  • User-specific interactions and social engagement
tip

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 Authentication Configuration for details on JWT setup.

info

The jwt is a required attribute that needs to be set. See Widget Configuration for additional attributes.

Authenticated Widget Integration:

html
<html>
<head>
    <title>Central Hub 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="central-hub-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
         * before running this code.
         */
        SIR('addWidget', '#central-hub-container', 'centralHub', {
            jwt: 'your-jwt-token',
            // ... additional attributes as needed
        });
    </script>
</body>
</html>

#Feature Configuration

Features are enabled through widget properties. These features require additional adapter configuration or backend integration.

#Mandatory

  • Bet Share: Social betting features
  • Copy Bet Button: Bet sharing functionality
warning

To implement Central Hub correctly you need to support all of the features listed above.

#Widget Configuration

Central Hub 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.

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.

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
 * before running this code.
 */
SIR('addWidget', '#central-hub-container', 'centralHub', {
    jwt: 'your-jwt-token',
    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.

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.

drawerState object optional

Programmatically control which screens (drawers) are open in the Central Hub widget and configure their initial state.

Example — Open to Bets Tab:

javascript
SIR('addWidget', '#central-hub-container', 'centralHub', {
    jwt: 'your-jwt-token',
    drawerState: {
        screenName: 'centralHub',
        params: {
            activeTab: 'bets',
            filterBy: 'followerBets'
        }
    }
});

#Available Drawer States

Drawer states allow you to programmatically control which screen is displayed when the Central Hub widget loads. Each drawer represents a specific view or functionality within the Central Hub.

Key Concepts
  • screenName — Identifies which drawer/view to display
  • params — Optional parameters that configure the drawer's content and behavior
  • Initial State — Set on widget initialization to open directly to a specific view
  • Navigation — Users can navigate between drawers within the widget interface
Common Use Cases
  • Deep linking to specific user profiles or shared bets
  • Opening notification screens when a user clicks a notification
  • Directing users to specific tabs based on context (e.g., opening "My Bets" after bet placement)
  • Pre-filtering content based on URL parameters or user actions

#Main Hub Views

#Central Hub Home

The main dashboard that serves as the home screen for the social betting experience. Users can switch between two tabs:

  • Profile Tab — View and manage personal betting statistics, followers/following counts, and account settings
  • Bets Tab — Browse shared bets with advanced filtering and sorting options
javascript
drawerState: {
    screenName: 'centralHub',
    params:
        { activeTab: 'profile' } |
        {
            activeTab: 'bets',
            filterBy: 'all' | 'followerBets' | 'mySharedBets' |
                      'myConversations' | 'winningBets',
            sort: 'CREATED' | 'COMMENT_COUNT' | 'COPY_COUNT',
        }
}
Central Hub Profile

#Bet Sharing Screens

#Share Betslip List

Shows a list of available betslips that can be shared to the social feed. Users can select from their active or settled betslips to share with their followers.

javascript
drawerState: { screenName: 'shareBetslipList' }
Share Betslip List

#Share Betslip

Opens the betslip sharing interface where users can add a caption, review the bet details, and publish it for their followers to see and potentially copy.

Requires a betslip parameter containing the BetSlip object to be shared.

javascript
drawerState: {
    screenName: 'shareBetslip',
    params: {
        betslip: BetSlip
    }
}
Share Betslip

#Social Interaction Screens

#Betslip Commenting

Opens the conversation thread for a specific shared betslip. Users can view all comments, add new comments, and engage in discussions about the bet.

Requires a betShareId parameter to identify which shared bet's comments to display.

javascript
drawerState: {
    screenName: 'betslipCommenting',
    params: {
        betShareId: 'string'
    }
}
Betslip Commenting

#User Management Screens

#Users Management

Manage user relationships and discover new users to follow. This drawer provides three tabs:

  • Following — View all users that the current user follows
  • Followers — See who follows the current user
  • Search — Find and follow new users by username or display name

Requires a userId parameter to identify which user's relationships to display.

javascript
drawerState: {
    screenName: 'users',
    params: {
        activeTab: 'following' | 'followers' | 'search',
        userId: 'string',
        userDisplayName: 'string'
    }
}
Following Tab

#Other User Profile

Displays a detailed profile view of another user. Shows their shared bets and provides options to follow/unfollow. Typically opened when clicking on a username from a shared bet or user list.

Requires a userId parameter to identify which user's profile to display.

javascript
drawerState: {
    screenName: 'otherUserProfile',
    params: {
        userId: 'string'
    }
}
Other User Profile

#Edit User Profile

Allows users to modify their profile information including display name, avatar, bio, and other personal settings.

javascript
drawerState: { screenName: 'editUserProfile' }
Edit User Profile

#Notification Screens

#Comments Notifications

Displays all notifications related to comments on the user's shared bets — when someone comments on their bets or replies to their comments. Each notification links to the relevant betslip commenting screen.

javascript
drawerState: { screenName: 'commentsNotifications' }
Comments Notifications

#Betslips Notifications

Shows notifications related to betslip activity, including when users copy your bets or when followed users share new bets.

javascript
drawerState: { screenName: 'betslipsNotifications' }
Betslips Notifications

#Socials Notifications

Displays notifications about social interactions such as new followers, follow requests, and other user relationship events.

javascript
drawerState: { screenName: 'socialsNotifications' }
Social Notifications

#Onboarding Screens

#Central Hub First Time View

An onboarding screen shown to new users when they first access the Central Hub. Introduces key features and guides users through initial setup.

javascript
drawerState: { screenName: 'centralHubFirstTimeView' }
Central Hub First Time View

#Bets Section First Time View

An introductory screen displayed when users first navigate to the Bets tab. Explains how to browse shared bets, use filters, and engage with the betting community.

javascript
drawerState: { screenName: 'betsSectionFirstTimeView' }
Bets Section First Time View

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

Create Channels

Bet Share

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

View Docs

Copy Bet

Enable one-click bet copying so users can instantly replicate a shared bet slip.

View Docs

#Custom Adapter Path

Bet Share

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

View Docs

Copy Bet

Enable one-click bet copying so users can instantly replicate a shared bet slip.

View Docs
Last updated 14 days ago
Is this site helpful?
Virtual Stadium, Moderation, Engagement Tools
Button WidgetAdapter
On this page
  • Overview
  • Include the Widget Loader
  • Integration
  • Authenticated Central Hub Integration
  • Authenticated Configuration
  • Feature Configuration
  • Widget Configuration
  • Available Drawer States
  • Main Hub Views
  • Bet Sharing Screens
  • Social Interaction Screens
  • User Management Screens
  • Notification Screens
  • Onboarding Screens
  • Next Steps
  • Hosted Adapter Path
  • Custom Adapter Path