Webflow

Webflow's Embed element renders raw HTML and JavaScript directly in the page. Combined with a one-line Custom Code entry for the SDK, embedding Playgent takes about a minute.

Load the SDK site-wide

In the Designer, open Project Settings → Custom Code → Head Code and paste:

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

Save and Publish the site. Custom code only runs on published sites — Designer preview and the .webflow.io staging URL run it, but the live preview inside the Designer doesn't.

Embed on a page or CMS article

In the Designer, drag an Embed element where the game should appear. Open it and 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 and publish.

If you didn't add the SDK to site-wide Head Code, prepend the SDK <script> tag inside the same Embed element:

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

Dedicated games page

Create a new Page in the Designer (Pages → +). Drop in an Embed element 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>

Style the buttons however you want — they're just plain HTML inside the Embed element.

Embed inside a CMS Collection item

For per-article embeds (e.g. one game per blog post), bind the content ID to a CMS field. Add a Plain Text field to your Collection (e.g. playgent_content_id), then in the Embed element use Webflow's CMS field tokens:

<div id="playgent-host"></div>
<script>
  Playgent.init({
    containerId: "playgent-host",
    player: "plyr_acme",
    game: "trivia",
    mode: "pinned",
    content: "{{ wf {&quot;path&quot;:&quot;playgent-content-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}",
  });
</script>

Webflow renders the actual field value at publish time.

Webflow gotchas

Embed previews are blank in the Designer

The Designer's live preview doesn't execute scripts inside Embed elements. Use the Webflow Preview mode (the eye icon in the top bar) or visit the .webflow.io staging URL — both run scripts.

Head Code requires republish

Changes to Project Settings → Custom Code don't take effect until you click Publish. Saving alone isn't enough.

CMS field interpolation

If you bind init options to CMS fields, double-check that the rendered HTML in published source has valid JavaScript syntax — fields containing quotes or backticks can break the snippet. Stick to plain alphanumeric IDs in CMS fields you embed into JS.

Webflow's lazy script loader

Some Webflow projects ship a deferred loader that delays third-party scripts. If Playgent is undefined when your inline Playgent.init runs, switch the SDK tag to <script src="..." defer> and call init from a DOMContentLoaded listener.

Origin allowlist

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

• Your custom domain (acme.com, www.acme.com).
• The Webflow staging domain (acme.webflow.io) — useful while you're previewing changes before publishing.

Players reference →