Skip to content

Integration

The betting frame allows seamless integration into partner websites, providing a complete betting experience with customization options for theming, localization, and event handling. The integration can be done either as a Single Page Application (SPA), with Server-Side Rendering (SSR), through the integration of individual widgets (Outside Widgets - only client), or you can integrate your own widget into betting (Custom Widget - only client), depending on your needs. A platform with its own betslip can keep it and let the frame drive only the odds (External betslip).

Configuration options

AppInitOptions

AppInitOptions is the top-level configuration object, which has the following structure:

1
2
3
4
5
6
7
8
interface AppInitOptions {
  token: string;
  rootElement: string;
  url: BettingUrl;
  theme: Theme;
  themePreset: string;
  defaultSettings: DefaultSettings;
}
Property Description Type Required
token Token of the current player Token string yes
rootElement Identifier of the DOM element in which betting will be embedded string yes
url All endpoints for betting BettingUrl yes
theme Theme applied at load time. Overridden by an active theme preset. Theme no
themePreset Name of a theme preset to apply at load time. Recommended for SSR to avoid a theme flash. string no
defaultSettings Default settings for the SPA. DefaultSettings no

Theming

The theme field sets the theme at load time. To switch themes at runtime (e.g. Light/Dark mode), define Theme Presets in the back-office and use setThemePreset - the deprecated updateThemeConfig is no longer the recommended approach.

For SSR integrations, pass the themePreset field with the preset name at load time. Otherwise the server renders the default preset first and the browser only switches to the selected preset at runtime, causing a visible theme flash (e.g. a light-to-dark jump on first paint).

BettingURL contains all the necessary endpoints for the SPA:

1
2
3
interface BettingUrl {
  basename: string;
}
Property Description Type Required
basename The basename field is used to specify the base URL for all relative links within the embedded betting. This is particularly useful when the application is deployed within a subdirectory of a domain. Often this will be something like /en/betting. string yes

Default settings

DefaultSetting options are used to set the initial configuration of the application.
They define default values for various settings, such as display odds, which can later be changed by gambler.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
interface DefaultSettings {
  oddFormat: OddFormat;
  oddAcceptStrategy: OddAcceptStrategy;
}

type OddFormat =
  | "Decimal"
  | "Fractional"
  | "US"
  | "HongKong"
  | "Indo"
  | "Malay";

type OddAcceptStrategy = "acceptAll" | "acceptHigher" | "alwaysAsk";
Property Description Type Default value Required
oddFormat Default odd format for the SPA. OddFormat Decimal false
oddAcceptStrategy Default odd accept strategy for the SPA. OddAcceptStrategy acceptAll false

Integration Bootstrap script

Bootstrap script is needed for integrations (SPA) or Outside Widgets into your product.

1. Add the bootstrap script

Include the script for the appropriate environment. Use the staging version during development and testing, and production for live deployment.

  • Production: 
    1
2
3
4
5
    <script
  type="module"
  defer
  src="https://spa.databet.cloud/v2/<project-name>/bootstrap.js"
></script>
  • Staging: 
    1
2
3
4
5
    <script
  type="module"
  defer
  src="https://spa.int.databet.cloud/v2/<project-name>/bootstrap.js"
></script>

Warning

type="module" is required attribute

Note

This links will be provided by DATA.BET

SPA Integration

To integrate the betting SPA into your product, follow these steps:

1. Add DOM containers

You must include the following elements in your HTML layout:

  • Main container — this is where the entire betting application will be rendered:
1
<div id="betting__container"></div>
  • Betslip containers — separate element for betslip views: 
    1
    <div id="betting-betslip"></div>

Note

These elements must exist in the DOM before initializing the SPA

2. Add the bootstrap script

You need to integrate the bootstrap script.

3. Initialize the application

Once the script has loaded, a global object bettingLoader becomes available on the window. Use its load method to start the SPA:

1
2
3
4
5
6
interface BettingLoader {
  load: (
    options: AppInitOptions,
    onLoad: (bettingAPI: BettingAPI) => void,
  ) => void;
}

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div id="betting__container"></div>
<div id="betting-betslip"></div>

<script
  type="module"
  async
  src="https://spa.databet.cloud/v2/<project-name>/bootstrap.js"
  onload="loadBetting()"
></script>
<script>
  function loadBetting() {
    bettingLoader.load(
      {
        url: {
          basename: "/",
        },
        token: `<token>`,
        rootElement: "betting__container",
        theme: {
          offsetTop: 64, // Offset for sticky elements when scrolling (useful for fixed headers)
          palette: {
            colorsPrimary1: "#000000",
            colorsPrimary2: "#ffffff",
            colorsSecondary1: "#f3f3f3",
            colorsSecondary2: "#e3e3e3",
            colorsSecondary3: "#9999a1",
            colorsAccent1: "#ff6b00",
            colorsAccent2: "#ffb700",
            colorsAccent3: "#a900d9",
            textButton: "#ffffff",
            textPrimary: "#000000",
            textSecondary: "#656565",
            notificationBlocked: "#b5b5b5",
            notificationError: "#ff3e33",
            notificationInfo: "#0852ff",
            notificationSuccess: "#05BC0B",
            notificationWarning: "#ff9000",
          },
        },
        defaultSettings: {
          oddFormat: "Decimal",
        },
      },
      (bettingAPI) => {
        // use bettingAPI to interact with spa on runtime
      },
    );
  }
</script>

Important

Changes to the token require a page reload to take effect. This limitation is expected to be resolved in future updates.

4.Style the betslip containers

The SPA renders betslip view into dedicated container, depending on screen size:

React Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<script>

  type IStypeBetslip = Pick<ToggleWidgetBetslipPayload, "breakpoint" | "isOpen">;

  const BetslipStyleGetter: Record<
    "static" | "island",
    (data: IStypeBetslip) => string
  > = {
    static: ({ isOpen, breakpoint }: IStypeBetslip): string => {
      if (breakpoint === "mobile") {
        if (isOpen) {
          document.body.classList.add("overflow-hidden");
          return "fixed bottom-0 left-0 top-0 z-40 lg:hidden w-full h-full";
        } else {
          document.body.classList.remove("overflow-hidden");

          return "fixed bottom-0 left-0 -z-40 w-full";
        }
      }

      if (breakpoint === "tablet") {
        return "fixed top-0 left-auto right-0 z-40 h-[100vh]";
      }

      return "";
    },
    island: ({ isOpen, breakpoint }): string => {
      if (breakpoint === "mobile") {
        if (isOpen) {
          document.body.classList.add("overflow-hidden");
          return "fixed bottom-0 left-0 top-0 z-40 lg:hidden w-full h-full max-h-full";
        } else {
          document.body.classList.remove("overflow-hidden");

          return "fixed bottom-0 left-0 z-40 w-full";
        }
      }
      if (breakpoint === "tablet") {
        return "fixed inset-x-1/2 bottom-0 z-[999999] w-full max-w-[320px] max-h-[100vh] -translate-x-1/2";
      }
      return "fixed inset-x-1/2 bottom-0 z-[999999] w-full max-w-[320px] max-h-[80vh] -translate-x-1/2";
    },
  };

  const BetslipContainer: FC = () => {
    const [state, setState] = useState<ToggleWidgetBetslipPayload | undefined>();

    const initBetting = useCallback(() => {
      if (!window.bettingAPI) return;

      window.bettingAPI.subscribe("toggle-widget-betslip", setState);
    }, []);

    useEffect(() => {
      document.addEventListener("betting-init", initBetting);

      return () => document.removeEventListener("betting-init", initBetting);
    }, [initBetting]);

    const getter = state
      ? BetslipStyleGetter[state.widgetType] || BetslipStyleGetter["static"]
      : undefined;

    const className = state && getter
      ? getter({ isOpen: state.isOpen, breakpoint: state.breakpoint })
      : "";

    return <div id="betting-betslip" className={className}></div>;
  };
</script>

Again, feel free to adapt this styling for your layout — e.g., adjusting height or position to avoid overlapping your app’s header or sidebar.

SSR Integration

The SSR (Server-Side Rendering) integration with the DATA.BET platform consists of two parts:

  1. Server-side integration — generating betting HTML fragments on the server.
  2. Client-side integration — initializing interactivity via the bettingAPI.

1. Server-side integration

DATA.BET provides an SSR server that returns pre-rendered betting application HTML for a specific user route.
To integrate it, send a POST request to the SSR endpoint. The request URL must exactly match the path and query parameters the user is currently visiting (i.e., pathname + query).

The server endpoint depends on the environment:

  • Production: https://ssr.databet.cloud
  • Staging/Integration: https://ssr.int.databet.cloud

Below is an example used on the demo site (Next.js):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import { headers } from "next/headers";
import { userAgent } from "next/server";

const BettingPage = async ({
  params,
}: {
  params: { locale: string };
}) => {
  const locale = params.locale;

  const requestHeaders = await headers();
  const { device } = userAgent({ headers: requestHeaders });
  // The user's IP from your trusted proxy; the SSR server needs it for geo-targeted content.
  const clientIp = requestHeaders.get("x-forwarded-for") ?? "";
  // Set by your middleware only when the page is served with a nonce-based CSP,
  // see "4. Content Security Policy" below.
  const cspNonce = requestHeaders.get("x-nonce");
  let requestUrl;

  try {
    requestUrl = new URL(requestHeaders.get("x-url") || "");
  } catch {
    return null;
  }

  const appInitOptions = {
    rootElement: "root",
    defaultLayout: device.type || "desktop",
    token,
    url: {
      staticEndpoint: process.env.CDN_URL || "<your_static_endpoint>",
      basename: `${locale}/${userTokenLabel}/ssr`,
    },
     theme: { ... }
  };

  // Insert a link to the SSR server based on the current environment.
  const response = await fetch(`https://ssr.int.databet.cloud${requestUrl.pathname}${requestUrl.search}`, {
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      "X-Forwarded-For": clientIp,
      ...(cspNonce && { "X-CSP-Nonce": cspNonce }),
    },
    method: "POST",
    body: JSON.stringify({
      bettingOptions: appInitOptions,
    }),
  });

  const bettingHtml = await response.text();

  return (
    <>
      <main
        suppressHydrationWarning={true} // Important for SSR content that might differ slightly on hydration
        dangerouslySetInnerHTML={{ __html: bettingHtml }}
      />

      <BettingIntegration />
    </>
  );

⚠️ Important Notes

1. Betting Token Management

The token field in AppInitOptions is required.
You are fully responsible for the management of this token in your application — including:

  • Generation (e.g., via guest or login flow)
  • Validation (e.g., signature or expiration)
  • Storage (e.g., HTTP-only cookie or server session)
  • Refresh or renewal (if applicable)

2. Device Layout Detection

The defaultLayout field in AppInitOptions defines how the betting UI should render: 'mobile', 'tablet', or 'desktop'.
This should be determined based on the user's device, typically by inspecting the User-Agent header In a Next.js App Router environment, use the userAgent utility to extract device info safely on the server:

1
2
3
4
5
import { userAgent } from "next/server";
import { headers } from "next/headers";

const requestHeaders = await headers();
const layout = userAgent({ header: requestHeaders }).device.type || "desktop";

3. Request url

The SSR request must target the exact URL that corresponds to the user’s current location, including both the pathname and search components. This ensures that the returned betting content is accurate and relevant for the current route.

In a Next.js application, the current URL should be captured and forwarded via custom headers (e.g., x-url) using middleware. This allows the server component to reconstruct the user's location and perform the SSR request accordingly.

1
2
3
4
5
export function middleware(request: NextRequest) {
  const headers = new Headers(request.headers);
  headers.set("x-url", request.url);
  return NextResponse.next({ headers });
}

4. Content Security Policy (nonce)

If your page is served with a nonce-based Content-Security-Policy (for example script-src 'nonce-…' 'strict-dynamic'), the browser executes only the <script> tags that carry the matching nonce attribute. The SSR fragment contains parser-inserted scripts (hydration data, the module entry) and <link rel="modulepreload"> tags, so without the nonce the browser blocks them and the betting application does not start.

Pass the nonce of the current page in the X-CSP-Nonce request header. The SSR server then sets nonce="…" on every <script> and <link rel="modulepreload"> in the response; nothing else in the markup changes. Do not post-process the returned HTML yourself.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// page.tsx — forward the same nonce to the SSR server
const requestHeaders = await headers();
const cspNonce = requestHeaders.get("x-nonce");

const response = await fetch(ssrUrl, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-Forwarded-For": clientIp,
    ...(cspNonce && { "X-CSP-Nonce": cspNonce }),
  },
  body: JSON.stringify({ bettingOptions: appInitOptions }),
});

The value must be a base64 string (A-Z a-z 0-9 + / - _, optional = padding), up to 256 characters; any other value is rejected with 400.

The client-side part needs nothing extra: the bootstrap script and the chunks it loads are created programmatically, which 'strict-dynamic' already trusts.

2. Client-side integration

Once the server-rendered HTML is loaded and hydrated on the client-side, the betting-init event is dispatched, signaling that window.bettingAPI is ready.

This API enables interaction with the embedded betting application: event subscriptions, register callback, etc.

Example (Client Component in Next.js):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
"use client";

import { useCallback, useEffect, useState } from "react";

export const BettingIntegration = () => {
  const initBetting = useCallback(() => {
    window.bettingAPI.subscribe(
      "toggle-widget-betslip",
      ({ isOpen: isOpenState }: { isOpen: boolean }) => {
       ...
      }
    );

    // Add additional subscriptions or actions with the BettingAPI if required
  }, []);

  useEffect(() => {
    // Check if bettingAPI is already available (in case betting-init fired earlier)
    if (window.bettingAPI) {
      initBetting();
    } else {
      document.addEventListener("betting-init", initBetting);
    }

    return () => {
      document.removeEventListener("betting-init", initBetting);
    };
  }, [initBetting]);

  return null;
};

3. Fallback to SPA integration if SSR fails

If you are using SSR (Server-Side Rendering) integration and the SSR server responds with an error (for example, a 4xx/5xx HTTP status or a network failure), it is recommended to gracefully fall back to the SPA integration. This ensures that users can still access the betting application even if SSR is temporarily unavailable.

Steps to implement fallback:

  1. Attempt SSR first:
    Try to fetch the SSR-rendered HTML from your SSR endpoint as usual.

  2. Detect SSR failure:
    If the SSR request fails (e.g., non-200 response, network error, or invalid HTML), proceed to load the SPA client-side.

  3. Initialize SPA via bettingLoader:
    Use the same bettingLoader.load method as described above to bootstrap the SPA in the client browser.

Outside Widgets

How it works

Loading and initializing the bootstrap script only registers the widget custom element definitions with the browser — it does not insert any widgets into the DOM. To render a widget, you must also add its tag to your HTML markup (see step 3).

1. Add the bootstrap script

You need to integrate the bootstrap script.

2. Initialize the application

Once the script has loaded, a global object bettingLoader becomes available on the window. Call its loadWidgets method to register the custom elements with the browser:

1
2
3
4
5
6
interface BettingLoader {
  loadWidgets: (
    options: AppInitOptions,
    onLoad: (bettingAPI: BettingAPI) => void,
  ) => void;
}

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script
  type="module"
  async
  src="https://spa.databet.cloud/v2/<project-name>/bootstrap.js"
  onload="loadWidgets()"
></script>
<script>
  function loadWidgets() {
    bettingLoader.loadWidgets(
      {
        url: {
          basename: "/",
        },
        token: `<token>`,
        rootElement: "betting__container",
        defaultSettings: {
          oddFormat: "Decimal",
        },
      },
      (bettingAPI) => {
        // use bettingAPI to interact with widgets on runtime
        // window.bettingAPI = bettingAPI;
      },
    );
  }
</script>

Note

Outside Widgets are themed by the configuration set in the back office. The style attribute on each widget element lets you optionally override individual CSS variables on top of that — see step 3 below.

3. Add the widget elements to your page

After loadWidgets() registers the custom elements, place the widget tags directly in your HTML wherever you want each widget to appear. If you omit this step, no widgets will be rendered, even if loadWidgets() completes successfully.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
interface BaseWidgetStyle {
  "--bet-font-sans"?: string;
  "--bet-base-font-size"?: string;
  "--bet-colors-primary-1"?: string;
  "--bet-colors-primary-2"?: string;
  "--bet-colors-secondary-1"?: string;
  "--bet-colors-secondary-2"?: string;
  "--bet-colors-secondary-3"?: string;
  "--bet-colors-accent-1"?: string;
  "--bet-colors-accent-2"?: string;
  "--bet-colors-accent-3"?: string;
  "--bet-text-button"?: string;
  "--bet-text-primary"?: string;
  "--bet-text-secondary"?: string;
  "--bet-notification-blocked"?: string;
  "--bet-notification-error"?: string;
  "--bet-notification-info"?: string;
  "--bet-notification-success"?: string;
  "--bet-notification-warning"?: string;
  "--bet-rounded-2"?: string;
  "--bet-rounded-4"?: string;
  "--bet-rounded-6"?: string;
  "--bet-rounded-8"?: string;
  "--bet-rounded-12"?: string;
  "--bet-rounded-24"?: string;
}

interface IDefaultWidgetProps {
  style?: BaseWidgetStyle; // Optional. Overrides individual CSS variables on top of the back-office theme.
  "global-size"?: true; // Default false, take the dimensions of the document for resizing and not the integration block.
}

Top events widget

1
2
3
4
5
6
interface IntrinsicElements {
  "top-events-outside-widget": IDefaultWidgetProps & {
    "sport-type"?: "sports" | "esports" | "all",
    "with-sport-title"?: boolean, // default value: true
  };
}

1
<top-events-outside-widget sport-type="sports" />

Top Events Widget

1
<top-events-outside-widget sport-type="sports" with-sport-title="false" />

Top Events Widget without sport title

Top tournament widget

The widget displays a carousel of event cards for tournaments assigned to a featured zone. Players can place bets directly from these cards, so the Island Betslip Widget (island-betslip-widget) must also be added to the same page.

1
2
3
4
5
6
7
8
9
interface IntrinsicElements {
  "top-tournament-outside-widget": IDefaultWidgetProps & {
    "zone-id": string, // required, the widget is not rendered without it
    type?: "firstActive" | "all", // default value: "firstActive"
    status?: "live" | "prematch", // default value: live and prematch events
    limit?: number, // default value: 10
    "with-title"?: boolean, // default value: true
  };
}
Attribute Description
zone-id ID of the featured zone whose tournaments the widget shows. Your DATA.BET manager provides the zone IDs available for your project.
type firstActive shows the first tournament of the zone that has events. all shows all tournaments of the zone with a tab for each of them.
status Shows only live or only prematch events. If omitted, both are shown.
limit The maximum number of event cards in the carousel.
with-title Shows the widget header. Pass false to hide it. 
1
<top-tournament-outside-widget zone-id="tournament_widget_slot1"></top-tournament-outside-widget>

Predictions: Crypto Up or Down

To show the Crypto Up or Down predictions, for example on the main page of your site, set zone-id to prediction_crypto:up_or_down and type to all:

1
2
3
4
5
<top-tournament-outside-widget
  zone-id="prediction_crypto:up_or_down"
  type="all"
></top-tournament-outside-widget>
<island-betslip-widget></island-betslip-widget>

For a predictions zone, the widget works as follows:

  • The header shows the Crypto Up or Down title and icon. Pass with-title="false" to hide it.
  • The events are sorted so that the predictions closing soonest come first.
  • With type="all", the tabs filter the cards by asset: All and a tab for each asset that has active events, such as BTC, ETH, and SOL. The set of tabs is dynamic: a tab appears only while its asset has at least one active event, and it disappears once those events end.
  • With type="firstActive", the widget shows the cards of all assets without the tabs.
  • The widget refreshes the list of tournaments and events automatically, so ended predictions are replaced with new ones without reloading the page.
  • If the zone has no active events, the widget renders nothing.

Island Betslip Widget

1
2
3
interface IntrinsicElements {
  "island-betslip-widget": IDefaultWidgetProps;
}

1
2
3
<island-betslip-widget
  className="You need to specify classes similar to SPA integration"
/>

End-to-end example

A working Outside Widgets integration needs three things wired together:

  • the bootstrap script and loadWidgets() call;
  • a betslip widget alongside the other widgets (players always need one to place bets);
  • a subscription to the redirect event so users can navigate from a widget into a login flow or a specific event page.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- 1. Bootstrap script — registers the custom elements via loadWidgets() -->
<script
  type="module"
  async
  src="https://spa.databet.cloud/v2/<project-name>/bootstrap.js"
  onload="initWidgets()"
></script>
<script>
  function initWidgets() {
    bettingLoader.loadWidgets(
      { token: `<token>`, url: { basename: "/" } },
      (bettingAPI) => {
        // Subscribe to redirect events so users can navigate from widgets
        // (open a login modal, log out, or jump into an event page).
        bettingAPI.subscribe("redirect", ({ destination, link }) => {
          switch (destination) {
            case "login":
              window.location.href = "#!/auth/signin?popup";
              break;
            case "logout":
              window.location.href = "#!/auth/signout";
              break;
            case "betting-page":
              window.location.href = `/betting/${link}`;
              break;
          }
        });
      }
    );
  }
</script>

<!-- 2. Widget elements — must be present in the markup to render.
     The betslip is always required alongside the other widgets. -->
<top-events-outside-widget sport-type="sports"></top-events-outside-widget>
<island-betslip-widget></island-betslip-widget>

See Betting events for the full list of events you may want to subscribe to (e.g. handle-not-enough-balance to open a deposit modal).

Custom Widget

The Betting Frame supports custom widgets, allowing you to integrate your own content into the betting interface. Custom widgets subscribe to mount events from the betting API, enabling you to render custom content in designated containers using any framework or vanilla JavaScript.

Implementation

Custom widgets require:

  1. Event Subscription: Subscribe to custom-widget-init events from the betting API
  2. DOM Manipulation: Use the provided DOM element to render custom content
  3. Event Handling: Handle mount events to get container information

Example (React)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
"use client";

import { useBettingApi } from "@/hooks/useBettingApi";
import { useEffect, useCallback, useState } from "react";
import { createPortal } from "react-dom";

interface ICustomWidgetMountEvent {
  containerId: string;
  element: HTMLElement;
}

const CustomWidget = () => {
  const bettingApi = useBettingApi();
  const [portalData, setPortalData] = useState<ICustomWidgetMountEvent | null>(null);

  const handleCustomWidgetMount = useCallback(
    (data: ICustomWidgetMountEvent) => {
      setPortalData(data);
    },
    [],
  );

  useEffect(() => {
    if (!bettingApi) return;

    (bettingApi as any).subscribe(
      "custom-widget-init",
      handleCustomWidgetMount,
    );
  }, [bettingApi, handleCustomWidgetMount]);

  if (!portalData) return null;

  const content = (
    // Your react component
  );

  return createPortal(content, portalData.element);
};

export default CustomWidget;

Note

This example shows a React implementation using createPortal. You can use any framework (Vue, Angular, vanilla JavaScript) to manipulate the DOM element provided in the event. The key is to use the element property from the event to render your custom content.

For more details about betting events, see Betting Events.