Betting events

The SPA provides an API that allows users to subscribe to various user-related events, such as login, logout, among others. Once subscribed to an event, they can implement custom logic to handle it as needed.

betting-init

Description: This event is dispatched by application once it is fully initialized on the client side.

This event acts as a signal that the global window.bettingAPI object is now available and ready to be used.

Example:

1
2
3
4
5
6

document.addEventListener("betting-init", () => {
  // bettingAPI is now available
  window.bettingAPI.subscribe("<some-event>", (data) => {
    console.log("Received event:", data);
  });
});

redirect

Description: Trigger at the moment of performing the actions specified in the Destination; it must be possible to set the transition via external routes.

1
2
3
4
5
6
7
8
9

interface RedirectPayload {
  destination: Destination;
  link: string;
}

enum Destination {
  Login = "login",
  Logout = "logout",
}

Example: This event is typically used to trigger the opening of a login modal when an unauthorized user attempts to place a bet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

bettingAPI.subscribe("redirect", ({ destination, link }) => {
  switch (destination) {
    // at the moment only two values are available for the 'destination'
    case "login": {
      window.location.href = "#!/auth/signin?popup";
    }
    case "logout": {
      window.location.href = "#!/auth/signout";
    }
    // after handling login and logout events you should execute window.location.reload()
    default: {
      break;
    }
  }
});

handle-not-enough-balance

Description: Trigger when a player does not have enough funds to make a bet. The integrator can handle the case where the user needs to deposit more funds.

1
2
3

interface HandleNotEnoughBalancePayload {
  deposit: string;
}

Example: This event is typically used to trigger the opening of a deposit modal

1
2
3

bettingAPI.subscribe("handle-not-enough-balance", ({ deposit }) => {
  console.error(`Not enough balance, deposit: ${deposit}`);
});

toggle-widget-betslip

Description: Trigger when a player opens or close the betslip widget

1
2
3
4
5

interface ToggleWidgetBetslipPayload {
  isOpen: boolean;
  widgetType: "static" | "island";
  breakpoint: "mobile" | "tablet" | "desktop";
}

Example: The integrator can use this event to handle UI changes, such as enabling/disabling scrolling on mobile devices.

custom-widget-init

Description: Triggered when the custom widget container is mounted and ready to receive content. This event indicates that the container is ready for rendering custom React components using createPortal.

1
2
3
4

interface ICustomWidgetMountEvent {
  containerId: string;
  element: HTMLElement;
}

Properties:

• containerId: Unique identifier for the container
• element: The DOM element where custom content should be rendered

Example:

Use this event to render custom content into specific widget containers once they become available.

1
2
3
4
5
6
7
8
9

bettingAPI.subscribe(
  "custom-widget-init",
  ({ containerId, element }) => {
    // Render custom component into the provided element
    const content = <div>{/* Your custom content */}</div>;

    return createPortal(content, element);
  }
);