Skip to content

Deprecated Frontend integration

How to insert iFrame?

<iframe src="https://{iframe-host}/{lang}/?jwt={jwt-token}" />
  • iframe-host - provided by GR8 Tech host of iframe for a client.
  • lang - iframe language due to the ISO 639-1 (List of ISO 639 language codes ). The supported languages list is described in the “General integration info“ section. iFrame will use default language in case of provisioning language which is not supported by iFrame. The default language will be configured during the tenant setup process and can be changed soon.
  • jwt - jwt auth token received from a /get-jwt-token endpoint. It’s a required parameter for the players who are authorized on the operators' platform.

Note

There is no need to receive and post jwt-token in a case when the end-user is not authorized on the client platform.

Example for authorized players:
<iframe src="https://demo-iframe-brand.gr8.tech/en/?jwt=tokenvalue" />
Example for non-authorized players:
<iframe src="https://demo-iframe-brand.gr8.tech/en/" />

For appropriate work of video streaming service, you should add the following attribute to iFrame: allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share". This is required due to Chrome's autoplay policy, which restricts media playback unless appropriate permissions are explicitly set. and "allow-downloads" - to allow to download image from ShareBet feature

Example

<iframe src="https://demo-iframe-brand.gr8.tech/en/" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;  picture-in-picture; web-share" />

Communication with iframe

From the client site - use post message to send command to iframe to notify about logout happened.

iFrame is logging out each time the client enters the iFrame page and then if JWT was provided it is logging in.

It is the operators' responsibility to send us a “logout event” or rerender iFrame in case when player's session expires on the operators' platform.

Post message example:
window.frames.target.postMessage(
  {
    type: "iframe",
    value: { logout: true },
  },
  "*"
); // where * should be replaced with iframe domain

The client should implement the handle mechanism of the next iframe messages by dataType for correct interaction between the client’s platform and iFrame. Example below:

  if (data.type === "login.click") {
    // This message is being posted when user clicks on login button in iframe. This action needed to handle any redirects on login page on wrapper site.
    // It can happen when player is not authorized and tries to make authorized action
    // Operator needs to open login modal or route to the login page
  }
  if (data.type === "register.click") {
    // The iframe may notify the client site when the user attempts to perform an action that requires registration 
    // Triggered when the user clicks the register button inside the iframe.
    // Operator should handle this by showing the registration modal or routing to the registration page.
  }
  if (data.type === "auth.fail") {
    // This message is being posted when auth in iframe site fails but was successful on wrapper site. It notifies that we can’t login player inside the iFrame with provided token. Useful for integration process.
    // Operator needs to handle auth failure triggered from auth api called inside iframe
  }
  if (data.type === "user.balance") {
    // This message is being posted after the player made some action which changed his balance. For example: placed a bet or cashout
    // Operator may need to reload user balance on his platform
    // Useless for transfer wallet integration
  }
});

How to store browser's history?

To ensure accurate tracking of the browser's history, use the postMessage to communicate with the iframe, notifying it of navigation actions.

It is the responsibility of the operators to send an “iframe-navigation” event upon the initial page load to record the browser history based on the visited paths.

Post message example:
window.frames.target.postMessage(
  {
    type: "iframe-navigation",
    value: { path: `${path}` },
  },
  "*"
); // where * should be replaced with iframe domain

${path} - path on the client site (e.g., '/basketball/live')

The post message example below:

Post message example:
{
  type: "iframe-navigation",
  value: {
    path: "/basketball/live",
  },
}

The iframe-navigation event also enables the client site to control navigation inside the iframe.
This allows the client to create navigation links that direct the user to specific sections within the iframe.

For example, a client may choose to implement their own custom sidebar with sports navigation items. By sending iframe-navigation messages, these items can seamlessly redirect the iframe to the corresponding sections, providing full flexibility in how navigation is presented to the user.

Video streaming and animation request

The client must send an additional postMessage containing the full URL of the current page (window.location.href). This value is required to construct the correct request headers for video streaming and animation requests. The message should be sent when the iframe is loaded.

Post message example:
window.frames.target.postMessage(
  {
    type: "client-url",
    value: { href: window.location.href },
  },
  "*"
); // where * should be replaced with iframe domain

When generating a shareable bet link, the URL is built using the client site's origin and a base path. To provide this, the client must send a client-url postMessage containing window.location.href when the iframe loads.

By default, if no basePath is provided, the link falls back to {origin}/sports/{lang}?shareKey=.... If the sportsbook is mounted on a custom path, the client can pass an optional basePath field:

Post message example:
window.frames.target.postMessage(
  {
    type: "client-url",
    value: {
      href: window.location.href,
      basePath: `${path-to-sportsbook}`, // 'sportsbook', 'casino/sportsbook', etc.
    }
  },
  "*"
); // where * should be replaced with iframe domain
This produces a share link like https://iframe.example.com/sportsbook?shareKey=... instead of the default https://iframe.example.com/sports/en?shareKey=....

basePath values reference

basePath should represent the path segment(s) between the client's origin and the ?shareKey query parameter in the resulting share link.

Examples:

Client wants https://iframe.example.com?shareKey=... → basePath: ''

Client wants https://iframe.example.com/sportsbook?shareKey=... → basePath: 'sportsbook'

Client wants https://iframe.example.com/casino/sportsbook?shareKey=... → basePath: 'casino/sportsbook'

If basePath is not provided, the link falls back to the default format: {origin}/sports/{lang}?shareKey=...

Clients that don't provide basePath are not affected — the default behavior is preserved.

Handling shareKey on iframe initialization

When the client app loads and detects a shareKey query parameter in the URL, it must forward it to the iframe src:

const params = new URLSearchParams(window.location.search);
const shareKey = params.get('shareKey');

const iframeSrc = shareKey
  ? `https://iframe.example.com/sports/en?shareKey=${shareKey}`
  : `https://iframe.example.com/sports/en`;

Without this, the share bet link will open the client page correctly but the iframe won't know which bet to display.

Theme Mode Integration

Iframe supports dynamic theme switching between light and dark modes.
Theme changes are communicated via the postMessage API.

How it Works

When the client site toggles its theme, it must notify the embedded iframe using postMessage. The iframe will then apply the theme accordingly.

Message Specification

  • Message Type

theme-mode-change

  • Message Data

    {
  "mode": "light" | "dark"
}

  • mode: the theme mode currently active on the client site.

  • available modes: light and dark only.
Post message example:
const currentMode = 'dark'; // 'light'

window.frames.target.postMessage(
  {
    type: "theme-mode-change",
    value: { mode: currentMode },
  },
  "*"
); // where * should be replaced with iframe domain

Initialization via postMessage

When the iframe sends an initialization message of type sdkInit, the payload may contain a defaultThemeMode property:

window.postMessage(
  {
    type: 'sdkInit',
    value: {
      defaultThemeMode: 'light' // or 'dark'
    }
  },
  '*'
);

Multi-Currency Balance Communication via postMessage

When the iframe user has a multi-currency balance, the embedded iframe communicates this information to the client site using the postMessage API. This ensures both sides stay synchronized about the available balances and the selected currency.

The iframe emits a postMessage with the following structure:

Example of postMessage:
{
  type: 'user.multiCurrencyBalance',
  data: {
    multiCurrencyBalance: {
      USD: {
        available: 999
      },
      EUR: {
        available: 999
      }
    },
    selectedCurrency: 'EUR'
  }
}

multiCurrencyBalance: An object where each key is a currency code (e.g., USD, EUR) with its corresponding balance details.

selectedCurrency: The currently selected currency by the user.

Updating Currency from Client

The client site can change the active currency by sending a postMessage back to the iframe with the following structure:

Example of postMessage:
window.frames.target.postMessage(
  {
    type: 'currency-update',
    value: { currency },
  },
  "*"
); // where * should be replaced with iframe domain

${currency} - selected currency on client site
This instructs the iframe to switch to the provided currency.

Forced balance refresh

The parent page can trigger a forced balance refresh inside the embedded iframe by sending a postMessage with type get-user-balance. This will make the iframe request the latest balance and update its internal state/UI.

Example of postMessage:
window.frames.target.postMessage(
  {
    type: 'get-user-balance',
  },
  "*"
); // where * should be replaced with iframe domain

The iframe cannot directly open links in the same browser tab due to browser security restrictions on iframes (known as the same-origin policy).

Calls like window.top.location.replace() or window.top.open() are blocked if the iframe is embedded from a different domain.

To handle navigation safely, the iframe sends a postMessage with type openLink event to the parent page.

Example of postMessage:
{
  "type": "openLink",
  "url": "<string>", 
  "target": "<string>"
}
url: Absolute URL of the destination page. This is where the parent page should navigate.

target: Navigation target ('_self', '_blank', etc.).

On the parent page, the client should listen for this message and handle the navigation.

Example of postMessage handling:
window.addEventListener("message", (event) => {
  if (event.data?.type === "openLink") {
    const { url , target } = event.data;
    window.open(url, target);
  }
});