Web quickstart

For pure HTML5 games (PixiJS, Phaser, plain Canvas, WebGL) you ship two <script> tags and call window.FRVR.* from your game.

1. Load the SDK — dev channel for local development

Add both tags to the <head> of your HTML. Do not async or defer them — the SDK must be ready before any of your game scripts run. Load them off FRVR’s CDN (don’t self‑host):

<head>
  <script src="https://cdn.frvr.com/sdk/frvr-sdk.min.js"></script>
  <script src="https://cdn.frvr.com/sdk/frvr-channel-dev.min.js"></script>
  <!-- …your own scripts come after these -->
</head>

The dev channel bundle ships fake ads, IAP, and storage providers so you can click through flows without a live backend.

2. Configure & wire up required lifecycle hooks

FRVR.lifecycle.* hooks are required. The SDK calls into your game to pause the game loop and audio whenever an ad is shown (or the channel demands it). Not wiring these is a shipping bug — ads will talk over your music and your game will keep running under an interstitial.

<script>
  FRVR.config = {
    gameId: 'my-awesome-game',
  };

  // REQUIRED — implement all five. Even if a hook is a no-op in your game,
  // set it explicitly so you remember to revisit later.
  FRVR.lifecycle.onSuspend      = () => game.pauseLoop();
  FRVR.lifecycle.onResume       = () => game.resumeLoop();
  FRVR.lifecycle.onAudioSuspend = () => audio.mute();
  FRVR.lifecycle.onAudioResume  = () => audio.unmute();
  FRVR.lifecycle.onGamePause    = () => game.showPauseMenu();

  FRVR.init();
</script>

FRVR.init() wires up every module (FRVR.ads, FRVR.tracker, FRVR.iap, …). Nothing has been sent over the wire yet.

3. Bootstrap the game

The bootstrapper renders a channel‑appropriate splash screen while your game loads:

<script>
  FRVR.bootstrapper.init()
    .then(() => loadGame(progress => FRVR.bootstrapper.setProgress(progress)))
    .then(() => FRVR.bootstrapper.complete());

  function loadGame(onProgress) {
    // …download assets, warm up audio, etc. Call onProgress(0..1) as it advances.
    onProgress(1);
    return Promise.resolve();
  }
</script>

That’s a complete local integration. From here, reach into any module (FRVR.ads, FRVR.iap, FRVR.tracker, …) as you need it — each has its own page with live demos in the sidebar.

Try it now

This demo loads the real SDK via the dev channel and calls FRVR.tracker.

Live: init + track an event

loading SDK…

Full minimal template

<!DOCTYPE html>
<html>
  <head>
    <title>My Game</title>
    <script src="https://cdn.frvr.com/sdk/frvr-sdk.min.js"></script>
    <script src="https://cdn.frvr.com/sdk/frvr-channel-dev.min.js"></script>
  </head>
  <body>
    <canvas id="game"></canvas>

    <script>
      FRVR.config = { gameId: 'my-awesome-game' };

      // REQUIRED lifecycle hooks
      FRVR.lifecycle.onSuspend      = () => pauseLoop();
      FRVR.lifecycle.onResume       = () => resumeLoop();
      FRVR.lifecycle.onAudioSuspend = () => muteAudio();
      FRVR.lifecycle.onAudioResume  = () => unmuteAudio();
      FRVR.lifecycle.onGamePause    = () => showPauseMenu();

      FRVR.init();

      FRVR.bootstrapper.init()
        .then(() => loadGame(p => FRVR.bootstrapper.setProgress(p)))
        .then(() => FRVR.bootstrapper.complete());
    </script>
  </body>
</html>

Next: wire up ads, IAP, and analytics. When you’re ready to ship, talk to your FRVR contact — FRVR handles the production build matrix and channel injection for you.