Add Vihar ID login and play tracking to a browser game

1. Save and register your game

1. Save a private game listing in Creator studio. Select Vihar ID for accounts or saved progress, or Direct play for a game without either.
2. In Content, register the saved URL and copy the game ID. Production game origins must be public HTTPS origins without credentials or custom ports.
3. Place the integration on the exact registered origin. www.example.com and example.com are different origins.
4. If you use a Content Security Policy, allow https://vihar.online in script-src and connect-src. The SDK uses a popup, not an iframe.

2. Load the SDK on your own website

Replace YOUR_SAVED_GAME_ID with your listing ID. For Direct play games, omit the login container, mount call and sign-out control. Keep resumeLaunch and the session lifecycle hooks; a guest with no connection gets a harmless guest result.

Call startSession after sign-in for an account-based game, not while its login screen is displayed. The sample is a wiring guide: comments do not connect your engine's lifecycle automatically.

<div id="vihar-login"></div>
<p id="connection-status" role="status"></p>
<button id="sign-out" type="button">Sign out of this game</button>
<script type="module">
  import { createViharId } from "https://vihar.online/sdk/vihar-id.js";
  const status = document.querySelector("#connection-status");
  const vihar = createViharId({
    gameId: "YOUR_SAVED_GAME_ID",
    onError: (error) => { status.textContent = error.message; }
  });
  try { await vihar.resumeLaunch(); }
  catch (error) { status.textContent = error.message; }

  // For games with login or saved progress:
  vihar.mount("#vihar-login");
  document.querySelector("#vihar-login").addEventListener(
    "vihar:signin", (event) => {
      status.textContent = `Welcome, ${event.detail.displayName}`;
      // Load progress here; begin gameplay only after it is ready.
    }
  );
  document.querySelector("#sign-out").onclick = async () => {
    await vihar.signOut();
    status.textContent = "Signed out. Your saved progress is retained.";
    // Also clear your game's local account state and stop gameplay.
  };

  // Connect these to your actual game lifecycle:
  // await vihar.startSession();  // gameplay begins
  // vihar.setPlaying(false);    // pause/menu
  // vihar.setPlaying(true);     // resume
  // await vihar.stopSession();  // round/game ends
</script>

3. Wire real gameplay, pause and exit events

startSession starts a new recorded session. Calling it again while this SDK instance has a session resumes that session. setPlaying(false) flushes active time and pauses accumulation; setPlaying(true) resumes it. stopSession flushes the final interval and ends the session. dispose ends the session and removes listeners.

Heartbeats run every 15 seconds and are serialized. The server bounds reported elapsed time and rejects concurrent sessions for the same player and game. Hidden tabs do not accumulate time. Network gaps, closed tabs and operating-system shutdowns can lose the final interval; the dashboard is an estimate.

Call resumeLaunch before your router replaces the URL fragment: it consumes a one-use activity ticket and removes just the appended vihar_launch suffix. If the URL already uses a hash router, its existing fragment is preserved. Refreshing a game restores the tab's token when session storage is available; a previous unfinished session can require a 90-second wait.

4. Test on the registered game website

1. Use Open integration test in Creator studio while signed in as the listing owner.
2. Start gameplay. For an account game, select the Vihar ID button and approve the connection first.
3. Play for at least 15 seconds, pause, switch tabs, resume and end the session.
4. Check that Creator studio reports Integration test passed. Owner tests do not count toward player totals.
5. Test with a separate player account to check dashboard activity, saves and disconnect behavior before announcing your game.

SDK methods at a glance

signIn() opens a user-initiated permission popup and returns the player's public identity. getPlayer() retrieves that identity from an existing identity token. signOut() revokes the current token. mount(element) renders the branded sign-in widget and dispatches vihar:signin on its container.

loadProgress() returns { data, revision }. saveProgress(data, revision) writes a JSON object for this game. getAccessToken() returns an identity token only; send it solely to your own HTTPS backend if you need server-side session verification. Activity-only connections return null.

Treat every asynchronous call as fallible. Show useful retry messages, preserve unsaved local game state, and do not block direct-play gameplay merely because activity recording is temporarily offline.