Migration from iframe Integration

This guide walks you through step-by-step how to convert from an iframe-based way of displaying games in your user interface (UI) to using our Operator Games API SDK.

By switching to the SDK, you can expect improved performance and additional features compared to the traditional iframe integration.

1

Check the SDK's coverage

Ensure that the games you are using are supported by the SDK. Currently, the SDK supports games from two providers—Turbostars and OneTouch Originals

2

Remove the iframe implementation

Delete the iframe implementation from your site and site code. You should see something like this in your code file:

<iframe src="https://launcher.server1.ih.testenv.io/game/btsg_csgo?token=..."></iframe>

3

Include the Operator Games API SDK

Include the SDK by adding the SDK script to your website, ideally where the iframe was previously rendered.

Currently the available version is 1.1.2 with the full CDN URL being https://cdn.hub88.io/games-sdk/hub88-games-sdk-1.1.2.js

<script src="https://cdn.hub88.io/games-sdk/hub88-games-sdk-1.1.2.js"></script>

4

Authorise the SDK

For the SDK to initialise properly, you'll need to have your provider_token, provider_pid and launch_base_url which you can receive from the Authorisation's response.

Authorisation works as follows:

• The operator backend calls Hub88’s /game/authorize endpoint and returns initialisation data to the frontend. See Step 1 for the endpoint details.

• Hub88 API validates tokens, resolves provider and game configuration, and delivers provider-specific data. See Step 1 for the API call's response.

• The operator must ensure that data with key parameters from the API call's response is returned to the frontend.

5

Initialise SDK

Use the Hub88 Games API to initialise and configure your game instance as shown in the example. Initialisation snippet

The values of provider_token, provider_pid and launch_base_url must be taken from the Authorisation endpoint call's response and returned to the frontend.

const gameInstance = await Hub88Games.init({
  provider_token: "...",
  provider_pi: "...",
  launcher_base_url: "https://launcher.server1.ih.testenv.io"
});

Basic Integration Example Full

<!-- Container for the game -->
<div id="game-container"></div>

<!-- Include the SDK -->
<script src="https://cdn.hub88.io/games-sdk/hub88-games-sdk-<version>.js"></script>

<script>
async function launchGame() {
  try {
    // Get authorization data from your backend
    const authData = await fetch('/api/game/authorize', {
      method: 'POST',
      body: JSON.stringify({
        game_code: 'btsg_csgo',
        user: 'player123'
        // ... other parameters
      })
    }).then(r => r.json());

    // Initialize Hub88 Games SDK
    const gameInstance = await Hub88Games.init({
      // Required parameters (minimum needed)
      provider_token: authData.provider_token,
      provider_pid: authData.provider_pid,        // Maps to provider_pid
      launcher_base_url: authData.launcher_base_url,

      // Optional parameters
      containerId: 'game-container',
      lang: 'en',
      loginUrl: 'sendPostMessage',  // or your login URL
      depositUrl: 'sendPostMessage' // or your deposit URL
    });

    console.log('Game loaded successfully!');

  } catch (error) {
    console.error('Failed to load game:', error);
  }
}

// Launch the game
launchGame();
</script>