Guides

Squarespace

Embed games inside blog posts, pages, and a dedicated games section using Squarespace's Code block.

Squarespace supports raw HTML and JavaScript through the Code block. With one entry in Code Injection for the SDK script, embedding Playgent takes a minute.

Plan requirement

The Code block and Code Injection features require a Business plan or higher. They aren't available on the Personal tier.

Load the SDK site-wide

In your Squarespace dashboard, go to Settings → Advanced → Code Injection → Header and paste:

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

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

Embed in a blog post or page

Edit any post or page. Click the + insertion point where the game should appear and choose Code (under "More" if it's not in the popular row). Set the type to HTML and uncheck Display Source. Paste:

html
<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. Save the post and view it on the live site.

If you skipped the site-wide SDK step, prepend the SDK <script> tag inside the same Code block.

Dedicated games page

Create a new Page (Pages → +). Add a Code block with a multi-game switcher:

html
<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.

Squarespace gotchas

AJAX navigation breaks inline scripts

Many Squarespace templates use AJAX for in-site navigation — when a visitor clicks a link to another page, the new page loads without a full browser refresh. Inline Playgent.init calls inside Code blocks may not re-run after AJAX navigation, leaving the game container empty.

Fix: in your template's settings, disable AJAX loading (Site Styles → look for "Loading: AJAX" or similar — naming varies by template family). Alternatively, wrap your init call so it runs on Squarespace's page-load event:

html
<div id="playgent-host"></div>
<script>
  function mountPlaygent() {
    if (!window.Playgent || document.querySelector("#playgent-host iframe")) return;
    Playgent.init({
      containerId: "playgent-host",
      player: "plyr_acme",
      game: "sudoku",
      mode: "daily",
    });
  }
  mountPlaygent();
  window.addEventListener("DOMContentLoaded", mountPlaygent);
</script>

Code block previews don't run scripts

The in-editor preview shows the Code block as raw text. View the published page in a separate tab to see the actual embed.

Trial sites strip scripts

If your site is on a Squarespace trial, custom code may not execute on the live preview URL. Upgrade to a paid Business plan (or higher) to unlock Code Injection and Code blocks.

Template-specific quirks

Some 7.0 templates wrap Code blocks in containers that hide overflow. If the game appears clipped, add a min-height to the host <div>:

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

Origin allowlist

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

  • Your custom domain (acme.com, www.acme.com).
  • The Squarespace built-in URL (acme.squarespace.com) — useful while you're previewing before connecting a custom domain.

Players reference →