Ghost

Ghost's HTML card in the editor accepts raw HTML and JavaScript. With one entry in Code Injection for the SDK script, embedding Playgent takes a minute.

Load the SDK site-wide

In your Ghost admin, go to Settings → Code Injection → Site Header and paste:

<script src="https://static.playgent.com/player/v2.js"></script>

Save. The SDK now loads on every page of your site.

Embed in a post or page

Open any post or page in the Ghost editor. Click the + insertion point where the game should appear and choose HTML (under "Embeds"). Paste:

<div id="playgent-host"></div>
<script>
  Playgent.init({
    containerId: "playgent-host",
    player: "plyr_acme",
    game: "sudoku",
    mode: "daily",
  });
</script>

Replace plyr_acme with your player ID. Click outside the card, then Update.

If you didn't load the SDK site-wide, prepend the SDK <script> tag inside the same HTML card.

Dedicated games page

Create a new Page in Ghost (Pages → New page). Add an HTML card with a multi-game switcher:

<div id="playgent-host"></div>

<div style="display:flex; gap:8px; margin-top:12px;">
  <button onclick="player.load({ game: 'sudoku', mode: 'daily' })">Sudoku</button>
  <button onclick="player.load({ game: 'wordsearch', mode: 'daily' })">Wordsearch</button>
  <button onclick="player.load({ game: 'trivia', mode: 'daily' })">Trivia</button>
</div>

<script>
  const player = Playgent.init({
    containerId: "playgent-host",
    player: "plyr_acme",
    game: "sudoku",
    mode: "daily",
  });
</script>

player.load() swaps content without a remount — see Calling methods.

Wire to Ghost members

If you have Ghost Members enabled, you can pass the signed-in member's identity into the player. Ghost exposes the current member via the members.api. Inside your HTML card:

<div id="playgent-host"></div>
<script>
  (async () => {
    let memberId = null, memberName = null;
    try {
      const r = await fetch("/members/api/member/", { credentials: "include" });
      if (r.ok) {
        const m = await r.json();
        memberId = m?.uuid || null;
        memberName = m?.name || null;
      }
    } catch {}

    Playgent.init({
      containerId: "playgent-host",
      player: "plyr_acme",
      game: "sudoku",
      mode: "daily",
      externalUserId: memberId,
      externalUsername: memberName,
    });
  })();
</script>

Ghost gotchas

Newsletters won't run JavaScript

Ghost can deliver posts as email newsletters. Email clients strip <script> tags and most won't render <iframe> either, so the embed appears blank in newsletter emails. If a post contains a game embed, treat the newsletter version as a teaser — link readers to the web version where the game works.

<!-- Optional: hide the embed in email, show "play on the web" link -->
<div id="playgent-host" data-only-web></div>

(Most Ghost themes have CSS hooks for hiding elements in the email version — check your theme's docs.)

Theme-specific content wrappers

Some Ghost themes wrap post content in a fixed-max-width container. If your game appears clipped or too narrow, your theme's content area is constraining it. Either pick a wider post layout (if the theme offers one) or wrap the HTML card content in a full-bleed style:

<div id="playgent-host" style="width: 100%; min-height: 600px;"></div>

Code Injection requires admin

Site-wide Code Injection is admin-only. If editorial uses the Contributor or Author role, ask an admin to add the SDK script once — editors paste only the <div> and Playgent.init call from then on.

Members-only posts

If you gate the post behind a Members tier, the HTML card only runs when the visitor has access. That's the correct behavior — non-members never see the embed.

Origin allowlist

Add your domains to the player in Hub → Configuration → Players:

• Your custom domain (blog.acme.com).
• The Ghost-hosted subdomain (acme.ghost.io), if you use Ghost(Pro).

Players reference →