---
title: "Match scoreboard widget integration"
---# Match Scoreboard Widget IntegrationThe Match Scoreboard widget provides lightning fast visualization of all the information you will ever need including live scores, team details, match status, and all other information that may be of interest. This widget brings you crucial match information such as names of your favorite competition, scores of your favorite players, representats your favotire teams with the names and logos you know and love, shows time, match period, cards, corners and all other match information you want. Use it where you want to display information about the sporting events you are interested in.
Really quick score and status updates with automatic refresh
Names of your favorite teams, most beautiful logos, and exciting color schemes
All you ever need to know about the competition (tournament), venue and timing.
See how many goals your favorite player scored with expandable details and statistics
Cards, corners, and other significant match events
Optimized layouts automatically adapting to different screen sizes
The widget displays date/time in the end user's local timezone based on their operating system settings.
The widget supports 25+ sports.
Match.Scoreboard widget supports all tournaments and seasons for the supported sports, where data is available.
| Property | Type | Description |
|---|---|---|
matchId | number | Required. Sportradar match identifier, see Getting Identifiers tutorial |
Layout Configuration
| Property | Type | Default | Description |
|---|---|---|---|
smallLayout | string | "vertical" | Layout type for small screens. |
layoutType | string | "dynamic" | Overall layout strategy. |
horizontalLayout | string | "normal" | Horizontal layout variant. |
Content Control
| Property | Type | Default | Description |
|---|---|---|---|
disableWidgetHeader | boolean | false | disable widget header |
disableMatchHeader | boolean | false | disable match header |
disableMatchInfo | boolean | false | disable match info |
disableGoalscorers | boolean | false | disable goal scorers |
expandedGoalScorers | boolean | false | expanded goal scorers |
disableResult | boolean | false | disable result |
Display Options
| Property | Type | Default | Description |
|---|---|---|---|
showCardsCounter | boolean | true | show cards counter |
showCornersCounter | boolean | true | show corner counter |
showDivider | boolean | false | show divider |
disableTeamColors | boolean | false | Disables team colors for NFL, MLB, NHL, and NBA in horizontal layout |
Styling Properties
| Property | Type | Default | Description |
|---|---|---|---|
themingClass | string | "srt-base-1" | CSS class for theming Widgets theming guide |
noOuterPadding | boolean | false | Removes outer padding from widget |
noHorizontalPadding | boolean | false | Removes horizontal padding |
noBorder | boolean | false | Removes border styling |
Deprecated Properties
The following properties are deprecated and should be avoided:
onPlayerSelect - Use onItemClick insteadonTeamSelect - Use onItemClick insteaddisablePlayerSelection - Use event handler control insteaddisableTeamSelection - Use event handler control insteadHTML/Declarative
<div id="sr-widget" data-sr-widget="match.scoreboard" data-sr-match-id="20521319"></div>
<script type="application/javascript" src="https://widgets.sir.sportradar.com/sportradar/widgetloader" async></script>JS/Programmatic
<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'
});
SIR('addWidget', '#sr-widget', 'match.scoreboard', {matchId: 20521319});
</script>
<div id="sr-widget"></div>---
title: "Widgets theming"
---In this tutorial you will learn how to theme your widgets.
In order to complete this tutorial you will need:
| Browser | Version | Mobile Support |
|---|---|---|
| Chrome | 60+ | ✅ Chrome Mobile 60+ |
| Firefox | 55+ | ✅ Firefox Mobile 55+ |
| Safari | 12+ | ✅ iOS Safari 12+ |
| Edge | 79+ | ✅ Edge Mobile 79+ |