Central Hub

Central Hub | Virtual Stadium | API 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:

Include the Central Hub script loader in your HTML
Configure authentication with JWT tokens
Register your adapter (if using hosted adapter)
Add Central Hub widgets to your page
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.

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

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

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

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:54").

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

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.

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'

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' }

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

#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'
    }
}

#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'
    }
}

#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'
    }
}

#Edit User Profile

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

javascript

drawerState: { screenName: 'editUserProfile' }

#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' }

#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' }

#Socials Notifications

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

javascript

drawerState: { screenName: 'socialsNotifications' }

#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' }

#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' }

#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

Central Hub

#Overview

#Include the Widget Loader

#Integration

#Authenticated Central Hub Integration

#Authenticated Configuration

#Feature Configuration

#Mandatory

#Widget Configuration

#Available Drawer States

#Main Hub Views

#Central Hub Home

#Betslip Commenting

#User Management Screens

#Users Management

#Other User Profile

#Edit User Profile

#Notification Screens

#Comments Notifications

#Betslips Notifications

#Socials Notifications

#Onboarding Screens

#Central Hub First Time View

#Bets Section First Time View

#Next Steps

#Hosted Adapter Path

Configure Sportradar Entity IDs

Bet Share

Copy Bet

#Custom Adapter Path

Bet Share

Copy Bet

Central Hub

Central Hub

#Overview

#Include the Widget Loader

#Integration

#Authenticated Central Hub Integration

#Authenticated Configuration

#Feature Configuration

#Mandatory

#Widget Configuration

#Available Drawer States

#Main Hub Views

#Central Hub Home

#Bet Sharing Screens

#Share Betslip List

#Share Betslip

#Social Interaction Screens

#Betslip Commenting

#User Management Screens

#Users Management

#Other User Profile

#Edit User Profile

#Notification Screens

#Comments Notifications

#Betslips Notifications

#Socials Notifications

#Onboarding Screens

#Central Hub First Time View

#Bets Section First Time View

#Next Steps

#Hosted Adapter Path

Configure Sportradar Entity IDs

Bet Share

Copy Bet

#Custom Adapter Path

Bet Share

Copy Bet