Embedding
Adding Playgent puzzles to your site
A Playgent embed is two snippets in your HTML — the SDK script and an
init call. The SDK handles iframe sizing, fullscreen, theme application,
and event callbacks.
Quick start
<div id="playgent-host"></div>
<script src="https://static.playgent.com/player/v2.js"></script>
<script>
Playgent.init({
containerId: "playgent-host",
game: "wordsearch",
mode: "pinned",
content: "pub_xxxxxxxxxx",
player: "plyr_xxxxxxxxxx",
});
</script>The mode, content, and game props together describe what to render.
See Content Modes for the full set.
Daily and Random
content is a channel id instead of a publication id:
<script>
Playgent.init({
containerId: "playgent-host",
game: "wordsearch",
mode: "daily",
content: "cha_xxxxxxxxxx",
player: "plyr_xxxxxxxxxx",
});
</script>Use mode: "random" instead for a fresh pick per page load.
Contextual
A contextual snippet auto-generates a puzzle from the surrounding article
text. Same shape as a pinned snippet — game names the puzzle type — but
with no content id and mode: "contextual". Optional CSS selectors tell
the SDK which parts of the article to read from:
<script src="https://static.playgent.com/player/v2.js"></script>
<script>
Playgent.init({
mode: "contextual",
game: "wordsearch",
include: [".article-body"],
exclude: [".ad-slot"],
player: "plyr_xxxxxxxxxx",
});
</script>The container element is created in place of the script — no containerId
needed. The first viewer compiles the puzzle from the article's text;
everyone after them plays the same one. Drop a single snippet in your
article template and every article gets a matching puzzle.
See Content Modes → Contextual for what each option does.
Callbacks
Playgent.init accepts lifecycle callbacks for every mode:
<script>
Playgent.init({
/* ...config... */
onReady: (payload) => console.log("game loaded", payload),
onStart: (payload) => console.log("first interaction"),
onComplete: (payload) => console.log("solved", payload.score),
onView: (payload) => console.log("in viewport"),
onError: (err) => console.error(err),
});
</script>See Player Events for the full callback payload shapes and event semantics.