Arcade embeds

How it works

1. You register an OAuth app on VPZONE and list the websites allowed to show the games.
2. You add embed.js and a <div> to your page. It becomes an iframe served by vpzone.tv.
3. The player clicks Sign in with VPZONE to play. A VPZONE window opens, they sign in and approve your app.
4. The game starts. Runs are verified by VPZONE's servers exactly like on vpzone.tv; your page receives events.

Your page never sees the player's password or token: sign-in happens on vpzone.tv, and the token stays inside the VPZONE iframe, limited to playing the Arcade. Already signing users in with VPZONE yourself? Skip the popup with your own sign-in.

1. Register an app

In Developers → OAuth apps → New:

• App name players see it on the VPZONE consent screen, next to "Play Arcade games".
• Client type either works for embeds. Pick Confidential if you also run your own server-side OAuth.
• Redirect URIs for your own OAuth flow, if any. The embed uses VPZONE's own callback automatically; your site URL is fine if you have none.
• Arcade embed origins every website that shows the games, scheme and host only, one per line: https://your-site.com, https://www.your-site.com, http://localhost:5173 for testing. Ports must match exactly.
• Scope arcade:play (added for you when you declare origins).

Copy the app's client ID. It is public; no secret ever goes in your page.

2. Embed a game

Declarative

<script src="https://vpzone.tv/embed.js" async></script>

<div style="max-width:960px"
     data-vpzone-arcade="pulse-arena"
     data-vpzone-client-id="YOUR_CLIENT_ID"
     data-vpzone-lang="en"></div>

Programmatic, with events

const game = new VPZONE.Arcade({
  game: "2048",
  clientId: "YOUR_CLIENT_ID",
  parent: document.getElementById("game"),
  lang: "en", // or "fr"
  on: {
    ready:    (p) => console.log("loaded", p.game, p.orientation),
    auth:     (p) => console.log("playing as", p.username),
    logout:   ()  => console.log("signed out"),
    runstart: (p) => console.log("ranked run started", p.game),
    score:    (p) => console.log(p.game, p.score, p.status),
    error:    (p) => console.warn("arcade error", p.code),
  },
});

// later: game.destroy();

Games

Events

Without the SDK

A plain iframe works too. Pass your page origin as parent_origin (URL-encoded) to receive events.

<iframe
  src="https://vpzone.tv/embed/arcade/2048?client_id=YOUR_CLIENT_ID&parent_origin=https%3A%2F%2Fyour-site.com&lang=en"
  allow="autoplay; fullscreen; gamepad"
  allowfullscreen
  style="border:0; width:100%; max-width:480px; aspect-ratio:3/4">
</iframe>

<script>
  window.addEventListener("message", (ev) => {
    if (ev.origin !== "https://vpzone.tv" || ev.data?.source !== "vpzone") return;
    console.log(ev.data.event, ev.data.payload); // same events as the SDK
  });
</script>

Your own sign-in (optional)

If your site already signs users in with VPZONE OAuth, players don't need the popup. Request arcade:play in your own flow, then let your server trade the user's access token for a one-time ticket. Your token never goes to the browser; the ticket is single use, valid 120 seconds and only works for your app.

// Your server — Node/Express. You already sign users in with VPZONE OAuth
// (scope arcade:play) and keep their access token server-side.
app.post("/vpzone/arcade-ticket", requireLogin, async (req, res) => {
  const r = await fetch("https://vpzone.tv/api/v1/arcade/embed-tickets", {
    method: "POST",
    headers: { Authorization: `Bearer ${req.user.vpzoneAccessToken}` },
  });
  const body = await r.json();
  if (!r.ok) return res.status(r.status).json(body);
  res.json({ ticket: body.data.ticket }); // single use, valid 120 s
});

new VPZONE.Arcade({
  game: "pulse-pilot",
  clientId: "YOUR_CLIENT_ID",
  parent: document.getElementById("game"),
  // Called whenever the embed needs a player: first load, and after its
  // 2-hour session ends. Return the ticket string.
  getTicket: async () => {
    const r = await fetch("/vpzone/arcade-ticket", { method: "POST", credentials: "include" });
    if (!r.ok) throw new Error("not signed in");
    return (await r.json()).ticket;
  },
});

The embed turns the ticket into a 2-hour Arcade session kept in memory, and calls getTicket again when it needs a new one. Endpoint reference: POST /api/v1/arcade/embed-tickets in the API docs.

Security & browser notes

• Every frame counts. Browsers check each page in the chain: if your page is itself inside another site's iframe, that site must be an embed origin too, or the game is refused.
• Iframe permissions. Keep allow="autoplay; fullscreen; gamepad". If you sandbox the iframe, allow allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox, or sign-in cannot open.
• Staying signed in. With the VPZONE popup, a player stays signed in on your site for up to 30 days (storage is kept per site by the browser). Safari may forget it after 7 days without a visit; private windows forget it on close.
• Pop-up blockers. The window opens from the player's click. If it is blocked (some in-app browsers), the embed shows a link instead.
• What you get. The auth event carries a username and display name, nothing else. For more, request profile:read in your own OAuth flow.
• Revoking. Players can remove your app from Settings → Connected apps at any time; the embed signs them out.

Fair play & rewards

• Runs played on your site follow the Arcade rules: same leaderboards, same pots, same eligibility (account age, one account per person).
• VPZONE replays every run on its servers; scripted or tampered runs are flagged and never count.
• Playing must stay free: don't put the games behind a paywall or sell anything that affects a score.
• Each app has an hourly run cap. Bots, farming or misleading pages get the app — and its developer — blocked.

Error codes

Testing locally

Add your dev server's origin (for example http://localhost:5173) to the app's embed origins, load the production embed.js on your local page and sign in with a real VPZONE account. Changes to origins apply within a minute. Scores from test runs count like any other, so play fair.