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