Complete property reference and integration examples for the Chat Compact widget (chatCompact). For product context and layout variants, see Overview.
Chat Compact uses the same Virtual Stadium (VS) authentication model as the full Virtual Stadium web widget. Every integration requires channelId plus either jwt or apiKey. Either auth mode works with any layout.
| Mode | Property | Use case |
|---|---|---|
| Authenticated | jwt | Logged-in users who can post messages and use user-specific chat features |
| Read-only | apiKey | Anonymous or preview access—users can view chat without posting |
You must provide one of jwt or apiKey. The widget validates at runtime that at least one is set together with channelId.
JWT: Create tokens on your backend (never in browser JavaScript). Include Virtual Stadium scope and product claims.
scope: 'vs', and VS-specific claims (apiKey, userId, displayName, userType, …)API key: Virtual Stadium API key for read-only access (provided during onboarding / moderation setup).
Advanced (specialized embeds)
These props exist for specialized embeds (for example casino lobby shells). They are not required for typical standalone chatCompact integration.
| Property | Type | Description |
|---|---|---|
drawerPortalContainerId | string | When set, channel menus render as sheet drawers portaled into the element with this id. Omit for inline dropdowns. |
onJackpotWinTrigger | function | Registration callback for jackpot win effects inside the chat surface. |
Pass onAction when you need to react to user interactions—for example analytics, or resizing the parent page when the user expands or collapses chat from compact mode.
The widget calls your callback with one argument: an object { type, data }.
type — Which action occurred. Use this in a switch (or equivalent) as the first branch.data — Payload for that action. The shape depends on type.type | When it fires | data shape |
|---|---|---|
'Click' | User expands compact strip to full chat | { channelId: string, source: 'ChatExpanded' } |
'Click' | User collapses expanded chat back to compact | { channelId: string, source: 'ChatCollapsed' } |
'SwitchChannel' | User selects a different channel | Channel tag (channelId, …) |
For expand and collapse, both actions use type: 'Click'. Branch on data.source.
Example: coordinate parent layout when chat expands or collapses.
function onAction(action) {
switch (action.type) {
case 'Click':
if (action.data.source === 'ChatExpanded') {
document.getElementById('chat-shell').classList.add('is-chat-expanded')
Provide either jwt or apiKey together with channelId. JWT must include Virtual Stadium scope and claims as described in JSON Web Token (JWT).
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-variantapiKey integrations cannot enable composer posting until you switch to JWT for that user.| Property | Type | Default | Description |
|---|---|---|---|
channelId | string | — | Required. Virtual Stadium channel identifier. |
jwt | string | — | User JWT for authenticated chat (posting and user-specific features). Required unless apiKey is set. |
apiKey | string | — | API key for read-only chat. Required unless jwt is set. |
layoutMode | 'compact' | 'full' | 'compact' | Compact strip or full chat UI. Full layout (and in-session expanded compact) stretches to fill the parent height. |
variant | 'single-row' | 'three-row' | 'single-row' | Compact strip style; applies when layoutMode is 'compact'. |
onAction | function | — | Optional callback for user actions (expand/collapse chat, channel switch). See The onAction callback. |
onDataChange | function | — | Called when widget state changes (loading, errors, licensing). |
filters.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.
This method supports only simple (base) properties and does not support properties that require functions.
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/widgetloaderDefault compact strip with channel header and a single visible message row.
JavaScript
Initialize the widget programmatically using the JavaScript API. The widget renders in the specified container element.
SIR('addWidget', '#sr-chat-compact', 'chatCompact', {
apiKey: 'your-api-key',
channelId: 'your-channel-id',
layoutMode: 'compact',
variant: 'single-row'
});HTML (data attributes)
Insert the following HTML code at the target widget location. Complex object properties must be passed as JSON-encoded strings.
<div
id="sr-chat-compact"
class="sr-widget"
data-sr-widget="chatCompact"
data-sr-api-key="your-api-key"
data-sr-channel-id="your-channel-id"
data-sr-layout-mode="compact"
data-sr-variant="single-row"
></div>