Betting Entertainment Tools

Widgets Demo

Bet slip integration

Example how to implement outcome selection with your bet slip integration.

The Player Prop Zone widget uses the adapter V2 betSlipSelection endpoint to synchronise bet slip state and the onAction prop to notify you when a user clicks on an odds button.

Flow

  1. Register the adapter with a betSlipSelection endpoint. The widget calls this endpoint and passes a callback you must store.
  2. Pass an onAction handler to the widget. When a user taps an odds button the handler receives an event whose data.selections array contains the selected outcomes.
  3. Check that event.type equals "AddSelectionsToBetSlip" before processing the selections.
  4. Update your bet slip state and invoke the stored callback with the new state so the widget can reflect which selections are active.

onAction event

The onAction callback receives an event object with the following structure:

{
    type: "AddSelectionsToBetSlip",
    data: {
        selections: [
            {
                type: "uf",
                event: string,
                market: string,
                specifiers?: string,
                outcome: string,
                odds?: {
                    type: "eu" | "uk" | "us" | "hong-kong" | "indonesian" | "malay",
                    value: string
                }
            }
        ]
    }
}
  • type – The action type. For bet slip integration the value is always "AddSelectionsToBetSlip".
  • data.selections – An array of selection objects with the following properties:
    • type – Always "uf".
    • event – The UOF event identifier (e.g. "sr:match:61301097").
    • market – The UOF market identifier.
    • specifiers – Optional. Additional market specifier (e.g. a line value such as "total=1.5").
    • outcome – The UOF outcome identifier.
    • odds – Optional. Contains type (odds format) and value (odds value as string).
Example
// Bet slip state
let betslipCallback;
let betslipState = [];

SIR('registerAdapter', '{ADAPTER_NAME}', {
    config: {},
    endpoints: {
        betSlipSelection: (args, callback) => {
            // Always store the latest callback
            betslipCallback = callback;
            betslipCallback && betslipCallback(undefined, { selection: betslipState });

            // Return an unsubscribe function for cleanup
            return () => {
                betslipCallback = undefined;
            };
        },
    },
});

SIR('addWidget', '#sr-widget', 'match.playerPropZone', {
    matchId: 'sr:match:61301097',
    onAction: (event) => {
        // Only handle bet slip selections
        if (event.type === 'AddSelectionsToBetSlip') {
            // Append new selections to the bet slip
            betslipState.push(...event.data.selections);

            // Notify the widget about the updated bet slip
            betslipCallback && betslipCallback(undefined, {
                selection: betslipState
            });
        }
    },
});