# 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.

{% stepper %}
{% step %}

### 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**
{% endstep %}

{% step %}

### Remove the iframe implementation

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

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}
{% endstep %}

{% step %}

### Include the Operator Games API SDK

Include the SDK by adding the **SDK script to your website**, ideally where the iframe was previously rendered. &#x20;

{% hint style="success" %}
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>
{% endhint %}

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}
{% endstep %}

{% step %}

### 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](/developer-docs/operator-sdks/operator-games-api-sdk.md#step-1-authorise-game-session-backend-authorise-api).&#x20;

Authorisation works as follows:&#x20;

* **The operator backend** calls Hub88’s [`/game/authorize`](#step-1-authorise-game-session-backend) endpoint and returns initialisation data to the frontend. See [Step 1 for the endpoint details.](#step-1-authorise-game-session-backend-authorise-api)&#x20;
* **Hub88 API** validates tokens, resolves provider and game configuration, and delivers provider-specific data. See [Step 1 for the API call's response](#step-1-authorise-game-session-backend-authorise-api).&#x20;
* **The operator must ensure** that data with key parameters from the API call's response is returned to the frontend.&#x20;
  {% endstep %}

{% step %}

### **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](/developer-docs/operator-sdks/operator-games-api-sdk.md#step-1-authorise-game-session-backend-authorise-api) and **returned** to the **frontend**.&#x20;

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

**Basic Integration Example Full**

{% code overflow="wrap" lineNumbers="true" %}

```html
<!-- 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>
```

{% endcode %}
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hub88.io/developer-docs/operator-sdks/operator-games-api-sdk/migration-from-iframe-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.