Frontend Integration

Iframe Configuration

Beexar games are embedded in your platform using standard HTML iframes. The launch_url from the launch response is used as the iframe src.

Recommended Attributes

<iframe
  src="https://games.beexar.com/dice/your-operator-slug/dice-game?token=..."
  style="width: 100%; height: 100%; border: none;"
  allow="autoplay"
  sandbox="allow-scripts allow-same-origin allow-popups"
  title="Beexar Game"
></iframe>

Attribute	Value	Purpose
`src`	`launch_url` from launch	Game URL with session token
`allow`	`autoplay`	Enable game audio/animations
`sandbox`	`allow-scripts allow-same-origin allow-popups`	Security sandboxing
`title`	Game name	Accessibility

Content Security Policy (CSP)

If your site uses a Content Security Policy, you must allow Beexar game domains in your CSP headers:

Content-Security-Policy:
  frame-src https://games.beexar.com;
  connect-src https://games.beexar.com https://gateway.beexar.com;

Directive	Domain	Purpose
`frame-src`	`https://games.beexar.com`	Allow game iframes
`connect-src`	`https://games.beexar.com`	Allow game API requests
`connect-src`	`https://gateway.beexar.com`	Allow gateway requests

Responsive Design

Beexar games are responsive and adapt to the container size. For the best experience:

Desktop Layout

.game-container {
  width: 100%;
  max-width: 1280px;
  height: 720px;
  margin: 0 auto;
}

.game-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

Full-Screen Layout

.game-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.game-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

Mobile Layout

On mobile, games are best displayed in landscape orientation at full viewport width:

@media (max-width: 768px) {
  .game-container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
  }
}

Game Dimensions

All games share the same dimensions:

Aspect Ratio	Min Width	Recommended
16:9	320px	1280x720

They scale down gracefully to mobile viewport sizes.

Return URL

When the player finishes playing, the game redirects to the return_url configured during launch:

Player clicks “Back to Lobby” in the game
Game redirects to return_url
Your platform’s lobby page loads

If no return_url is provided, the game shows a “Session ended” message.

Troubleshooting

Issue	Cause	Solution
Game shows blank	CSP blocking iframe	Add `games.beexar.com` to `frame-src`
No audio	Missing `allow="autoplay"`	Add `autoplay` to iframe `allow` attribute
Game too small on mobile	Container not full-width	Use `100vw` / `100vh` on mobile
CORS errors in console	Missing CSP `connect-src`	Add gateway domain to `connect-src`
“Session expired” message	Token expired	Create a new session via launch API