Embedding

Listening to events

The SDK emits seven lifecycle events. Wire callbacks at init time — or attach later with player.on().

At init time

const player = Playgent.init({
  containerId: "playgent-host",
  game: "sudoku",
  mode: "daily",
  onReady:    (data) => console.log("ready", data),
  onView:     (data) => console.log("in viewport", data),
  onStart:    (data) => console.log("started", data),
  onHint:     (data) => console.log("hint used", data),
  onComplete: (data) => console.log("completed", data),
  onEnd:      (data) => console.log("end-screen CTA pressed", data),
  onError:    (err)  => console.warn("error", err),
});

Attaching later

player.on("complete", (data) => track("playgent.completed", data));
player.on("error", (err) => Sentry.captureMessage(`Playgent ${err.code}`));

player.off("complete") removes the handler.

Common patterns

Track completions in your analytics tool

Playgent.init({
  containerId: "playgent-host",
  game: "sudoku",
  mode: "daily",
  externalUserId: currentUser.id,
  onComplete: ({ score, won, timeMs }) => {
    analytics.track("Playgent puzzle completed", {
      score, won, timeMs,
    });
  },
});

Show a CTA only when a user finishes

let completed = false;
Playgent.init({
  /* … */
  onComplete: () => {
    completed = true;
    document.querySelector("#newsletter-cta").classList.remove("hidden");
  },
});

Detect impressions for ad metrics

onView fires once when at least 50% of the iframe is in the viewport (configurable).

Playgent.init({
  /* … */
  viewThreshold: 0.6,
  onView: ({ intersectionRatio }) =>
    track("playgent.impression", { ratio: intersectionRatio }),
});

Reference

The complete schema for every event payload is on the SDK events reference.

Integrating the SDK

Calling methods