Quick Start

Predictu staff creates your operator record in God Mode. You will receive:

Log into the Operator Dashboard at predictu-operator.vercel.app and navigate to the Branding tab. Configure your casino's visual identity:

• Colors - set 17 HSL color tokens (primary, accent, background, card, border, button-yes/no, etc.). All colors use the HSL format without the hsl() wrapper, e.g. "142 71% 45%".
• Images - upload your logo, banner image, and favicon.
• Border radius - set the global border radius (e.g. "0.75rem" for rounded, "0" for sharp corners).

The live preview panel shows your branding applied in real time. When satisfied, click Save to persist. The iframe app will pick up your branding immediately for all new sessions.

See the Operator Branding guide for the complete field reference and default values.

In the Operator Dashboard, navigate to the Embed Config tab and add your site's origin to the whitelist:

https://www.example-casino.com

The origin must be an exact match including protocol and port (if non-standard). You can add multiple origins for staging and production environments:

Add the Predictu iframe to your casino page. The URL format is:

Full HTML embed code:

<iframe
  id="predictu-iframe"
  src="https://app.predictu.com?embed=true&operator=example-casino"
  style="width: 100%; height: 100vh; border: none;"
  sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
  allow="clipboard-write"
  loading="lazy"
></iframe>

Key attributes:

The PostMessage bridge is how your casino shell communicates with the Predictu iframe. You need to:

1. Send predictu:init to authenticate the player and set their initial balance.
2. Listen for events from the iframe (ready, balance, trade, navigate).
3. Optionally send deposit/withdraw commands to adjust balance from your side.

Here is the complete initialization code:

const PREDICTU_ORIGIN = "https://app.predictu.com";
const iframe = document.getElementById("predictu-iframe");

// ── Send init once iframe is ready ──────────────────────────
iframe.addEventListener("load", () => {
  iframe.contentWindow.postMessage({
    type: "predictu:init",
    user: {
      id: "player_12345",          // Your internal player ID
      displayName: "John Doe",
      email: "john@example.com",
    },
    balance: 500.00,               // Player's current balance in dollars
    operatorId: "a1b2c3d4-...",    // Your operator UUID
  }, PREDICTU_ORIGIN);
});

// ── Listen for events from the iframe ───────────────────────
window.addEventListener("message", (event) => {
  // IMPORTANT: Always validate the origin
  if (event.origin !== PREDICTU_ORIGIN) return;

  const { type, ...data } = event.data;
  if (!type || !type.startsWith("predictu:")) return;

  switch (type) {
    case "predictu:ready":
      console.log("Predictu iframe is ready and authenticated");
      break;

    case "predictu:balance":
      // Player's balance changed inside the iframe
      console.log("New balance:", data.balance);
      updateBalanceDisplay(data.balance);
      break;

    case "predictu:trade":
      // Player executed a trade
      console.log("Trade executed:", {
        side: data.side,           // "buy" or "sell"
        outcome: data.outcome,     // "yes" or "no"
        amount: data.amount,       // USD amount
        shares: data.shares,       // Number of shares
        executionPrice: data.executionPrice,
        marketTitle: data.marketTitle,
      });
      break;

    case "predictu:navigate":
      // Iframe route changed (optional - useful for deep linking)
      console.log("Iframe navigated to:", data.path);
      break;
  }
});

// ── Send deposit command (optional) ─────────────────────────
function depositToPredictu(amount) {
  iframe.contentWindow.postMessage({
    type: "predictu:deposit",
    amount: amount,  // dollars
  }, PREDICTU_ORIGIN);
}

// ── Send withdraw command (optional) ────────────────────────
function withdrawFromPredictu(amount) {
  iframe.contentWindow.postMessage({
    type: "predictu:withdraw",
    amount: amount,  // dollars
  }, PREDICTU_ORIGIN);
}