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

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

type Destination = "login" | "logout" | "betting-page";

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
16
17
18
19
20
21
22
23
24
25

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";
    }

    case "betting-page": {
      **Description:**
    When integrating Widgets, it will help to return to betting

      window.location.href = `${'your betting path'}/${link}`;

    }

    // 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

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);
});