Overlay

Concept: Overlay

Supported views and shared configuration are on the concept page. On React Native you render EmbetOverlay, which loads @livelike/embet in a WebView and bridges messages to your app.

WebView page

EmbetOverlay opens a small HTML bridge page in the WebView (bundled with @livelike/embet-rn by default). That page loads the Web SDK from unpkg and talks to React Native over postMessage.

To host the bridge page yourself — custom loading UI, styles, or CDN policy — pass htmlUrl and include EmbetBridge.init() on the page. See Self-hosted WebView page.

import { View, StyleSheet } from 'react-native';
import { EmbetOverlay } from '@livelike/embet-rn';

export function PlayerScreen() {
  return (
    <View style={styles.shell}>
      <EmbetOverlay
        clientId="YOUR_CLIENT_ID"
        customId="YOUR_EVENT_ID"
        sdkVersion="1.4.0"
      />
    </View>
  );
}

const styles = StyleSheet.create({ shell: { flex: 1 } });

Use customId. Pin sdkVersion in production.

Typical setup (React Native)

After onInitialized, call ref methods on EmbetOverlay:

overlayRef.current?.configureResize({ enabled: true, hostElement: 'body' });
overlayRef.current?.configureBetSlip({
  currency: '€',
  currencyDisplay: 'prefix',
  decimalSign: ',',
  maxAmount: 1000,
  // mode: 'DEEPLINK' for OTT — see Betslip
});
overlayRef.current?.updateOdds([/* your feed */]);

Bet placement uses the onPlaceBet prop on EmbetOverlay (not configureBetSlip). Deeplink mode omits onPlaceBet.

Details: Betslip · Layout · Odds · Events · EmbetOverlay properties · Recipes.