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) or with Server-Side Rendering (SSR), depending on your needs.

Configuration options

AppInitOptions

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

interface AppInitOptions {
  token: string;
  locale: string;
  currency: string;
  rootElement: string;
  isAuthorized: boolean;
  url: BettingUrl;
  features: Record<FeatureKeys, boolean>;
  theme: Theme;
  defaultSettings: DefaultSettings;
}

Property	Description	Type	Required
`token`	Token of the current player Token	`string`	yes
`locale`	Selected language	`Locale code`	yes
`currency`	Currency code in the ISO:4217 format	`string`	yes
`rootElement`	Identifier of the DOM element in which betting will be embedded	`string`	yes
`isAuthorized`	Player's authorization status	`boolean`	yes
`url`	All endpoints for betting	`BettingUrl`	yes
`features`	A set of Features that are responsible for connecting various SPA functionality.	`Record<FeatureKeys, boolean>`	no
`defaultSettings`	Default settings for the SPA.	`DefaultSettings`	yes

BettingURL contains all the necessary endpoints for the SPA:

interface BettingUrl {
  gqlEndpoint: string;
  staticEndpoint: string;
  basename: string;
}

Property	Description	Type	Required
`gqlEndpoint`	Path to the GraphQL server	`string`	yes
`staticEndpoint`	Path to the server where all the statistics are stored (`js/css/assets`)	`string`	yes
`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.	`string`	yes

Features

The SPA provides an option for enabling or disabling various new, or experimental features:

IS_MEMORY_ROUTER uses MemoryRouter instead of BrowserRouter, allowing internal navigation within the SPA without changing the site's URL

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.

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

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 elements for mobile and tablet betslip views (rendered only on corresponding devices):
1 2
<div id="betting-betslip-mob"></div> <div id="betting-betslip-tablet"></div>

Note

These elements must exist in the DOM before initializing the SPA

2. 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:

<script type="module" defer src="https://spa.databet.cloud/v2/<project-name>/bootstrap.js"></script>

Staging:

<script type="module" defer src="https://spa.int.databet.cloud/v2/<project-name>/bootstrap.js"></script>

Note

This links will be provided by data.bet

Note

type="module" is required attribute

3. Initialize the application

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

interface BettingLoader {
  load: (
    options: AppInitOptions,
    onLoad: (bettingAPI: BettingAPI) => void,
  ) => void;
}

Example

<div id="betting__container"></div>
<div id="betting-betslip-mob"></div>
<div id="betting-betslip-tablet"></div>

<script type="module" async src="https://spa.databet.cloud/v2/<project-name>/bootstrap.js" onload="loadBetting()"></script>
<script>
    function loadBetting() {
        bettingLoader.load({
            url: {
                staticEndpoint: `<link to static>`, // will be provided by data.bet
                gqlEndpoint: "<link to api endpoint>", // will be provided by data.bet
                basename: "/",
            },
            token: `<token>`,
            locale: "uk",
            currency: "usd",
            rootElement: "betting__container",
            isAuthorized: true,
            theme: {
                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, locale, or currency 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 views into two dedicated containers, depending on screen size:

Mobile betslip (#betting-betslip-mob) On our demo site, we applied the following styling using Tailwind CSS:

<div
  id="betting-betslip-mob"
  className={
    isOpen
      ? "fixed bottom-0 left-0 z-40 block lg:hidden w-full h-full"
      : "fixed bottom-[18px] left-0 z-40 w-full"
  }
/>

When the betslip is closed, a small button sits 18px from the bottom.
When opened, it expands to cover the entire screen.
This behavior is controlled via the toggle-widget-betslip event.

In your configuration, this layout can be customized — for example, to account for a page footer, or to prevent the betslip from covering a sticky header.

Tablet betslip (#betting-betslip-tablet) On tablets, we use a sidebar that stretches the full height of the viewport:

<div
  id="betting-betslip-tablet"
  class="hidden lg:block xl:hidden fixed top-0 left-auto right-0 z-40 h-[100vh]"
></div>

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

Note

Support for server-side rendering (SSR) is currently under development. Stay tuned for updates in future releases.