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>',
  isOpenThemeEditor: true,
  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.

    If your site supports multiple themes, for example, light and dark, you can pass the theme selected by the user when initializing the Sportsbook. This allows you to display different themes to different users.

  • isOpenThemeEditor (boolean, default: false): If true, the Theme Editor opens automatically once the app has loaded, so you can adjust the colours, radii, and font live and preview the result on your own page. Use it while integrating to build your theme, then export it and pass the exported string via themeEditorData for production. Learn more here.

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