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.

Setup¶

To inject mini-iframe page to your site add:

<iframe src="https://{iframe-host}/{lang}/mini-iframe?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-integration-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/mini-iframe?jwt=tokenvalue" />

Example for non-authorized players:

<iframe src="https://demo-iframe-brand.gr8.tech/en/mini-iframe" />

Interaction¶

In order for the user to interact with elements on the page, additional integration is required, similar to external router integration.

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.