Mini iframe setup and integration

Overview

The mini iframe is a lightweight embeddable widget that allows operators to display a compact version of the main iframe on their website. It provides quick access to key content or functionality without loading the full interface. The mini iframe improves user engagement, supports seamless navigation to the main iframe, and uses the same authentication and integration mechanisms.

Live Demo

Setup

Important

The Mini iFrame is the one part of the frontend integration that is not set up through the integration module. mount() creates a single iframe with a fixed id, and the module deliberately excludes /mini-iframe from its route syncing, so the widget is embedded with a plain iframe tag and its events are handled with window.addEventListener.

Everywhere else in this section, use the module.

To inject the mini-iframe page into your site, add:


<iframe
  name="target"
  src="https://{iframe-host}/{lang}/mini-iframe?jwt={jwt-token}"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
/>

Two attributes matter here, and neither is optional:

allow — video streaming and animations need these browser permissions. Chrome’s autoplay policy blocks media playback without them.
name="target" — only needed if you send messages to the widget. window.frames.target resolves the iframe by this name, so without it the reference is undefined and every send throws a TypeError.

Parameters:

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 issued by your own platform. You implement that endpoint yourself and may use any URL for it — these docs refer to it as get-jwt-token. It’s a required parameter for the players who are authorized on the operators’ platform. See Players Authorization.

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
  name="target"
  src="https://demo-iframe-brand.gr8.tech/en/mini-iframe?jwt=tokenvalue"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
/>

Example for non-authorized players:


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

Interaction

In order for the user to interact with elements on the page, additional integration is required, similar to Navigation & Routing.

Namely, to go to the event page after clicking on the event card in the widget or outcome, the client must subscribe to the navigation event and independently redirect to the page where the main iframe is located by adding the path obtained in the navigation event

Example


window.addEventListener("message", (data) => {
  if (data.type === "navigation") {
    const queryString = objectToQueryFn(data.query);
    navigateWithoutPathReplaceStateFn(
      `https://{main-page-with-integrated-iframe}/${data.path}?${queryString}`,
    );
  }
});

Mini iFrame configuration via Unified Back Office

After completing the technical integration of the Mini iFrame, additional configuration in Unified Back Office is required.

This step is necessary to finalise the Mini iFrame setup and ensure correct widget behaviour.

The configuration must be performed according to the instructions described in Knowledge Hub

Without completing the Unified Back Office configuration, the Mini iFrame may not function correctly even if the technical integration is finished.