Own UI

Concept: Betslip

When your app already has a native betslip, set mode: 'EXTERNAL' in configureBetSlip, listen for outcome_selected on onEvent, and after your sportsbook responds call embet.notifyBetPlaced inside the WebView (same payload as on web). Do not pass onPlaceBet on EmbetOverlay.

Configuration and events

const overlayRef = useRef<EmbetOverlayRef>(null);
const [selection, setSelection] = useState<{
  marketId: string;
  outcomeId: string;
} | null>(null);

<EmbetOverlay
  ref={overlayRef}
  clientId="YOUR_CLIENT_ID"
  customId="YOUR_EVENT_ID"
  sdkVersion="1.4.0"
  onInitialized={() => {
    overlayRef.current?.configureBetSlip({
      mode: 'EXTERNAL',
      currency: '€',
      currencyDisplay: 'prefix',
      decimalSign: ',',
      maxAmount: 1000,
    });
  }}
  onEvent={(event) => {
    if (event.eventName === 'outcome_selected') {
      const { marketId, outcomeId } = event.payload as {
        marketId: string;
        outcomeId: string;
      };
      setSelection({ marketId, outcomeId });
    }
  }}
/>

Render your betslip in React Native beside the overlay. When the user confirms in your UI, call your sportsbook API, then notify the Web SDK — see Betslip (feature) — notifyBetPlaced.

ℹ️
notifyBetPlaced runs in the WebView context on web. On React Native, use a self-hosted bridge page (htmlUrl) that calls embet.notifyBetPlaced after you post the result from native code, or extend the bundled bridge in @livelike/embet-rn until an imperative notifyBetPlaced ref method is available.

Event reference: Event manager · Events.

End-to-end sample: Recipe — Own UI betslip.