LMT MMA

This page describes the client integration instructions for the Live Match Tracker widget for mma. The same match.lmtPlus widget is used for mma, but with different behaviour and configuration. Only a small subset of regular LMT properties is supported for mma.

This guide covers only what is needed for mma integration.

Previous slideNext slide

See the LMT MMA widget demo.

#API Reference

#Required Parameters

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

#Theming

Theming for the mma 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 mma widget — no extra setup needed. LMT MMA automatically sets light or dark theme based on background-color used.

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

#Streaming

Streaming for MMA is available only for UFC.

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

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.

#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

Server-side token generation example

JavaScript (Programmatic)

Initialize the widget programmatically using the JavaScript API. The widget renders in the specified container element.

HTML (Declarative)

Insert the following HTML code at the target widget location. Complex object properties must be passed as JSON-encoded strings.