Roulette Widget

Embed a full roulette widget with a spinning wheel, animated gameplay, and live outcome tracking. Configure bets via URL parameters and receive round results in the parent frame via postMessage.

Quick Start

Copy this snippet into your HTML to embed a roulette widget with a $5 RED bet and a $1 STRAIGHT bet on 17:

<iframe
  src="https://spinstrategy.app/embed/roulette?bets=RED-5,17-1"
  style="border:none;width:100%;height:700px"
></iframe>

Query Parameters

postMessage API

The roulette widget communicates with its parent frame via window.postMessage. Listen for messages on the parent window to react to resize and round events.

Resize Event

Emitted whenever the widget's content size changes. Useful for auto-sizing the iframe.

{
  type: "spinstrategy:resize",
  payload: { width: number, height: number }
}

Round Result Event

Emitted after every finalized spin with the outcome details.

{
  type: "spinstrategy:roundResult",
  payload: {
    pocket: number,      // 0-36, the winning pocket
    won: boolean,        // whether any bet won
    net: number,         // net result in dollars (can be negative)
    totalRounds: number  // cumulative rounds played
  }
}

Listener Example

window.addEventListener("message", (event) => {
  if (event.data?.type === "spinstrategy:roundResult") {
    const { pocket, won, net, totalRounds } = event.data.payload;
    console.log(`Round ${totalRounds}: pocket ${pocket}, ${won ? "WIN" : "LOSS"}, net $${net}`);
  }

  if (event.data?.type === "spinstrategy:resize") {
    const iframe = document.getElementById("my-roulette");
    if (iframe) iframe.style.height = event.data.payload.height + "px";
  }
});

Responsive Scaling

The roulette widget has a minimum width of 860px. Below that, content auto-scales proportionally to fit the container. The iframe height adjusts via the spinstrategy:resize postMessage event — subscribe to it for pixel-perfect sizing.

Examples