Embed the game · 8 Ball Pesa

1. Paste the iframe

<iframe
  src="https://8ballpesa.com/embed/play"
  title="8 Ball Pesa: 8-ball pool practice"
  width="100%" height="640"
  style="border:0;width:100%;max-width:960px;aspect-ratio:3/2;min-height:480px"
  sandbox="allow-scripts allow-same-origin allow-popups"
  allow="autoplay"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"></iframe>

The game fills whatever box you give it and turns the table to suit: wide boxes get a landscape table, tall ones (phones) a portrait one. It works in the sandbox shown, which allows only what it needs: its own scripts and storage (for the sound setting), and opening links in a new tab.

2. Sizes

Desktop: 640 to 960 pixels wide, about 3:2 (for example 900 × 600).
Phones: the full width of the screen and at least 560 pixels tall; the table turns upright.
Smallest: 320 × 420. Below that the table is too small to aim well.
Or let the game choose: listen for its resize message (below) and set the iframe's height to match.

3. Events (optional)

The game sends messages to your page with postMessage, addressed only to your origin. Each is an object with source: "8ballpesa", version: 1 and a type. Always check event.origin is https://8ballpesa.com.

type	fields	when
`ready`	—	The game has loaded and can be played.
`resize`	`height`	The height in CSS pixels the game would like at the iframe's current width (the table at full width, plus its controls). Sent again whenever it changes.
`gameStart`	`level`	A frame has started against the named computer level (Rookie, Regular, Hustler, Shark or King Cue).
`gameEnd`	`result`, `level`, `shots`, `durationMs`	A frame is over: result is "won" or "lost" (from the player's side), with the player's shots and the time taken.

Your page can send these to the iframe, as objects with source: "8ballpesa-host" and a type, targeted at https://8ballpesa.com:

type	what it does
`hello`	Introduces your page. The game then sends ready (and the latest resize) to your origin. Only needed when the browser can't tell the game your origin, for example if your page sends no Referer.
`pause / resume`	Pauses the frame (shows the pause screen) or carries on.
`mute`	With muted: true or false, turns the game's sound off or on.

<script>
  // Optional: size the iframe to the game and hear when a frame starts or ends.
  const frame = document.querySelector('iframe[src^="https://8ballpesa.com/embed/play"]');
  window.addEventListener("message", (e) => {
    if (e.origin !== "https://8ballpesa.com" || e.source !== frame.contentWindow) return;
    const m = e.data;
    if (!m || m.source !== "8ballpesa") return;
    if (m.type === "resize") frame.style.height = m.height + "px";
    if (m.type === "gameEnd") console.log("Frame over:", m.result, "vs", m.level);
  });
  // Tell the game which origin to talk to (needed if your page sends no Referer).
  frame.addEventListener("load", () =>
    frame.contentWindow.postMessage({ source: "8ballpesa-host", type: "hello" }, "https://8ballpesa.com"));
</script>

4. Allowed sites

Browsers only show the game inside pages on sites we've approved; anywhere else the frame stays blank. The game also ignores messages from, and never sends messages to, any other site. Approved today:

https://chezacheza.com
https://www.chezacheza.com

To add your site, email us from your company address with the exact web address (including https:// and any www.) that will show the game. See Support for how to reach us.

Good to know

The game is practice only: nothing is staked or won, and there's no sign-in. The links in the game open 8ballpesa.com in a new tab.
Sound starts muted by the browser until the player taps or presses a key, and the player can turn it off.
It pauses itself when the player switches tab.