Embed Widgets

Embed interactive roulette widgets on any website with a single iframe tag. Choose between the full Roulette Widget (wheel + board + stats) or the compact Board Widget (board only). Both share the same URL parameter API.

Quick Start

Roulette Widget

Full roulette experience with wheel, stats, and interactive play:

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

Board Widget

Compact board-only view (no wheel, no chips, no stats):

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

Query Parameters

Both widgets accept the same URL parameters. The board widget overrides some defaults (see table).

Bet Token Format

Each bet is a token in SELECTION-BETSIZEformat, separated by commas. The bet size is in dollars ($0.01 – $10,000).

Straight Bets

Use the pocket number directly:

Named Bets

Use the bet type name, optionally followed by a selection number:

Grouped Bets (1-Based Index)

DOZEN, COLUMN, STREET, and DOUBLE_STREET use 1-based indices in the URL:

All Supported Bet Types

RED, BLACK, EVEN, ODD, LOW, HIGH, DOZEN, COLUMN, STREET, DOUBLE_STREET, CORNER, SPLIT_LEFT, SPLIT_TOP

Simulation Mode

Add enableSimulation to enable click-to-simulate. Users can click any number on the board or outcome heatmap to simulate that pocket hitting. The widget tracks W/L stats, balance, and round history with full branching support (navigate to a past round and click to create an alternate timeline).

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

postMessage API

The 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 or simulation click 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 Behavior

The roulette widget switches between horizontal (board + wheel side-by-side) and stacked (vertical) layout based on the container width. Above 860px, the wheel panel sits beside the board. Below 860px, it stacks vertically. Below 540px, the content scales proportionally to fit.

Examples

Shared Strategy Embed

Embed a shared strategy's board with full progression-aware simulation. The widget loads the strategy's bets and progression config automatically — no manual bet tokens needed.

<iframe
  src="https://spinstrategy.app/embed/board/s/YOUR_SHARE_TOKEN?enableSimulation"
  style="border:none;width:100%;height:800px"
></iframe>

The share token comes from the strategy sharing feature. When a user shares a strategy, they get a URL like /s/abc123— use that token in the embed URL.

Shared Strategy Parameters