postMessage API

When using the iframe integration (play.maktub.bet), the game communicates with your parent page via the browser’s postMessage API. This allows you to react to game events without any backend involvement.

Listening for Events


window.addEventListener('message', (event) => {
  // Always verify the origin
  if (event.origin !== 'https://play.maktub.bet') return
 
  const { type, ...data } = event.data
  console.log('Game event:', type, data)
})

Iframe → Parent Events

These events are sent from the game iframe to your page.

`maktub:resize`

Fired whenever the game’s content height changes (on load and when the player switches Manual / Auto / Advanced). Set the iframe’s height to this value so it grows to fit instead of clipping or scrolling.


{ "type": "maktub:resize", "height": 995 }

Field	Type	Description
`height`	`number`	The pixel height the game needs at its current width


const frame = document.getElementById('maktub-game')
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://play.maktub.bet') return
  if (e.source !== frame.contentWindow) return
  if (e.data?.type === 'maktub:resize' && e.data.height) {
    frame.style.height = Math.ceil(e.data.height) + 'px'
  }
})

You don’t have to handle this yourself — the drop-in script (embed.js) does it for you. This event is for teams who embed a bare iframe or bundle their own helper. If you ignore it, a fixed-height iframe still works — the game scales to fit and scrolls.

`ready`

Fired when the game has loaded and is ready for interaction.


{ "type": "ready" }

`balance_update`

Fired after each bet resolves with the user’s updated balance (in user currency).


{ "type": "balance_update", "balance": 1450.00 }

Field	Type	Description
`balance`	`number`	The user’s current balance in their configured currency

`auth_required`

Fired when the session token is invalid or expired. Your page should redirect the user to re-authenticate.


{ "type": "auth_required" }

`bet_result`

Fired after each bet resolves with details about the outcome.


{
  "type": "bet_result",
  "game": "dice",
  "betId": "6650a3f1e4b0c912d8a74b21",
  "won": true,
  "amount": 19.60
}

Field	Type	Description
`game`	`string`	The game slug (e.g. `dice`, `mines`, `crash`)
`betId`	`string`	Unique bet identifier
`won`	`boolean`	Whether the player won
`amount`	`number`	Win amount (if won) or bet amount (if lost)

Parent → Iframe Events

You can send messages to the iframe to update its configuration at runtime.


const iframe = document.querySelector('iframe')
 
// Update theme
iframe.contentWindow.postMessage({
  type: 'update_theme',
  theme: { buttonColor: '#00FF00' }
}, 'https://play.maktub.bet')
 
// Update language
iframe.contentWindow.postMessage({
  type: 'update_language',
  language: 'es'
}, 'https://play.maktub.bet')

`update_theme`

Update the game’s color theme at runtime.


{
  "type": "update_theme",
  "theme": {
    "buttonColor": "#E6007A",
    "darkBackground": "#1D121F",
    "darkLightBackground": "#1A0F1C"
  }
}

`update_language`

Switch the game’s language at runtime.


{
  "type": "update_language",
  "language": "pt"
}

Security

Always verify event.origin before processing any message
The iframe will only accept messages from origins listed in your customer’s allowed origins configuration
Use the full origin URL (https://play.maktub.bet) — never use * in production

CSP Headers

If your site uses Content-Security-Policy headers, add the iframe domain:


Content-Security-Policy: frame-src https://play.maktub.bet;