Overview

BET 3-in-1 is a lightweight floating entry point designed to streamline the integration of Sportradar's fan engagement tools by providing a single, customizable gateway to Virtual Stadium, Bet Concierge, and StatsHub.

Instead of managing multiple widget integrations, BET 3-in-1 gives your users instant access to all enabled products through one unobtrusive button — keeping your page clean while maximising engagement.

#Why Choose BET 3-in-1?

#One Integration, Multiple Products

Instead of managing multiple widget integrations, BET 3-in-1 gives your users instant access to:

Virtual Stadium

Social interaction meets live match visualization. Keep fans engaged with real-time chat, interactive graphics, and community features that turn passive viewers into active participants.

Bet Concierge

AI-powered betting intelligence at your users' fingertips. Deliver personalized insights, smart suggestions, and data-driven recommendations that drive betting action and user satisfaction.

StatsHub

Deep statistical analysis for data-hungry users. Comprehensive match statistics, historical data, and performance metrics that inform smarter betting decisions.

#The User Experience

#Seamless & Intuitive

1. Default State

A floating button in a fixed position. There when needed, unobtrusive when not.

2. Smart Expansion

One click reveals up to three options in an animated menu.

3. Instant Engagement

Opens in an optimized modal on desktop or full-screen overlay on mobile.

#Key Benefits

#For Your Platform

• Maximize Screen Real Estate — One button instead of three separate widgets means more space for your core betting products and content.
• Flexible Licensing — Toggle products on/off based on your commercial agreements.
• Increased Engagement — Lower barrier to entry means more users discovering and using your premium features.

#For Your Users

• Clean Interface — No clutter, no confusion. A single button provides access to powerful features without overwhelming the page.
• Instant Access — Everything they need is just one click away — chat, AI insights, and statistics all in one convenient location.
• Enhanced Experience — Premium features presented in an intuitive, mobile-optimized interface that delights on every device.

#Customization & Branding

#Make It Yours

BET 3-in-1 is fully customizable to match your brand identity.

#Sport-Specific Theme Variants

The launcher trigger icon adapts automatically to the sport of the current match.

Soccer — Light

Soccer — Dark

Basketball — Light

Basketball — Dark

Tennis — Light

Tennis — Dark

Ice Hockey — Light

Ice Hockey — Dark

World Championship — Light

World Championship — Dark

#Getting Started

To initialize BET 3-in-1 (bet3in1), add the following code to your page:

<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/sportradar/widgetloader","SIR", {
        language: 'en'
    });
    // BET 3-in-1
    SIR('addWidget', '#sr-widget', 'bet3in1', {
        matchId: {MATCH_ID},
        products: {
            virtualStadium: {
                enabled: true,
                jwt: "{JWT}",
                channelId: "{CHANNEL_ID}",
                label: "Virtual Stadium",
                order: 1
            },
            betConcierge: {
                enabled: true,
                jwt: "{JWT}",
                label: "Bet Concierge",
                description: "AI Insights",
                order: 2
            },
            statsHub: {
                enabled: true,
                clientAlias: "{CLIENT_ALIAS}",
                label: "StatsHub",
                description: "Deep Stats",
                order: 3
            }
        }
    });
</script>
<div class="wl-wrapper">
    <div class="sr-wl-widget"></div>
</div>

Enable only the products you license — toggle individual products on/off with a simple configuration change.

#Required Parameters

• widget-name: bet3in1
• MATCH_ID — Sportradar Match ID. Example: 50955863
• JWT — String or getJwt callback promise returning a signed JSON Web Token. Required for Virtual Stadium and Bet Concierge. See JWT
• CHANNEL_ID — Virtual Stadium channel ID. Required when Virtual Stadium is enabled
• CLIENT_ALIAS — Your client alias for StatsHub URL generation. Required when StatsHub is enabled

#Product Configuration

#Adapter Registration

To enable betting functionality (e.g., adding a suggested bet from Bet Concierge to the betslip or using Flash Bet in Virtual Stadium), you must register an adapter. The adapter acts as a bridge between the Sportradar widget and your sportsbook's betslip API.

#Authentication

For Virtual Stadium and Bet Concierge to function correctly, you must pass a valid JSON Web Token (JWT) representing the authenticated user.

#StatsHub Configuration

StatsHub requires you to complete a setup document. Download the latest version from the StatsHub demo page to get started.

#Parameters

#Theming Customization

Theming customization allows you to tailor the appearance of the BET 3-in-1 to meet your specific needs and brand identity. Customization is achieved by applying custom CSS properties to the various HTML elements that make up the widget.

Widget comes with pre-existing styling but can be customized by applying custom CSS properties to its different HTML elements. The widget's custom class selectors are listed below. Note that all custom classes must be nested within the .sr-bb.sr-wl selector class. This ensures that the custom styles only apply to that widget and not to other elements on the page.

For general widget theming (colors, fonts, dark/light mode), see Widget Theming.

#Trigger Button

The main floating button that opens and closes the BET 3-in-1 menu.

#Container

The wrapper that controls the position of the expanded BET 3-in-1 menu.

#Product Buttons

The pill buttons displayed when the BET 3-in-1 is expanded. Use the base class to style all product buttons at once, or target individual products using their modifier classes.

#Product Button Elements

The inner elements of each product button.

#Product Overlay

The overlay panel that displays the selected product. Includes backdrop, header, and close controls.

#Example: Custom Brand Colors

.sr-bb.sr-wl .srct-3in1-trigger {
    background-color: #1a73e8;
}

.sr-bb.sr-wl .srct-3in1-productbutton--virtualstadium {
    background-color: #6c5ce7;
}

.sr-bb.sr-wl .srct-3in1-productbutton--betconcierge {
    background-color: #00b894;
}

.sr-bb.sr-wl .srct-3in1-productbutton--statshub {
    background-color: #fdcb6e;
    color: #2d3436;
}

#Example: Overlay Customization

.sr-bb.sr-wl .srct-3in1-productoverlay__content {
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.sr-bb.sr-wl .srct-3in1-productoverlay__backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

.sr-bb.sr-wl .srct-3in1-productoverlay__header {
    background-color: #1a1a2e;
    border-bottom: 1px solid #333;
}

#Related Resources