Skip to main content

Client Embed

Overview​

BetMakers Nextgen Embedded enables your organisation bring your own wallet to a racebook UI in 3 simple steps:

  1. Embed the UI with our client-side SDK, initialise with your provided client ID and render the Racebook.
  2. We support two types of authentication methods. We recommend using JWT authentication; however, you are free to choose either one of them.
    • JWT Authentication (Create the required webhooks to enable connectivity for BetMakers to connect to your wallet via industry standard JWT/JWKs.)
    • Open Authentication.
  3. Create the display for your transaction history for the supported Racing bet types.

Integrating the Embedded UI​

Create a new integration script:

// betmakers.js

window.bm.init("<provided by BetMakers>").then(() => {
  const unmount = window.bm.renderComponents(); // Render all the components after initialization
});

Add it to your HTML page:

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://embed.betmakers.com/assets/index.css"
    />
    <script
      type="module"
      src="https://embed.betmakers.com/assets/index.js"
    ></script>
    <script defer src="betmakers.js"></script>
    <!-- defer is critical here to ensure the script runs after page is parsed -->
  </head>

  <body>
    <div class="bm-racebook" data-props='{"betslipEnabled": true}'></div>
    <!-- Add the appropriate widgets -->
  </body>
</html>

Widgets​

Racebook​

  <div class="bm-racebook" data-props='{"betslipEnabled": true}'></div>

data-props can optionally include the following object:

{
  "betslipEnabled": boolean // To enable/disable the betslip for native betslip management
}

Events​

Communication between host and embedded UI will be handled via JavaScript CustomEvents. Host driven events will be consumed by the embedded UI to update the embedded state. Embed driven events will be consumed by the host application and actioned accordingly based on the event.

Host Driven Events​

The UI is stateless, and therefore relies on the host application to synchronise the state of the host, particularly for the logged in state, balance details and the betslip state.

In order to notify the BetMakers widgets, we’ll listen to events that has been dispatched from the host as such:

var event = new CustomEvent(eventName, {
  detail: {
    ...
  },
});
window.dispatchEvent(event);

Host User​

Event name: host.state.user

Payload:

{
  loggedIn: boolean;
  accessToken?: string;
  balance: number;
  bonusBalance: number;
  showBalance: boolean;
  metadata?: {
    userId: string; // Must be a UUID.
    brandName: string;
    brandUserId: string;
    data: string;
  };
}

This event sychronises the host user with the embedded client.

If loggedIn is true, betting will be enabled. If loggedIn is false, the widget will replace the Place Bet button with firing the event for bm.event.login.

If accessToken is available, bet placement will utilise the provided accessToken in the Authorization: Bearer header. When the access token is refreshed from the host, synchronise the host users new access token with the embedded client.

If bonus bets are available on the host system, pass through a number greater than 0 (equal to the bonus value of the host user) in order to enable bonus bets. This value must be in cents.

Example:

new CustomEvent("host.state.user", {
  detail: {
    loggedIn: true,
    accessToken: "",
    balance: 0,
    bonusBalance: 0,
    showBalance: true,
    metadata: {
      userId: "f3e8eba0-dad6-4203-a9a7-34ab5b396e52", // Must be a UUID.
      brandName: "betmakers",
      brandUserId: "123",
      data: "",
    },
  },
});

Host Betslip​

Event name: host.event.toggleBetslip

Payload:

{}

This event provides an on demand approach to toggle open the betslip. This is required for responsive betslip management, as the betslip will be toggled off by default.

Example:

new CustomEvent('host.event.toggleBetslip', {
  detail: {},
});

Host Remove Bet​

Event name: host.event.removeBet

Payload:

string

This event provides an on demand approach to remove a bet from the betslip state. Bet ID's are available at bm.state.betslip

Example:

new CustomEvent('host.event.removeBet', {
  detail: "8910ab0b-a24e-4213-b300-132ea2bc6f25"
});

Embed Driven Events​

The host application will need to listen to events to action accordingly.

window.addEventListener(eventName, (event) => {
  if (event.detail) {
    // Do something with the payload
  }
});

Embed Login​

Event name: bm.event.login

This event will be fired when the user is required to login, such as clicking on the "login" button.

Example:

// betmakers.js

window.addEventListener("bm.event.login", (event) => {
  window.location.href = "/login";
});

Embed Betslip State​

Event name: bm.state.betslip

This event will be fired each time the betslip is updated. This could be used to build a native betslip, keep count of the number of bets or analytical purposes. The betslip will be modelled as per https://docs.betmakers.com/docs/web/mts_api#bet-placement-api which contains minimal information such as selection ID's and event ID's. In order to build your own betslip, please build the bet card with the required information from the on demand services and create the required bet.

Example:

// betmakers.js

window.addEventListener("bm.state.betslip", (event) => {
  if (event.detail) {
    // Do something with the payload
  }
});

Embed Errors​

Event name: bm.event.onBetslipError

This event will be fired when there is a betslip error. This will primarily be used to catch authentication failures or system errors when communicating with our API upon placing bets.

Example:

// betmakers.js

window.addEventListener("bm.event.onBetslipError", (event) => {
  if (event.detail) {
    const {
      type, // 'AuthenticationFailure' | 'UnknownError'
      message, // string
    } = event.detail;

    // Do something with the payload
  }
});