Skip to main content

Introduction

BetMakers Next Generation Web SDK gives you as much flexibility as you need.

Integration is several lines of code, however, you can decide exactly where you want to display the widgets we provide.

Regardless of the approach, you will need to set up the following:

  1. Integrate the CSS:
<head>
  ...
  <link rel="stylesheet" href="https://uat.web-ui.nextgen.betmakers.com/static/css/main.css">
  <style>
    html {
      font-size: 62.5%; /* We encourage 62.5% as we use `rem` as a unit for accessible fonts */
    }
  </style>
  ...
</head>

We include some utility classes to build a traditional site, particularly:

#bm-root {
  height: 100%;
  font-family: var(--font-family);
  line-height: var(--line-height--medium);
  font-weight: var(--font-weight--regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-text-primary);
  background-color: var(--background-body);
  overflow: hidden;
}

#bm-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  height: 100%;
  position: relative;
}

#bm-content {
  overflow-x: hidden;
}
  1. Add the HTML (#bm-root is used for state management and localising the styles):
...
  <div id="bm-root">
    <div id="bm-grid">
      <div id="bm-content">
        <div class="bm-next_to_jump_ticker" data-props="{"baseUrl":"/racing"}"></div>
        <div class="bm-racebook"></div>
      </div>
      <div>
        <div class="bm-betslip"></div>
      </div>
    </div>
  </div>
...
  1. Integrate the JS bundle:
<body>
  ...
  <script>
    window.bm.init({
      clientId: 'betmakers',
      prepareHeaders: () => {
        return {
          Authorization: 'Bearer TOKEN', // User JWT token to place bets with. See Wallet integration for more details.
        };
      },
    }).then(() => {
      const unmount = window.bm.renderComponents(); // Render all the components after initialization
      // const unmount = window.bm.renderComponent('bm-racebook'); // When using an SPA, you may want to unmount the widget on demand.

      var event = new CustomEvent('host.state.user', {
        detail: {
          loggedIn: true, // To notify BM Widget that the user is logged in and ready to place bets.
          bonusBalance: 0
        },
      });
      window.dispatchEvent(event);
    });
  </script>
  <script async src="https://uat.web-ui.nextgen.betmakers.com/static/js/main.js"></script>
</body>

  1. Putting it all together now:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="https://uat.web-ui.nextgen.betmakers.com/static/css/main.css">
    <style>
      body {
        font-size: 62.5%;
      }
    </style>
  </head>
  <body>
    <div id="bm-root">
      <div id="bm-grid">
        <div id="bm-content">
          <div class="bm-next_to_jump_ticker"></div>
          <div class="bm-racebook"></div>
        </div>
        <div>
          <div class="bm-betslip"></div>
        </div>
      </div>
    </div>

    <script>
      window.addEventListener('load', function () {
        window.bm.init({
          clientId: 'betmakers',
          prepareHeaders: () => {
            return {
              Authorization: 'Bearer TOKEN', // User JWT token to place bets with. See Wallet integration for more details.
            };
          },
        }).then(() => {
          window.bm.renderComponents();
          var event = new CustomEvent('host.state.user', {
            detail: {
              loggedIn: true, // To notify BM Widget that the user is logged in and ready to place bets.
              bonusBalance: 0
            },
          });
          window.dispatchEvent(event);
        });
      });
    </script>
    <script async src="https://uat.web-ui.nextgen.betmakers.com/static/js/main.js"></script>
  </body>
</html>