Vanilla JS Integration (Advanced)

Most integrations should use the iframe approach instead. The Vanilla JS SDK is for advanced use cases where you need direct control over game mounting and lifecycle.

The Maktub SDK can be used without any framework. The Vanilla JS API mounts a fully self-contained game into any DOM element. React is bundled internally — your page does not need React.

Installation Options

Option 1: ESM Import (bundler)


import MaktubSDK from '@maktubbet/sdk/vanilla'

Option 2: IIFE Global Script (no bundler)


<script src="https://unpkg.com/@maktubbet/sdk/dist/vanilla.global.js"></script>
<!-- MaktubSDK is now available globally -->

CSS Styles

You must include the CSS for each game you use:


<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/dice/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/keno/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/plinko/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/limbo/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/mines/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/roulette/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/wheel/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/coinflip/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/blackjack/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/hilo/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/tower/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/baccarat/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/diamonds/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/chicken/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/crash/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/slide/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/videopoker/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/balloon/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/phoenix/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/soccer/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/doors/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/stairs/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/bridge/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/@maktubbet/sdk/dist/double/styles.css" />

API

Mounting a Game


const game = MaktubSDK.<gameName>(element, options)

Parameters:

Parameter	Type	Description
`element`	`HTMLElement \| string`	DOM element or CSS selector (e.g. `'#game'`)
`options`	`GameSDKOptions`	Configuration object (see below)

Returns a GameInstance object.

`GameSDKOptions`


interface GameSDKOptions {
  accessToken: string | null
  user: { betCount: number; isAuthenticated: boolean }
  updateBalance: (balance: number) => void
  onAuthRequired: () => void
  currency?: { code: string; prefix: string; rate: number }
  language?: string
  logo?: any
  // Optional logo for the back of playing cards (card games only). Overrides `logo` there; falls back to `logo` when omitted.
  cardLogo?: any
  onToast?: (toast: { title: string; description?: string }) => void
}

`GameInstance`


interface GameInstance {
  update(props: Partial<GameSDKOptions>): void  // Update options dynamically
  destroy(): void                                // Unmount and clean up
}

Updating Props

Call game.update() to change any option after mounting:


game.update({ accessToken: 'new-token' })
game.update({ user: { betCount: 10, isAuthenticated: true } })

Destroying

Always destroy the instance when removing the game from the page:


game.destroy()

Available Games


MaktubSDK.dice(element, options)
MaktubSDK.keno(element, options)
MaktubSDK.plinko(element, options)
MaktubSDK.limbo(element, options)
MaktubSDK.mines(element, options)
MaktubSDK.roulette(element, options)
MaktubSDK.wheel(element, options)
MaktubSDK.coinflip(element, options)
MaktubSDK.blackjack(element, options)
MaktubSDK.hilo(element, options)
MaktubSDK.tower(element, options)
MaktubSDK.baccarat(element, options)
MaktubSDK.diamonds(element, options)
MaktubSDK.chicken(element, options)
MaktubSDK.crash(element, options)
MaktubSDK.slide(element, options)
MaktubSDK.videopoker(element, options)
MaktubSDK.balloon(element, options)
MaktubSDK.phoenix(element, options)
MaktubSDK.soccer(element, options)
MaktubSDK.doors(element, options)
MaktubSDK.stairs(element, options)
MaktubSDK.bridge(element, options)
MaktubSDK.double(element, options)
MaktubSDK.launch(element, options)

Game Pages

Select a game from the sidebar to see its specific Vanilla JS example: