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

#Include the Widget Loader

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

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

Authenticated Widget Integration:

<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

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

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:

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:

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

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.

#Main Hub Views

#Central Hub Home

drawerState: {
    screenName: 'centralHub',
    params:
        { activeTab: 'profile' } |
        {
            activeTab: 'bets',
            filterBy: 'all' | 'followerBets' | 'mySharedBets' |
                      'myConversations' | 'winningBets'

#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

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

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

#User Management Screens

#Users Management

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

#Custom Adapter Path