Skip to content

Migrations

Migration Betslip

1. Add DOM containers

You must include the following element in your HTML layout:

Betslip containers — separate element:

1
<div id="betting-betslip"></div>

Old integration:

1
2
<div id="betting-betslip-mob"></div>
<div id="betting-betslip-tablet"></div>

Note

These element must exist in the DOM before initializing the SPA

4.Style the betslip containers

The SPA renders betslip view into dedicated container, depending on screen size: React Example

 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<script>

  type IStypeBetslip = Pick<ToggleWidgetBetslipPayload, "breakpoint" | "isOpen">;

  const BetslipStyleGetter: Record<
    "static" | "island",
    (data: IStypeBetslip) => string
  > = {
    static: ({ isOpen, breakpoint }: IStypeBetslip): string => {
      if (breakpoint === "mobile") {
        if (isOpen) {
          document.body.classList.add("overflow-hidden");
          return "fixed bottom-0 left-0 top-0 z-40 lg:hidden w-full h-full";
        } else {
          document.body.classList.remove("overflow-hidden");

          return "fixed bottom-0 left-0 -z-40 w-full";
        }
      }

      if (breakpoint === "tablet") {
        return "fixed top-0 left-auto right-0 z-40 h-[100vh]";
      }

      return "";
    },
    island: ({ isOpen, breakpoint }): string => {
      if (breakpoint === "mobile") {
        if (isOpen) {
          document.body.classList.add("overflow-hidden");
          return "fixed bottom-0 left-0 top-0 z-40 lg:hidden w-full h-full max-h-full";
        } else {
          document.body.classList.remove("overflow-hidden");

          return "fixed bottom-0 left-0 z-40 w-full";
        }
      }
      if (breakpoint === "tablet") {
        return "fixed inset-x-1/2 bottom-0 z-[999999] w-full max-w-[320px] max-h-[100vh] -translate-x-1/2";
      }
      return "fixed inset-x-1/2 bottom-0 z-[999999] w-full max-w-[320px] max-h-[80vh] -translate-x-1/2";
    },
  };

  const BetslipContainer: FC = () => {
    const [state, setState] = useState<ToggleWidgetBetslipPayload | undefined>();

    const initBetting = useCallback(() => {
      if (!window.bettingAPI) return;

      window.bettingAPI.subscribe("toggle-widget-betslip", setState);
    }, []);

    useEffect(() => {
      document.addEventListener("betting-init", initBetting);

      return () => document.removeEventListener("betting-init", initBetting);
    }, [initBetting]);

    const getter = state
      ? BetslipStyleGetter[state.widgetType] || BetslipStyleGetter["static"]
      : undefined;

    const className = state && getter
      ? getter({ isOpen: state.isOpen, breakpoint: state.breakpoint })
      : "";

    return <div id="betting-betslip" className={className}></div>;
  };
</script>

MIGRATION: Mobile betslip (#betting-betslip-mob) On our demo site, we applied the following styling using Tailwind CSS:

New integration:

1
2
3
4
<div id="betting-betslip-mob" className={ state && state.breakpoint === "mobile"
&& state.widgetType === "static" ? state.isOpen ? "fixed bottom-0 left-0 z-40
block lg:hidden w-full h-full" : "fixed bottom-[18px] left-0 z-40 w-full" :
"hidden" } />

Old integration:

1
2
<div id="betting-betslip-mob" className={ isOpen ? "fixed bottom-0 left-0 z-40
block lg:hidden w-full h-full" : "fixed bottom-[18px] left-0 z-40 w-full" } />
  • When the betslip is closed, a small button sits 18px from the bottom.
  • When opened, it expands to cover the entire screen.
  • This behavior is controlled via the toggle-widget-betslip event.

In your configuration, this layout can be customized — for example, to account for a page footer, or to prevent the betslip from covering a sticky header.

MIGRATION: Tablet betslip (#betting-betslip-tablet)

On tablets, we use a sidebar that stretches the full height of the viewport:

New integration:

1
2
3
4
5
6
<div
  id="betting-betslip-tablet"
  class={state && state.breakpoint === "tablet" && state.widgetType === "static"
      ? "fixed top-0 left-auto right-0 z-40 h-[100vh]"
      : "hidden"}
></div>

Old integration:

1
2
3
4
<div
  id="betting-betslip-tablet"
  class="hidden lg:block xl:hidden fixed top-0 left-auto right-0 z-40 h-[100vh]"
></div>

Again, feel free to adapt this styling for your layout — e.g., adjusting height or position to avoid overlapping your app’s header or sidebar.