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>' | <object>,
  isOpenThemeEditor: <boolean>,
  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 (string | object): The theme configuration exported from the Theme Editor, applied automatically during initialization. In Shadow mode you can pass either the serialized string or the theme object directly ({ vars, isLightTheme, transparentBG }) — since init already receives a JavaScript object, the object form saves you a JSON.stringify. For more details, see Saving and exporting settings.

    If your site supports several different themes - for example, a dark and a light version - you can specify the exact theme the user has selected when initializing the sportsbook. This will allow you to display different themes to different users.

  • isOpenThemeEditor (boolean, optional): 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. It is available on the staging host your account manager provides for integration, and stays hidden on production embeds — so build your theme while integrating, then ship the result via themeEditorData. Learn more here.

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