Shadow mode integration

INFO

The account manager will provide all the required credentials, including your personal sportsbook URL {APP_URL}.

To integrate the Sportsbook app into your platform using Shadow mode, follow these steps:

Step 1. Connect the SDK script

Include the following script on the page:

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

Step 2. Add the application container

Insert the following element in the place where you want to embed our application:

<div id="sportsbook-placeholder"></div>

Step 3. Initialize the application

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

const SportsbookApp = Sportsbook.init({
  host: 'https://APP_URL',
  cid: 'PARTNER_ID',
  allowToChangeParentStyles: <boolean>,
  lang: 'en',
  token: '<string>',
  containerId: 'sportsbook-placeholder',
  themeEditorData: '<string>',
  customStyles: 'https://<url>',
  sub_partner_id: 'sub_partner#123',
  loginUrl: 'https://<url>' | 'sendPostMessage',
  depositUrl: 'https://<url>' | 'sendPostMessage',
  bannerBetslip: {
    name: 'Banner name',
    url: 'https://<bannerUrl>',
    height: {
      desktop: '510px',
      mobile: 'calc(100dvh - 70px)',
    }
  },
  hideScrollToTopButton: <boolean>,
  modalRenderMode: 'global' | 'embedded'
});

---

Parameter descriptions

• Required parameters:
  • host: The Sportsbook application host URL.
  • cid: Your partner ID, provided by the account manager.
• Optional parameters:

  • allowToChangeParentStyles: If set to true, the application automatically adjusts the parent page styles to ensure proper display. Learn more here.

  • disallowUrlChange: If set to true, the application will not append the sportsBookPath GET parameter to the browser’s address bar. Note that this means after a page reload, the application will always load the main page, and users will not be able to share links to internal routes of the application.

  • token: The authentication token for the user's session.

    If omitted, the app operates 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: The ID of the DOM element where the application will be rendered. If not specified, the application will look for an element with the ID sportsbook-placeholder.

  • themeEditorData: A serialized theme configuration string exported from the Theme Editor. For more details, see Saving and exporting settings. Passing this parameter applies your saved theme automatically during initialization.

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

  • lang: The language code in ISO 639-1 format. If not specified, English is the default language. If you specify this parameter when calling init, the application will always load in the specified language, even if the user has chosen a different language in the application settings. After a page reload, the language provided during the init call will take effect.

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

  • loginUrl:

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

  • depositUrl:

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

  • hideScrollToTopButton (boolean, optional): When set to true, the application hides the “scroll to top” button.

  • modalRenderMode (global | embedded, optional): Controls how modals are rendered in relation to the host page.

    • global (default): Modals are rendered on top of the entire page, overlaying the host application.
    • embedded: Modals are rendered within the application container and do not overlap elements outside of it.

---

SDK Integration Example

<html lang="en">
  <head>
    <script type="text/javascript" src="https://{APP_URL}/assets/sdk/shadow/init.js"></script>
  </head>
  <body>
    <div id="sportsbook-placeholder"></div>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const SportsbookApp = Sportsbook.init({
          host: 'https://{APP_URL}',
          cid: '{PARTNER_ID}',
          token: '{CLIENT_TOKEN}',
        });
      });
    </script>
  </body>
</html>

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