Sportsbook Partner Integration

Appearance

iFrame Integration ​

To integrate the Sportsbook iFrame into your platform using the SDK, follow these steps:

Step 1. Connect the SDK script ​

Include the following script on the page:

html
<script type="text/javascript" src="https://{APP_URL}/assets/sdk/init.js"></script>

The account manager will provide all the necessary credentials, including your personal sportsbook frame URL.

Step 2. Add the iFrame container ​

Insert the following element into the <body> section:

html
<div id="iFrame-container"></div>

Step 3. Initialize the iFrame ​

Once the DOM has successfully loaded, initialize the iFrame script using the init function:

javascript
const bettingFrame = BetSdk.init({
  mainFrameUrl: 'https://<Partner_host>/',
  host: 'https://APP_URL',
  cid: 'PARTNER_ID',
  lang: 'en',
  token: '<string>',
  containerId: 'iFrame-container',
  width: '<string>',
  height: '<string>',
  customStyles: 'https://<url>',
  sub_partner_id: 'sub_partner#123',
  allowParentUrlUpdate: false,
  loginUrl: 'https://<url>' | 'sendPostMessage',
  depositUrl: 'https://<url>' | 'sendPostMessage',
  bannerBetslip: {
    name: 'Banner name',
    url: 'https://<bannerUrl>',
    height: {
      desktop: '510px',
      mobile: 'calc(100dvh - 70px)',
    }
  },
});

Parameter descriptions ​

  • mainFrameUrl (string, optional): The URL of the page on your site where the Sportsbook app is located. This is necessary for the "Share bet" functionality to work.

  • host (string, required): The Sportsbook iFrame host URL.

  • cid (string, required): Your partner ID, provided by the account manager.

  • lang (string, optional): The language code in ISO 639-1 format. If not specified, English is the default language. Users can select their preferred language in the app settings.

  • token (string, optional): The authentication token for the user's session. If omitted, the app will operate in guest mode, where the balance is not displayed and betting functionality is disabled.

    Token requirements:

    • Must contain both letters and numbers.
    • Must be between 10 and 100 characters long.
    • Must be unique per user.
    • Must have a limited lifetime (30 minutes) and be extendable via requests.

  • containerId (string, required): The ID of the DOM element where the iFrame will be rendered.

  • width (string): Valid CSS width value (e.g., "100%", "700px", "100vh").

  • height (string): Valid CSS height value (e.g., "100%", "700px", "100vh").

  • themeEditorData (string): A serialized theme configuration string exported from the Theme Editor (see Saving and exporting settings). Passing this applies your saved theme automatically during initialization.

  • customStyles (string): A URL to custom CSS styles. Learn more here.

  • sub_partner_id (string): An optional sub-partner ID, useful for using a single partner key across multiple projects.

  • allowParentUrlUpdate (boolean, default: false): If true, the setIframePath=/<url> parameter will be added to the parent’s site URL when navigating within the iFrame.

  • loginUrl (string):

    • If set to a login page URL, clicking the login button redirects the player to that URL.
    • If set to "sendPostMessage", the iFrame sends a post message when the player clicks the Leaderboard Participate or the Login button.

  • depositUrl (string):

    • If the user's balance is below than the maximum bet, a top-up suggestion appears under the outcome in the betslip.
    • If set to a deposit page URL, clicking the link redirects the user to that URL.
    • If set to "sendPostMessage", clicking the link triggers a postMessage event with { target: 'depositButton' }.

  • bannerBetslip (object, optional): Configuration for displaying a custom banner inside the Betslip.

    • name (string, required): Display name of the banner.

    • url (string, required): Direct link to an external standalone page. The Sportsbook frontend automatically embeds this URL into an internal <iframe> — only the page URL is required.

    • height (object, optional): Custom height for different devices. If not provided, the following defaults apply:

      • desktop/tablet: 510px
      • mobile: calc(100vh - 70px)

      Note: The banner height will never exceed the actual height of the banner page. If a specified height is larger than the page content, the iframe will automatically shrink to fit.

      • height.desktop (string, optional): Height value for desktop/tablet layout.

      • height.mobile (string, optional): Height value for mobile layout.

SDK Integration Example ​

javascript
<html lang="en">
  <head>
    <script type="text/javascript" src="https://{APP_URL}/assets/sdk/init.js"></script>
  </head>
  <body>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const bettingFrame = BetSdk.init({
          mainFrameUrl: 'https://<Partner_host>/',
          host: 'https://APP_URL',
          cid: 'demopartner',
          lang: 'en',
          token: '<string>',
          containerId: 'iFrame-container',
          allowParentUrlUpdate: true,
          depositUrl: 'https://your-deposit-page.com',
        });
      });
    </script>
  </body>
</html>

At this point, the Sportsbook iFrame is successfully integrated into your platform.