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

Tip

For mobile devices, consider using the redirect launch strategy instead of iframes. See Game Launch for details.

---

Game Dimensions

Game	Aspect Ratio	Min Width	Recommended
Dice	16:9	320px	1280x720
Plinko	16:9	320px	1280x720
Slots	16:9	320px	1280x720
Crash	16:9	320px	1280x720

All games scale down gracefully to mobile viewport sizes.

---

Return URL

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

1. Player clicks “Back to Lobby” in the game
2. Game redirects to return_url
3. 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