SDK integration

TypeScript SDK

The TypeScript SDK is exported as @rudder/web-sdk. It includes authenticated HTTP services, browser token storage, scenario runtime helpers, analytics batching, and realtime WebSocket sessions.

Install and create a client

The SDK requires a project key and API base URL. Configure the realtime URL when your game needs room sessions or realtime state exchange.

npm install @rudder/web-sdk
import { LiveOpsClient } from "@rudder/web-sdk";

const rudder = new LiveOpsClient({
  projectKey: "YOUR_PROJECT_KEY",
  baseUrl: "https://api.rudder.build",
  realtimeUrl: "wss://realtime.rudder.build/api/realtime/ws",
  analytics: {
    flushIntervalMs: 10000,
    maxBatchSize: 25
  }
});

await rudder.auth.loginViaDevice({
  region: "eu",
  language: "en"
});

Remote config

Load active configs once during startup, then read typed values from the local cache. Async getters call load() automatically if the cache has not been loaded yet.

await rudder.remoteConfig.load();

const difficulty = rudder.remoteConfig.getString("difficulty", "normal");
const bonusMultiplier = rudder.remoteConfig.getNumber("bonus_multiplier", 1);
const newShopEnabled = rudder.remoteConfig.getBoolean("new_shop_enabled", false);

const economy = rudder.remoteConfig.getJson("economy", {
  softCurrencyName: "Coins"
});

Analytics

track() queues events and flushes them by interval or batch size. Call flush() before ending the game session if you need an explicit delivery boundary.

rudder.analytics.track("level_started", {
  level: 7,
  difficulty
});

rudder.analytics.track("purchase_opened", {
  source: "main_menu"
});

await rudder.analytics.flush();

Stores and offers

Stores are fetched through the SDK API. Purchases include an idempotency key; if you do not pass one, the SDK generates it.

const stores = await rudder.stores.list();
const eventStore = await rudder.stores.get("weekend-sale");

const purchase = await rudder.stores.buy("weekend-sale", "starter-pack", {
  idempotencyKey: crypto.randomUUID()
});

console.log(stores.stores, eventStore, purchase);

Leaderboards

Use direct service calls or a cached leaderboard handle returned by findBySlug().

await rudder.leaderboards.submitScore("pumpkin-collectors", 4200);

const ranking = await rudder.leaderboards.getRanking("pumpkin-collectors", {
  limit: 100
});

const leaderboard = rudder.leaderboards.findBySlug("pumpkin-collectors");
await leaderboard.submit(4250);
const entries = await leaderboard.list({ limit: 20 });

console.log(ranking.entries, entries);

Scenario runtime

Scenario triggers can return execution plans. The SDK persists active runs, emits node-specific sessions, and lets the game complete client-visible nodes through the expected handles.

rudder.restore();

rudder.scenarios.on("notification", async (session) => {
  const title = session.get("title", "Event update");
  const message = session.get("message", "");
  showInGameMessage(title, message);
  await session.complete();
});

rudder.scenarios.on("store", async (session) => {
  showStore(session.id, {
    onPurchase: () => session.buy(),
    onDismiss: () => session.decline()
  });
});

rudder.scenarios.on("quest", async (session) => {
  await session.addProgress("kills", 1);
});

await rudder.scenarios.send("player_login");

Realtime sessions

Realtime requires a configured realtimeUrl and a stored access token from device login. The SDK authorizes after the WebSocket opens.

const session = await rudder.realtime.connect({ timeoutMs: 10000 });

session.on("authorized", () => {
  session.joinOrCreateRoom("match-123", 4);
});

session.on("joinedRoom", (room) => {
  console.log("Joined room", room);
});

session.sendRoomEvent(1, new TextEncoder().encode("ready"));

rudder.realtime.disconnect();

Cleanup

Dispose the client when the browser tab, scene, or embedded runtime ends. This stops analytics timers and disconnects realtime sessions.

rudder.dispose();