A guide to establishing the most suitable configuration aligned with the bookmaker's corporate identity and sports betting support requirements.
#Header
#Normal
Description
Normal - A full-width header that allows clients to display their logo. This header layout is especially useful for clients who use a direct link (opening StatsHub in a new window or tab), as the logo provides a seamless connection between both pages.
Technical Note
- The logo container (header) can be at max height of 100px.
Visual example
#Compact
Description
Compact – A full-width header without a logo area. This layout is particularly useful for clients who embed the StatsHub solution in an iframe or enable it to open it in a pop-up window. Users can access sports statistics either directly through the sport icons in the page header or by clicking the »All Sports« menu, which displays all supported sports.
Technical Note
Configurable Options (adjustable from default):
- Change the header to compact variant
Visual example
#Super Compact
Description
Super Compact – The most compact version of the menu without the logo area and without sports icons. This layout is useful for clients who embed the StatsHub solution in an iframe or enable it to open it in a pop-up window. Users can access sports statistics through the compact "All Sports" menu, and all navigation—including settings and access to the Favorites area—is consolidated into a single compact section.
Technical Note
Configurable Options (adjustable from default):
- Change the header to super compact variant
Visual example
#Logo on page header
Description
When the normal header is used (as opposed to the compact or super compact versions, which do not display the logo), the logo is shown. The logo URL can be linked to StatsHub home or any other specified URL.
Technical Note
Configurable Options (adjustable from default):
- Logo height: Maximum of 22px
- Logo URL: Configurable to point to any desired destination
- Link behavior: Can be set to open in the same page, a new tab, or a new window
#Footer
Description
By default, the StatsHub page grid does not include a footer. However, clients have the option to enable it as needed. The footer is fully customizable and can feature elements such as text, hyperlinks, and logos, providing flexibility for tailored branding and informational content.
Technical Note
Configurable Options (adjustable from default):
- Show footer
- Configure footer (text, links and logos)
Visual example
#Page grid and match radar variants
#Regular
Description
In desktop view, the page layout is divided into two-thirds main content and one-third sidebar, which contains the match radar and various additional information. The page is fully adaptive—resizing dynamically. Once the layout reaches the defined breakpoint, the right sidebar content is moved to the main content area with full page width (mobile size) and match radar collapses into a mobile-friendly icon view, ensuring all data remains accessible without any loss of functionality.
Technical Note
- Desktop: Content with match radar is shown in the right sidebar.
#Full-width content with compact Match Radar
Description
The full width content and Compact Match Radar is designed for clients who want to make the most of the full page width for their main content. In this mode, the sidebar (right column) is removed, and its content is seamlessly integrated into the main area. The Match Radar itself appears as a floating icon, keeping the interface uncluttered. With a single click, users can access the Match Radar information - ensuring complete functionality without taking up valuable screen space.
Technical Note
Configurable Options (adjustable from default):
- Change the page grid to remove the left column sidebar
Visual example
#Add/remove page elements and functionalities
#Quickstats
Description
Quickstats provide easy access to basic match statistics without requiring users to navigate the full statistics portal. Clients can choose to disable Quickstats entirely or hide specific elements within them.
Technical Note
Configurable Options (adjustable from default):
- Disable Quickstats
- Hide specific elements in the Quickstats: LMT, statistics, H2H, Bet Assist.
- Disable link to Advanced statistics (for clients who require only match list configuration).
Visual example
#Match radar
Description
Match Radar allows users to keep track of pinned matches and favorite leagues, ensuring they never miss an event. It provides reminders for key match moments, keeping users informed of important updates. Match Radar is available across all pages, so notifications are always visible—no matter where you are.
Technical Note
Configurable options (adjustable from default):
- Hide match radar
Visual example
#Favourites page
Description
Users can save specific matches by pinning them (via the pin icon available on each match). If they want to follow an entire league and receive updates when matches begin, they can favourite the league. All pinned matches and favourited leagues appear in both the Match Radar and the Favourites page. The Favourites page serves as a central hub where users can easily access all their pinned matches and favourited leagues in one place.
Technical Note
Configurable options (adjustable from default):
- Remove favourite subpage (removes it from the main menu)
Visual example
#Match list
#Pinning the match
Description
Users can save specific matches by pinning them (using the pin icon available on each match) so they can access them later without searching. When a match is pinned, users can also set reminders. These reminders can be as simple as a notification when the match starts, or more advanced options such as betting-related alerts (e.g., "Goals over X.5"). Pinned matches are displayed in both the Match Radar and the Favourites page. Reminders are delivered as notification pop-ups. Users can mute them at any time from the settings menu.
Technical Note
Configurable options (adjustable from default):
- Remove the possibility of pinning the match.
- Remove the possibility to add reminders (only pinning the match is possible).
Visual example
#Adding leagues to Favourites
Description
When users want to follow desired league and receive notifications when its matches begin, they can favourite the league by selecting the star icon next to the league name. All favourited leagues appear in both the Match Radar and the Favourites page:
- Match Radar shows information about today's matches from the favourited leagues.
- Favourites Page displays all matches that are part of the favourited leagues.
Technical Note
Configurable options (adjustable from default):
- Remove the possibility of favouriting the league.
Visual example
#Filters in the match list
Description
Match lists give users a complete overview of past, live, and upcoming matches. They are available across all supported sports and leagues, with flexible filtering options to match user preferences.
Technical Note
Configurable options (adjustable from default):
- Choose whether the match list displays all matches or live matches by default.
Visual example
- The basic filter (all-live toggle button) allows users to view all matches or limit the list to only live matches.
- The advanced filters provide more detailed options for filtering and sorting, helping users quickly find the matches most relevant to them.
#Other page functionalities
#Change page elements
Description
Each generic page element used in StatsHub—such as the Over/Under table, League table, etc.—can be removed individually. Once a generic element is removed, it no longer appears across any subpages or sports where it was previously displayed. This allows for flexible customization of the interface based on specific needs.
Technical Note
Configurable options (adjustable from default):
- Define generic elements which will be removed from the StatsHub.
#Reverse the home and away team showing position.
Description
When two teams or players are playing each other, the normal showing order is that the home team is on the left and the away team is on the right. However, this showing order can be changed to show the home team on the right.
Technical Note
Configurable options (adjustable from default):
- Change the showing order for the home team to be on the right.
#Favicon
Description
A favicon (short for favorite icon) is a small icon that represents a website or web page. Client can use its own favicon.
Technical Note
Configurable options (adjustable from default):
- Change favicon
#Sports, leagues and tournaments
#Sports & Leagues
Description
By default, the client has access to all supported sports and leagues covered by Sportradar. However, clients can remove specific leagues or sports from the portal. Additionally, the order in which the sports and leagues are displayed can be adjusted.
Technical Note
Configurable options (adjustable from default):
- Remove specific sports
- Remove specific leagues or tournaments
- Change the order in which sports are displayed
- Change the order in which leagues are displayed
Visual example
#Show popular sports first
Description
When displaying the list of sports as icons in the header or in the main sport selector menu, the order can vary. By default, popular sports are shown first (7 sports can be manually selected), followed by the remaining sports in alphabetical order. Alternatively, all sports can be displayed in strict alphabetical order without prioritizing popular ones.
Technical Note
Configurable options (adjustable from default):
- Show alphabetically list without the popular sports
- Select 7 sports to be included in the popular sports segment
#Show popular leagues first
Description
When displaying the list of leagues in league selector, the order can vary. By default, leagues are shown as received from the match feed, but the list can also be configured to display selected leagues first, followed by the remaining leagues.
Technical Note
Configurable options (adjustable from default):
- Set priority for selected leagues
#Popular tournaments (pills)
Description
In the menu and page header, up to four popular tournaments per sport are displayed as pills. These can be manually configured to select which leagues or tournaments appear, each linking directly to its respective league page.
Technical Note
Configurable options (adjustable from default):
- Hide popular tournament pills
- Define popular tournaments
Visual example
#Appearance & Localisation Settings
#Available Themes
Description
StatsHub users are able to change the main color page theme to fit their needs. Users can choose from the following theme options:
- Default Theme: Automatically matches the user's operating system preference (light or dark mode).
- Light Theme: Uses lighter background colors with darker elements for optimal readability in bright environments.
- Dark Theme: Applies darker backgrounds with lighter elements, ideal for low-light settings.
- High Contrast Theme: A two-color scheme designed to maximize contrast between background and content elements, enhancing accessibility.
Theme change option is available in the settings menu.
Technical Note
Configurable options (adjustable from default):
- Disable Theme Switching: Optionally remove the ability for users to change themes.
- Define Color Palette per Theme: Each theme has defined color palette.
- Flexible Theme Availability: Choose to support one, two, or all available themes based on product requirements.
Visual example
#Adjusting page colours for each theme
Description
StatsHub's color palette is designed for seamless alignment with corporate identity and branding guidelines. Its structured approach enables effortless adaptation of all page elements using predefined, brand-consistent colors.
Technical Note
Configurable options (adjustable from default):
Define color palette for different themes:
- Light
- Dark
- High Contrast
#Languages
Description
StatsHub supports full localization across all supported languages. Clients can define a primary language as well as a list of available languages that appear in the user settings menu. Each user can then individually select their preferred language from this list. Refer to the [Supported Languages List] for details.
Technical Note
Configurable options (adjustable from default):
- Set Primary Language - define the default language for the application interface.
- Configure Available Languages - choose which languages appear in the user settings menu for individual selection.
- Restrict Language Switching - optionally disable the ability for users to change their language via the settings menu.
#Fonts
Description
By default, StatsHub uses the Roboto font, a modern sans-serif typeface. Clients can customize the default font to better align with their corporate identity and branding guidelines.
Technical Note
Configurable options (adjustable from default):
- Replace the default font with own font type.
- Replace the default dyslectic font with own dyslectic font type.
#Other Font Options
Description
In addition to customizing the default font, clients can choose to disable font settings in the user interface, preventing users from changing the font individually.
Technical Note
Configurable options (adjustable from default):
- Disable Bold Font Option: Prevent users from switching to bold font styles via the settings menu.
- Disable Dyslexic Font Option: Prevent users from switching to dyslexia-friendly fonts via the settings menu.
#Sport Icons
Description
Sport icons are used in the page header and sports menu selector to visually represent each sport. Clients have the flexibility to replace the default icons with their own custom sports icons to better match their brand identity.
Technical Note
Configurable options (adjustable from default):
- Replace Default Icons: Customize the portal by providing own icon set.
- Format Requirement: Icons must be provided in SVG format for optimal compatibility and scalability.
#Logos
Description
To be able to fully adapt the StatsHub to client's corporate identity and branding guidelines different logos are used.
- Logo in the page header (see: Header)
- Data by Sportradar Logo – This logo appears at the end of each match list when the user clicks the sports selector icon or selects a league.
- Bet Assist Logo – Displayed when the user clicks on 'Quickstats' in the match list and navigates to the 'Bet Assist' tab.
Technical Note
Configurable options (adjustable from default):
- Add own logo for each of the cases (1-3)
- Configure destination URL on each of the logos
#Odds & Markets
Description
By default, StatsHub displays simple 2-way or 3-way markets for each match. Markets are available pre-match, live, and post-match, with historical odds accessible for up to one year after the match has ended. Clients can integrate their own odds, or StatsHub will display generic odds. Users can click on a specific market to be redirected either to the bookmaker's betting site or directly to the betslip.
Technical Note
Configurable options (adjustable from default):
- Display markets and odds (3-way, 2-way)
- Click to odds leads to
- Bookmaker's site
- Bookmaker's betslip
- Show markets with odds without the links
#Page Views Tracking
#Google Analytics
Description
To gain insights into how users interact with StatsHub, clients can configure and integrate their own Google Analytics tracking code.
Technical Note
Configurable Options (adjustable from default):
- Google Analytics tracking code: Can be added if needed
- Security restriction: No other external code is permitted within StatsHub for security reasons.
#Whitelisting
Description
StatsHub is a hosted solution, and for it to function properly, the URL from which the client is embedding or linking to StatsHub must be whitelisted. This ensures secure and authorized access to the platform.
Technical Note
Configurable options (adjustable from default):
- List of URL from which client is embedding or linking the solution.
#Product Variants
#Single tournament or league
Description
StatsHub has been enhanced to support displaying statistical information for a single tournament or league. This updated product version introduces a simplified navigation experience, tailored specifically for focused tournament analysis. When this version is active:
- Navigation is restricted to the selected tournament.
- Users cannot switch to other tournaments or sports.
- The interface is streamlined to reduce distractions and improve usability within the context of a single competition.
Technical Note
Configurable options (adjustable from default):
- Activate "tournament" StatsHub version.
#Betting terminals
Description
StatsHub works seamlessly on betting terminals. It can be configured to display a single page—most commonly the "Overview" subpage within the H2H—while disabling all other navigation options.
We have two distinct modes available for betting terminals:
- full terminal - which removes all navigation and nothing on page is clickable
- semi-terminal - the user can interact with the page, but navigation to other matches, tournaments etc. is disabled.
Technical Note
Configurable options (adjustable from default):
- Enable "betting terminals" product version
- Show "Overview" or "Match Report" or "Statistics.
Visual example
