---
title: "Engagement Tools"
canonical_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/negative-examples"
markdown_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/negative-examples.md"
last_updated: "2025-12-19T15:30:37Z"
---

# Engagement Tools

```markdown
---
title: "Match scoreboard widget integration"
---
```

```markdown
# Match Scoreboard Widget Integration
```

## Overview

The **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.

### Key Features

### Live Score Display

Really quick score and status updates with automatic refresh

### Team Information

Names of your favorite teams, most beautiful logos, and exciting color schemes

### Match Context

All you ever need to know about the competition (tournament), venue and timing.

### Goal Scorers

See how many goals your favorite player scored with expandable details and statistics

### Match Statistics

Cards, corners, and other significant match events

### Responsive Design

Optimized layouts automatically adapting to different screen sizes

> **Note**
>
> The widget displays date/time in the end user's local timezone based on their operating system settings.

## Supported Content And Environment

The widget supports **25+ sports**.

> **Note**
>
> Match.Scoreboard widget supports all tournaments and seasons for the supported sports, where data is available.

## Configurable Features

- Layout options
  - Small
    - Horizontal
    - Vertical
  - Horizontal
    - Compact
    - Normal
    - Extended
  - Vertical
- Content control toggle options
  - Section toggle
    - Widget header
    - Match header
    - Match Info
    - Goal scorers
      - Expanded view
  - Content toggle
    - Cards counter
    - Corners counter
- Styling options
  - Theming class
  - Outer padding
  - Horizontal padding
  - Border
  - Border radius
  - team colors

## Configurable Features

- Layout options
  Several layouts can be used, horizontal, vertical, compact, expanded
- Content control toggle options
  Several sections of the widget can be switched on or off, among them widget header, match header, match info and goal scorers, for which an expanded view is also provided. Cards and corners display can also be switched on or off.
- Styling options
  Many visual aspedcts of the widget can be controlled by the widget theming class, but the widget also provides shorthand controls for outer padsding, horizontal padding, border marker and border radius.

## API Reference

### Required Properties

| Property  | Type     | Description                                                                                                                                                                    |
| --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `matchId` | `number` | **Required.** Sportradar match identifier, see [Getting Identifiers](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/tutorial-getting-identifiers.md) tutorial |

### Configuration Properties

**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](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/tutorial-theming-widgets.md) |
| `noOuterPadding`      | `boolean` | `false`        | Removes outer padding from widget                                                                                                          |
| `noHorizontalPadding` | `boolean` | `false`        | Removes horizontal padding                                                                                                                 |
| `noBorder`            | `boolean` | `false`        | Removes border styling                                                                                                                     |

> **Note**
>
> **Deprecated Properties**
>
> The following properties are deprecated and should be avoided:
>
> - `onPlayerSelect` - Use `onItemClick` instead
> - `onTeamSelect` - Use `onItemClick` instead
> - `disablePlayerSelection` - Use event handler control instead
> - `disableTeamSelection` - Use event handler control instead

## Examples

**HTML/Declarative**

```html
<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**

```javascript
<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>
```

```markdown
---
title: "Widgets theming"
---
```

## Goals

In this tutorial you will learn how to theme your widgets.

## Prerequisites

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+    |

- JavaScript enabled
- XMLHttpRequest support for data fetching
- CSS3 support for styling and animations
- a laptop
  - a mouse
  - a screen
- a website with an integrated Sportradar widget.
  - React framework V19.1 or newer
  - if you need to integrate your widget first, see the [getting started guide](https://apidocs.sportradar.online/resources/widgets/docs/README.md)
- access to Sportradar [widgets demo page](https://widgets.sir.sportradar.com/widgets-demo)
- a text editor of your choice