Guides

Framer

Drop games into articles and pages using Framer's Embed component and the site-wide Custom Code section.

Framer ships an Embed component that accepts raw HTML. Together with a one-line entry in the site's Custom Code section, embedding Playgent takes a minute.

Plan requirement

Framer's Custom Code section is only available on paid sites (Mini, Basic, Pro, or higher). Free Framer sites can't run third-party scripts.

Load the SDK site-wide

In the Framer editor, open Site Settings → General → Custom Code → Start of <head> tag and paste:

html

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

Save and publish the site. The SDK now loads on every page.

Embed on a page

In the Framer editor, open the Insert menu (+), find Embed under the Code section, and drop one onto the canvas where the game should appear. Set the embed type to HTML and 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. Resize the Embed component on canvas to give the game room — Framer doesn't auto-fit to embedded content.

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

Dedicated games page

Create a new page in Framer (Pages → +) and drop in an Embed 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>

For a more polished UI, use Framer's native components for the tabs and call player.load() from a Code Override or a Code Component bound to their click event.

CMS Collection items

Framer's CMS Collections let you bind a per-item value to the Embed. Add a Plain Text field (e.g. Playgent Content ID), then in your Collection page template, the Embed component supports interpolating field values into its HTML. Use the field's reference in place of a hardcoded content value:

html

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

The exact token syntax depends on your Framer version — Framer's CMS bindings UI will show the correct placeholder.

Framer gotchas

Embed sizing

Framer doesn't auto-size Embed components to fit their content. Set explicit width / height on the canvas, or wrap the host <div> in a container with a fixed aspect ratio. The game's own UI is responsive within whatever box you give it.

Custom Code only on published sites

The in-editor preview doesn't execute scripts inside Embed components or Custom Code. Hit Publish and visit the live URL (or .framer.app staging URL) to verify.

Code Components are an alternative

If you write React, Framer also supports Code Components — .tsx files inside the project. You can build a <PlaygentGame> component there using the Next.js / React guide pattern. This gives you typed props inside the Framer canvas (game name, mode, content ID) without pasting HTML each time.

Origin allowlist

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

Your custom domain (acme.com).
The Framer staging domain (acme.framer.app) — useful while you're testing before connecting a custom domain.

Players reference →

Webflow

Squarespace