Navigation synchronization

Keep your own site navigation in sync with the Sportsbook. The way you do it depends on how you integrated the app — pick your mode below.

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

In Shadow mode you control navigation directly through the Sportsbook API, so you don't need to build a postMessage bridge:

• Subscribe to categorizer data to build your own menu from the Sportsbook's own categories. The data already contains the routes you pass to setRoute.
• Call Sportsbook.setRoute(route) to navigate the app whenever a user selects one of your menu items.

INFO

NOTE: Subscribing to categorizer data automatically hides the built-in categorizer in the Sportsbook to avoid duplicating it next to your own menu. If you want to keep the Sportsbook's categorizer visible as well, pass isShowCategorizerInSportsbook: true to subscribeOnCategorizerData.

For example, your code may 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 — the Sportsbook API above replaces them. Those belong to the iFrame approach.

Sync your navigation with the iFrame using postMessage.

To enable the app to synchronize with your own navigation, you need to:

• Specify the parameter allowParentUrlUpdate: true during iFrame initialization. Note that this parameter is not required for shadow mode integration.
• When forming links for your menu, add the query parameter setIframePath=${url}. For example, /sports?setIframePath=/football.
• When clicking on a link, send a postMessage to the app with fields { type: 'routeChange', data: { route: ${selfIframePath} } }.

For example, your code may 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>