Embedding

Integrating the SDK

One script tag, one Playgent.init() call. Returns a player instance you can drive, listen to, and tear down.

The shape

html

<div id="playgent-host"></div>
<script src="https://static.playgent.com/player/v2.js"></script>
<script>
  const player = Playgent.init({
    containerId: "playgent-host",
    game: "sudoku",
    mode: "daily",
    player: "plyr_acme_blog",
    onReady:    ({ game, content }) => console.log("ready", game, content),
    onComplete: ({ score, won, timeMs }) =>
      console.log("done", { score, won, timeMs }),
  });
</script>

Two pieces:

The script tag loads the SDK and exposes window.Playgent.
Playgent.init mounts the iframe inside the element identified by containerId and returns a player instance.

The full set of init options is on the Init options reference.

In an SPA / framework

In React, mount inside a component and clean up on unmount:

jsx

import { useEffect, useRef } from "react";

export function PlaygentEmbed({ game, mode, content, player }) {
  const ref = useRef(null);

  useEffect(() => {
    let p;
    ensureSdk().then(() => {
      p = window.Playgent.init({
        containerId: ref.current.id,
        game, mode, content, player,
      });
    });
    return () => p?.destroy?.();
  }, [game, mode, content, player]);

  return <div id="playgent-host" ref={ref} style={{ minHeight: 440 }} />;
}

function ensureSdk() {
  if (window.Playgent) return Promise.resolve();
  return new Promise((resolve, reject) => {
    const s = document.createElement("script");
    s.src = "https://static.playgent.com/player/v2.js";
    s.onload = () => resolve();
    s.onerror = reject;
    document.head.appendChild(s);
  });
}

Holding the instance

Playgent.init returns a player object with methods you can call:

const player = Playgent.init({ /* … */ });

document.querySelector("#hint-btn").addEventListener("click", () => player.hint());
document.querySelector("#restart-btn").addEventListener("click", () => player.restart());

The full method list is on SDK Methods.

Re-rendering with new config

To swap the game or content without destroying the iframe:

player.load({
  game: "wordsearch",
  mode: "pinned",
  content: "pub_holiday_2026",
});

player.load() reuses the iframe and reloads it with merged config. Cheaper than destroy + init.

Cleanup

If you mount inside a SPA, destroy the player when leaving the route:

useEffect(() => {
  const player = Playgent.init({ /* … */ });
  return () => player.destroy();
}, []);

Loading the SDK once

The SDK is small (~12KB gzipped) and self-deduplicating — multiple <script> tags on the same page are safe. For SPAs, prefer loading it once at app boot via the ensureSdk() helper above.

Teams & roles

Listening to events