Navigation synchronization

Keep your site navigation in sync with the Sportsbook. The required approach depends on your integration method - choose your mode below.

Recommended. Drive navigation with the Sportsbook API — no postMessage required.

In Shadow mode you control navigation directly through the Sportsbook API, eliminating the need for a postMessage bridge:

• Subscribe to categorizer data to build your menu from Sportsbook categories. The data already contains the routes passed to setRoute.
• Call Sportsbook.setRoute(route) whenever a user selects a menu item to navigate within the Sportsbook.

INFO

NOTE: Subscribing to categorizer data automatically hides the built-in categorizer in the Sportsbook to avoid duplicating it next to your own menu. To keep the Sportsbook categorizer visible, pass isShowCategorizerInSportsbook: true to subscribeOnCategorizerData.

For example, your code might look like this:

// 1. Initialize the Sportsbook (Shadow mode)
const SportsbookApp = Sportsbook.init({
  host: 'https://APP_URL',
  cid: 'PARTNER_ID',
  // ...other params
});

// 2. Subscribe to categorizer data and build your own menu from it
await window.Sportsbook.subscribeOnCategorizerData({
  host: 'https://APP_URL',
  cid: 'PARTNER_ID',
  sportsbookPath: '/betting', // the path of the page where the Sportsbook is rendered
  onChange: (categorizerData) => {
    renderYourMenu(categorizerData);
  },
});

// 3. Navigate the Sportsbook when a user clicks one of your menu items
function onMenuItemClick(route) {
  SportsbookApp.then((sportsbookInstance) => {
    sportsbookInstance.setRoute(route); // e.g. '/live'
  });
}

INFO

NOTE: In Shadow mode you do not need allowParentUrlUpdate, the setIframePath query parameter, or the routeChange postMessage as the Sportsbook API described above replaces them. These are specific to the iFrame integration method.

Sync your navigation with the iFrame using postMessage.

To synchronize the Sportsbook with your navigation, complete the following steps:

• Specify allowParentUrlUpdate: true during iFrame initialization. This parameter is not required for Shadow mode integration.
• Add the query parameter setIframePath=${url} when forming links for your menu. For example, /sports?setIframePath=/football.
• Send a postMessage to the app when clicking a link, with fields { type: 'routeChange', data: { route: ${selfIframePath} } }.

For example, your code might look like this:

<script>
  const frame = BetSdk.init({ // Or "Sportsbook.init" if you integrated by shadow mode
    allowParentUrlUpdate: true, // For iFrame integration only
    // Other params ...
  });

  const navMenu = document.querySelector('.nav-menu');
  const links = navMenu.querySelectorAll('a');
  links.forEach(link => {
    link.addEventListener('click', e => {
      e.preventDefault();

      const href = e.target.closest('a').getAttribute('href');
      const url = new URL(window.location.origin + href);

      // Replace the value of the browser address bar
      // so that if the page is reloaded,
      // the iframe will display
      // the content displayed before the page reload.
      history.pushState({}, '', url);

      const iframePath = url.searchParams.get('setIframePath');

      if (iframePath) {
        // Post message to iframe with the route
        frame.then(iframe => {
          iframe.sendMessage({
            type: 'routeChange',
            data: {
              route: iframePath,
            },
          });
        });
      }
    })
  });
</script>