This page describes the client integration instructions for the Live Match Tracker widget for golf. The same match.lmtPlus widget is used for golf, but with different behaviour and configuration. Only a small subset of regular LMT properties is supported for golf.
This guide covers only what is needed for golf integration.
Default widget display
Golf Course Hole Overview
See the LMT Golf widget demo.
match.lmtPlussr:stage:<id>).Environment Requirements
| Property | Type | Default | Description |
|---|---|---|---|
entityId | string | Required | Unique golf event identifier in full entity format |
scoreboard | string | "compact" | Scoreboard display variant.
|
tabsPosition | string | "bottom" | Position of tab navigation.
|
tabs | object | See LMT Tabs identifiers | Custom tab configuration per sport. Object with sport IDs as keys and arrays of tab names as values |
pitchCustomBgColor | string | - | Custom course background color (hex/rgb). Example: "#1a5f3e" |
streamAuth | function | - | See Stream Auth example. |
Theming for the golf widget is more limited than for the full LMT.
Tabs use the same theming and branding options as the regular LMT, while the main widget components are more limited and only the rules below apply to the main widget area.
Existing widget theming can be used for the regular LMT to have the same font and background-color rules applied to the golf widget — no extra setup needed. LMT Golf automatically sets light or dark theme based on background-color used.
If you are setting up theming for the first time, follow the Styling Widgets guide to set up default theming, then apply golf-specific overrides (if needed) as shown below.
Only font-family, background-color and color values can be changed. Other properties should be left as-is.
/* MIAN BACKGROUND COLOR */
.sr-bb {
background-color: #fff;
}
/* DEFAULT TEXT COLOR */
.sr-bb .srt-base-1 {
color: #333;
}
/* PRIMARY TEXT COLOR */
.sr-bb .srt-base-1-primary {
color: red;
}
/* SURFACE BACKGROUND COLOR */
.sr-bb .srt-golf-surface {
background-color: gray;
}No other srt-* classes are used in LMT Golf widget and changing their values won't make any difference in appearance of LMT Golf widget.
Streaming for Golf is available only with Premium LMT Feature.
To enable video playback authorization, a callback function needs to be passed to the widget config using streamAuth prop. The widget calls this function on each playback auth request, so your implementation must generate a fresh token on every call.
The callback must resolve to: { auth: string, timestamp: number, operatorId: number }:
operatorId identifies your operator. Both the operatorId and the secret token will be provided during client setup process.auth (generated with secret token and timestamp) and timestamp are auth payload valuesCheck example below for some pseudo code on how to generate the payload.
Keep the streaming secret on your server only. Never expose it in browser code.
Premium streaming auth function. Must return Promise<{ auth: string, timestamp: number, operatorId: number }>. It is invoked on each playback auth request and should generate a new token. Generated token is valid for 5 minutes.
Server-side token generation example
// The token must be generated on your backend. Never expose the secret in browser code.
// Call this from a protected server endpoint and return the result to the client.
import crypto from 'crypto';
export function generateTokenDetails() {
const secret = process.env.STREAMING_SECRET;
const operatorId = Number(process.env.STREAMING_OPERATOR_ID);
Properties do not always transfer from the above table directly into integration code. Properties must be transformed differently for each integration method:
SIR() callcardVariant: "compact"In javascript integration, the properties go into an object which is passed as the 4th argument of the call ti SIR() function. Please see Global SIR API
data-sr- prefixcardVariant → data-sr-card-variantfilters.sport.hidden → Complex objects must be passed as JSON stringsIn HTML integration, the properties go into the parent HTML object as object properties, prefixed with data-sr- as explained above.
In all examples replace sportradar in the widgetloader URL path with your clientId.
Example if your clientId is client1:
https://widgets.sir.sportradar.com/sportradar/widgetloaderhttps://widgets.sir.sportradar.com/client1/widgetloaderInitialize the widget programmatically using the JavaScript API. The widget renders in the specified container element.
(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
<div id="sr-widget"></div>Insert the following HTML code at the target widget location. Complex object properties must be passed as JSON-encoded strings.
<div id="sr-widget"
data-sr-widget="match.lmtPlus"
data-sr-entity-id="sr:stage:123">
</div>
<script type="application/javascript"
src="https://widgets.sir.sportradar.com/sportradar/widgetloader"
async>
</script>This method supports only simple (base) properties and does not support properties that require functions.