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

info

Tab customization is performed through the branding configuration object when adding a widget with the SIR function.

#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

javascript

SIR('addWidget', '#container', 'match.preview', {
    matchId: 12345,
    branding: {
        tabs: {
            // Global tab settings apply here
            option: 'iconText',
            variant: 'standard'
        },
        namespaces: {
            avTabSwitcher: {
                tabs: {
                    // Widget-specific overrides apply here
                    align: 'center',
                    useClientTheming: true
                }
            }
        }
    }
});

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

Property	Type	Options	Description
`option`	string	`iconText`, `icon`, `text`	Controls what content appears in tabs: • `iconText` - Display both icon and text • `icon` - Display only icons • `text` - Display only text labels
`variant`	string	`fullWidth`, `standard`	Controls horizontal space usage: • `fullWidth` - Tabs expand to fill available width • `standard` - Tabs use minimum required width
`align`	string	`start`, `center`, `end`	Horizontal alignment when `variant` is `standard`: • `start` - Left-aligned • `center` - Center-aligned • `end` - Right-aligned
`iconPosition`	string	`start`, `end`	Icon placement when `option` is `iconText`: • `start` - Icon before text • `end` - Icon after text
`icons`	object	Tab ID to URL mapping	Custom icon paths for specific tabs. See Available Tabs for tab IDs
`arrowIcon`	string	Image URL	Path to custom arrow/indicator icon file
`useClientTheming`	boolean	`true`, `false`	When `true`, removes default styling and applies `.srct-` CSS classes for custom styling. See CSS Classes

tip

Use useClientTheming: true when you want complete control over tab styling with your own CSS. This disables default theme styles and applies classes prefixed with .srct- for easier customization.

#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

CSS Class	Applied To	Description
`.srct-tabs`	Tabs container	Wrapper element containing all tabs
`.srct-tab`	Individual tab	Each tab element
`.srct-tab__content`	Tab content wrapper	Container for icon, text, and indicator
`.srct-tab--active`	Active tab	Applied to the currently selected tab
`.srct-tab__indicator`	Tab indicator	Visual indicator element (typically underline)
`.srct-tab__indicator--active`	Active indicator	Indicator of the active tab
`.srct-tab__arrow`	Arrow element	Navigation arrow icon
`.srct-tab__text-label`	Text label	Tab text content
`.srct-tab__icon`	Icon element	Tab icon image

#Styling Example

css

/* Basic tab styling */
.sr-bb .srct-tab {
    background-color: #f5f5f5;
    color: #333;
    padding: 12px 20px;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
}

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

/* Tab indicator styling */
.sr-bb .srct-tab__indicator--active {
    background-color: #1d4ed8;
    height: 3px;
}

/* Icon styling */
.sr-bb .srct-tab__icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

warning

All widget styles must be scoped within the .sr-bb container class to ensure proper isolation and prevent conflicts with your site's CSS.

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

Tab ID	Matching Icon
statistics / teamStats
headToHead
standings
timeline / plays
lineups / roster
boxScore / scorecard
overview / matchInfo
cup / playoffs
form
teams
leaders
leaderboard
facts
ranking
pointByPoint
probabilities
results / lastMeetings / lastMatches
playerProfile
pitchDarts
pitchAmericanFootball
pitchBadminton
pitchBaseball
pitchBasketball
pitchBeachVolleyball
pitchFutsal
pitchHandball
pitchHockey
pitchRugby
pitchSnooker
pitchTableTennis
pitchTennis
pitchVolleyball
pitchSquash
pitchSoccer
avStream

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

html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Match Preview Tabs Configuration</title>
        <style>
            .sr-widgets {
                max-width: 620px;
                width: 100%;
                margin: 0 auto;
            }

            /* Custom tab styling */
            .sr-bb .srct-tab {
                background: #ac1a2f;
                color: #fff;
                padding: 12px 24px;
                border: none;
                transition: all 0.3s ease;
            }

            /* Active tab styling */
            .sr-bb .srct-tab--active {
                background: #fff;
                color: #ac1a2f;
                font-weight: 600;
            }

            /* Hover effect */
            .sr-bb .srct-tab:hover {
                background: #8d1526;
            }

            .sr-bb .srct-tab--active:hover {
                background: #fff;
            }
        </style>
    </head>
    <body>
        <!-- Widget container -->
        <div class="sr-widgets">
            <div class="sr-widget sr-widget-1"></div>
        </div>

        <!-- Widget script will go here -->
    </body>
</html>

Add the widget loader script and configuration:

html

        <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', {
                theme: false,
                language: 'en'
            });

            SIR('addWidget', '.sr-widget-1', 'match.preview', {
                matchId: 12345, // Replace with your match ID
                branding: {
                    tabs: {
                        // Display icons with text
                        option: 'iconText',
                        // Icon appears before text
                        iconPosition: 'start',
                        // Tabs don't expand to full width
                        variant: 'standard'
                    },
                    namespaces: {
                        avTabSwitcher: {
                            tabs: {
                                // Right-align tabs
                                align: "end",
                                // Custom icon for avStream tab
                                icons: {
                                    "avStream": "https://widgets.sir.sportradar.com/docs/img/logo.svg"
                                },
                                // Enable custom CSS styling
                                useClientTheming: true
                            }
                        }
                    }
                }
            });
        </script>

#Step 3: Test Your Implementation

Replace matchId: 12345 with an actual match ID
Open the HTML file in a browser
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

tip

Start with a simple configuration and add customizations incrementally. Test after each change to ensure everything works as expected.

#Common Customization Scenarios

#Icon-Only Tabs

For a minimal, icon-only interface:

javascript

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:

javascript

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:

javascript

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

#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

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

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

info

Tab customization is performed through the branding configuration object when adding a widget with the SIR function.

#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

javascript

SIR('addWidget', '#container', 'match.preview', {
    matchId: 12345,
    branding: {
        tabs: {
            // Global tab settings apply here
            option: 'iconText',
            variant: 'standard'
        },
        namespaces: {
            avTabSwitcher: {
                tabs: {
                    // Widget-specific overrides apply here
                    align: 'center',
                    useClientTheming: true
                }
            }
        }
    }
});

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

Property	Type	Options	Description
`option`	string	`iconText`, `icon`, `text`	Controls what content appears in tabs: • `iconText` - Display both icon and text • `icon` - Display only icons • `text` - Display only text labels
`variant`	string	`fullWidth`, `standard`	Controls horizontal space usage: • `fullWidth` - Tabs expand to fill available width • `standard` - Tabs use minimum required width
`align`	string	`start`, `center`, `end`	Horizontal alignment when `variant` is `standard`: • `start` - Left-aligned • `center` - Center-aligned • `end` - Right-aligned
`iconPosition`	string	`start`, `end`	Icon placement when `option` is `iconText`: • `start` - Icon before text • `end` - Icon after text
`icons`	object	Tab ID to URL mapping	Custom icon paths for specific tabs. See Available Tabs for tab IDs
`arrowIcon`	string	Image URL	Path to custom arrow/indicator icon file
`useClientTheming`	boolean	`true`, `false`	When `true`, removes default styling and applies `.srct-` CSS classes for custom styling. See CSS Classes

tip

Use useClientTheming: true when you want complete control over tab styling with your own CSS. This disables default theme styles and applies classes prefixed with .srct- for easier customization.

#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

CSS Class	Applied To	Description
`.srct-tabs`	Tabs container	Wrapper element containing all tabs
`.srct-tab`	Individual tab	Each tab element
`.srct-tab__content`	Tab content wrapper	Container for icon, text, and indicator
`.srct-tab--active`	Active tab	Applied to the currently selected tab
`.srct-tab__indicator`	Tab indicator	Visual indicator element (typically underline)
`.srct-tab__indicator--active`	Active indicator	Indicator of the active tab
`.srct-tab__arrow`	Arrow element	Navigation arrow icon
`.srct-tab__text-label`	Text label	Tab text content
`.srct-tab__icon`	Icon element	Tab icon image

#Styling Example

css

/* Basic tab styling */
.sr-bb .srct-tab {
    background-color: #f5f5f5;
    color: #333;
    padding: 12px 20px;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
}

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

/* Tab indicator styling */
.sr-bb .srct-tab__indicator--active {
    background-color: #1d4ed8;
    height: 3px;
}

/* Icon styling */
.sr-bb .srct-tab__icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

warning

All widget styles must be scoped within the .sr-bb container class to ensure proper isolation and prevent conflicts with your site's CSS.

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

#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

Tab ID	Matching Icon
statistics / teamStats
headToHead
standings
timeline / plays
lineups / roster
boxScore / scorecard
overview / matchInfo
cup / playoffs
form
teams
leaders
leaderboard
facts
ranking
pointByPoint
probabilities
results / lastMeetings / lastMatches
playerProfile
pitchDarts
pitchAmericanFootball
pitchBadminton
pitchBaseball
pitchBasketball
pitchBeachVolleyball
pitchFutsal
pitchHandball
pitchHockey
pitchRugby
pitchSnooker
pitchTableTennis
pitchTennis
pitchVolleyball
pitchSquash
pitchSoccer
avStream

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

html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Match Preview Tabs Configuration</title>
        <style>
            .sr-widgets {
                max-width: 620px;
                width: 100%;
                margin: 0 auto;
            }

            /* Custom tab styling */
            .sr-bb .srct-tab {
                background: #ac1a2f;
                color: #fff;
                padding: 12px 24px;
                border: none;
                transition: all 0.3s ease;
            }

            /* Active tab styling */
            .sr-bb .srct-tab--active {
                background: #fff;
                color: #ac1a2f;
                font-weight: 600;
            }

            /* Hover effect */
            .sr-bb .srct-tab:hover {
                background: #8d1526;
            }

            .sr-bb .srct-tab--active:hover {
                background: #fff;
            }
        </style>
    </head>
    <body>
        <!-- Widget container -->
        <div class="sr-widgets">
            <div class="sr-widget sr-widget-1"></div>
        </div>

        <!-- Widget script will go here -->
    </body>
</html>

Add the widget loader script and configuration:

html

        <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', {
                theme: false,
                language: 'en'
            });

            SIR('addWidget', '.sr-widget-1', 'match.preview', {
                matchId: 12345, // Replace with your match ID
                branding: {
                    tabs: {
                        // Display icons with text
                        option: 'iconText',
                        // Icon appears before text
                        iconPosition: 'start',
                        // Tabs don't expand to full width
                        variant: 'standard'
                    },
                    namespaces: {
                        avTabSwitcher: {
                            tabs: {
                                // Right-align tabs
                                align: "end",
                                // Custom icon for avStream tab
                                icons: {
                                    "avStream": "https://widgets.sir.sportradar.com/docs/img/logo.svg"
                                },
                                // Enable custom CSS styling
                                useClientTheming: true
                            }
                        }
                    }
                }
            });
        </script>

#Step 3: Test Your Implementation

Replace matchId: 12345 with an actual match ID
Open the HTML file in a browser
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

tip

Start with a simple configuration and add customizations incrementally. Test after each change to ensure everything works as expected.

#Common Customization Scenarios

#Icon-Only Tabs

For a minimal, icon-only interface:

javascript

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:

javascript

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:

javascript

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

#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

#Audience

#Goals

#Prerequisites

#Understanding Tab Configuration

#Configuration Hierarchy

#Tab Configuration Options

#Custom Styling With CSS

#Available CSS Classes

#Styling Example

#Available Tabs by Widget

#Live Match Tracker

#Match Preview

#Tournament Preview

#Head to Head

#List of All Tabs and Default Icons

#Complete Implementation Example

#Step 1: Create HTML Structure

#Step 2: Configure Widget With Tab Settings

#Step 3: Test Your Implementation

#Configuration Breakdown

#Common Customization Scenarios

#Icon-Only Tabs

#Text-Only Tabs

#Custom Icons for All Tabs

#Further Reading

Customizing Widget Tabs

#Audience

#Goals

#Prerequisites

#Understanding Tab Configuration

#Configuration Hierarchy

#Tab Configuration Options

#Custom Styling With CSS

#Available CSS Classes

#Styling Example

#Available Tabs by Widget

#Live Match Tracker

#Match Preview

#Tournament Preview

#Head to Head

#List of All Tabs and Default Icons

#Complete Implementation Example

#Step 1: Create HTML Structure

#Step 2: Configure Widget With Tab Settings

#Step 3: Test Your Implementation

#Configuration Breakdown

#Common Customization Scenarios

#Icon-Only Tabs

#Text-Only Tabs

#Custom Icons for All Tabs

#Further Reading