LMT Golf

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.

Previous slideNext slide

See the LMT Golf widget demo.

#API Reference

#Required Parameters

• widget-name: match.lmtPlus
• entityId: The unique identifier for the golf event is the only required parameter. It should be formatted as a full entity string (e.g.sr:stage:<id>).

#Theming

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.

/* 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;
}

#Streaming

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 values

Check example below for some pseudo code on how to generate the payload.

#Stream Auth Example

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.

// 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);

    if (!secret) {
        throw new Error(`Missing or env variable "STREAMING_SECRET" is not set.`);
    }

    const timestamp = Date.now();
    const tokenString = `${secret}:${timestamp}`;
    const hmac = crypto.createHmac('md5', secret);

    return {
        auth: hmac.update(tokenString).digest('hex'),
        timestamp,
        operatorId,
    };
}

#Integration Examples

#Property Name Transformations

Properties do not always transfer from the above table directly into integration code. Properties must be transformed differently for each integration method:

JavaScript/Programmatic Integration

• Property names remain unchanged in camelCase
• Properties become members of the 4th parameter object in SIR() call
• Example: cardVariant: "compact"

HTML/Declarative Integration

• Convert camelCase to lowercase with dashes, e.g. cardVariant becomes card-variant
• Add data-sr- prefix
• Example: cardVariant → data-sr-card-variant
• Example: filters.sport.hidden → Complex objects must be passed as JSON strings

(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.lmtPlus', {
    entityId: 'sr:stage:123'
});

<div id="sr-widget"></div>

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