Customizing Widget Tabs

Tabs are an important navigation element on many widgets. This tutorial shows you how to customize tab styling, icons, alignment, and behavior to match your design requirements.

#Audience

This tutorial is for developers and integrators who have already integrated Sportradar widgets into their website and want to customize the appearance and behavior of tab components. You should be familiar with:

• Basic widget integration concepts
• CSS styling and selectors
• JavaScript object configuration

#Goals

By completing this tutorial, you will learn how to:

• Configure tab display options (icon only, text only, or combined)
• Apply custom icons to tabs
• Control tab alignment and layout
• Style tabs using CSS classes
• Understand which tabs are available for each widget type

#Prerequisites

To complete this tutorial, you will need:

• A website with an integrated Sportradar widget that uses tabs (such as Live Match Tracker, Match Preview, Tournament Preview, or Head to Head widgets)
• Basic understanding of how to integrate widgets - see the Getting Started Guide
• Access to modify your website's HTML and CSS files
• A text editor for editing code

#Understanding Tab Configuration

Widget tabs are configured through the branding object when adding a widget. Tab customization happens in two namespaces:

• Global tabs settings - Applied directly under branding.tabs
• Widget-specific settings - Applied under branding.namespaces.avTabSwitcher.tabs

#Configuration Hierarchy

SIR('addWidget', '#container', 'match.preview', {
    matchId: 12345,
    branding: {
        tabs: {
            // Global tab settings apply here
            option: 'iconText',
            variant: 'standard'
        },
        namespaces: {
            avTabSwitcher: {
                tabs:

#Tab Configuration Options

The following configuration options control tab appearance and behavior. All settings are applied within the branding.tabs or branding.namespaces.avTabSwitcher.tabs object.

#Custom Styling With CSS

When useClientTheming is enabled (set to true), default styling is removed and specific CSS classes are applied for custom styling. This gives you complete control over tab appearance.

#Available CSS Classes

#Styling Example

/* Basic tab styling */
.sr-bb .srct-tab {
    background-color: #f5f5f5;
    color: #333;
}

/* Active tab styling */
.sr-bb .srct-tab--active {
    background-color: #ffffff;
    color: #1d4ed8;
}

/* Tab indicator styling */
.sr-bb

#Available Tabs by Widget

Different widgets use different sets of tabs. Below is a reference of which tab IDs are available for each widget type.

#Live Match Tracker

Available Tabs: statistics, detailedStatistics, headToHead, standings, timeline, lineups, boxscore, probabilities, pointByPoint, scorecard, leaderboard, avStream

Pitch Visualization Tabs (when layout: 'single' is set): pitchBadminton, pitchBaseball, pitchBasketball, pitchBeachVolleyball, pitchCricket, pitchDarts, pitchFutsal, pitchHandball, pitchHockey, pitchAmericanFootball, pitchRugby, pitchSnooker, pitchSoccer, pitchSquash, pitchTableTennis, pitchTennis, pitchVolleyball

#Match Preview

Available Tabs: matchInfo, leaders, lineups, standings, teamStats, leaderboard, playerProfile, ranking

#Tournament Preview

Available Tabs: overview, leaders, results, standings, teams

#Head to Head

Available Tabs: headToHead, form, teamStats, teamstatsmatch, lastMatches

#List of All Tabs and Default Icons

#Complete Implementation Example

This example demonstrates how to customize tabs for a Match Preview widget with custom styling, icons, and configuration.

#Step 1: Create HTML Structure

Create your HTML file with the widget container and necessary styling:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Match Preview Tabs Configuration</title>
        <style>
            .

#Step 2: Configure Widget With Tab Settings

Add the widget loader script and configuration:

        <script>
            (function (a, b, c,

#Step 3: Test Your Implementation

1. Replace matchId: 12345 with an actual match ID
2. Open the HTML file in a browser
3. Verify that:
   • Tabs appear with your custom styling
   • Icons and text are displayed correctly
   • Active tab has the correct appearance
   • Tab alignment matches your configuration

#Configuration Breakdown

Display Options:

• option: 'iconText' - Shows both icons and text labels
• iconPosition: 'start' - Places icons before text

Layout Options:

• variant: 'standard' - Tabs use minimum width (not full width)
• align: 'end' - Tabs are right-aligned

Styling:

• useClientTheming: true - Enables custom CSS classes (.srct-*)
• Custom CSS defines red background for inactive tabs, white for active tabs

Custom Icons:

• icons.avStream - Provides custom icon URL for the stream tab

#Common Customization Scenarios

#Icon-Only Tabs

For a minimal, icon-only interface:

SIR('addWidget', '#container', 'match.preview', {
    matchId: 12345,
    branding: {
        tabs: {
            option: 'icon',  // Show only icons
            variant: 'fullWidth'  // Expand to full width
        }
    }
});

#Text-Only Tabs

For a text-focused design:

SIR('addWidget', '#container', 'match.preview', {
    matchId: 12345,
    branding: {
        tabs: {
            option: 'text',  // Show only text
            variant: 'standard',
            align: 'center'  // Center the tabs
        }
    }
});

#Custom Icons for All Tabs

Replace default icons with your own:

SIR('addWidget', '#container', 'match.preview', {
    matchId: 12345,
    branding: {
        namespaces: {
            avTabSwitcher: {
                tabs: {
                    option: 'iconText',
                    icons: {
                        "matchInfo": "/path/to/info-icon.svg",
                        "lineups"

#Further Reading

• Widgets Theming - Comprehensive guide to widget theming and styling
• Match Preview Widget - Complete Match Preview widget documentation
• SIR API Reference - Full widget loader API documentation