Self-hosted WebView page

Reference: EmbetOverlay properties (htmlUrl)

By default, EmbetOverlay loads a bundled HTML page from @livelike/embet-rn (no extra hosting). The emBET Web SDK script still loads from unpkg, controlled by sdkVersion.

Host your own page when you need custom loading or error UI, extra styles, a pinned bridge build, or CDN policies that require all WebView assets on your domain. The page must include the bridge script and call EmbetBridge.init() — same protocol as the SDK’s default page (embet-rn-sdk src/html/).

1. Host the bridge page

Serve a static HTML file from your CDN or web server. Pin @livelike/embet-rn to the same major/minor version you use in the app.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>emBET</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    .embet-loading { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
    .embet-error { display: none; padding: 1rem; color: #b00020; }
  </style>
</head>
<body>
  <div id="embet-loading" class="embet-loading">Loading emBET…</div>
  <div id="embet-error" class="embet-error"></div>
  <embet-overlay id="embet-overlay" style="display: none;"></embet-overlay>

  <script src="https://unpkg.com/@livelike/[email protected]/dist/bridge.umd.min.js"></script>
  <script>
    (function () {
      var loadingEl = document.getElementById('embet-loading');
      var errorEl = document.getElementById('embet-error');
      var panelEl = document.getElementById('embet-overlay');

      function showPanel() {
        loadingEl.style.display = 'none';
        errorEl.style.display = 'none';
        panelEl.style.display = 'block';
      }

      function showError(message) {
        loadingEl.style.display = 'none';
        errorEl.style.display = 'block';
        errorEl.textContent = message;
        panelEl.style.display = 'none';
      }

      EmbetBridge.init({
        onReady: function () {
          loadingEl.textContent = 'Waiting for configuration…';
        },
        onSdkLoading: function (version) {
          loadingEl.textContent = 'Loading SDK v' + version + '…';
        },
        onSdkLoaded: function () {
          loadingEl.textContent = 'Initializing…';
        },
        onInitialized: function () {
          showPanel();
        },
        onError: function (error) {
          showError(error.message || 'emBET error');
        },
      });
    })();
  </script>
</body>
</html>

You can self-host bridge.umd.min.js instead of unpkg — copy it from node_modules/@livelike/embet-rn/dist/ or use the package export @livelike/embet-rn/bridge.min.

ℹ️
Without EmbetBridge.init(), EmbetOverlay cannot exchange postMessage traffic with the WebView. Props, ref methods, and callbacks behave the same as with bundled HTML.

2. Point EmbetOverlay at your URL

npm install @livelike/embet-rn react-native-webview

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

const CLIENT_ID = 'YOUR_CLIENT_ID';
const EVENT_ID = 'YOUR_EVENT_ID';
const BRIDGE_PAGE_URL = 'https://your-cdn.example.com/embet-bridge.html';

export function EmbetHostedBridgeScreen() {
  const overlayRef = useRef<EmbetOverlayRef>(null);

  const onInitialized = () => {
    overlayRef.current?.configureResize({
      enabled: true,
      hostElement: 'body',
    });
  };

  return (
    <View style={styles.container}>
      <EmbetOverlay
        ref={overlayRef}
        clientId={CLIENT_ID}
        customId={EVENT_ID}
        sdkVersion="1.4.0"
        htmlUrl={BRIDGE_PAGE_URL}
        onInitialized={onInitialized}
      />
    </View>
  );
}

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

Checklist

Requirement	Notes
`<embet-overlay>` in the page	Required host element for the Web SDK
Bridge script + `EmbetBridge.init()`	Matches the default SDK HTML behavior
HTTPS URL (production)	WebView and CDN best practice
CORS / cache headers	Allow your app builds to load the HTML and scripts
Version alignment	Keep `@livelike/embet-rn` in the app and bridge script URL in sync

For sportsbook bet placement on top of this setup, add onPlaceBet and configureBetSlip as in Embedded betslip.