Embed reference

Everything the embed script understands: options on the game's element, the JavaScript API, the events your page can listen to, and what to allow in a Content-Security-Policy.

The code

<div class="playgent" data-id="pg_7hk2qp0azx" style="min-height:640px"></div>
<script async src="https://play.playgent.com/embed/v1.js"></script>

The script finds every element with class="playgent" (or a data-playgent attribute) and puts the game there. It also finds elements your page adds later, so single-page apps need nothing extra. One script serves any number of games.

Options

Add these attributes to the game's element. Look, features and puzzles come from Studio, not from the code: change them there and update the game.

Try the options with the code builder.

Sizing

• The game is as wide as its element, up to data-max-width, and centered.
• Its height follows the game, between 200 and 4,000 px. There is no scrollbar inside the game.
• It loads when it comes within 600 px of the screen.
• The frame allows full screen, sharing and copying to the clipboard.

JavaScript API

Once the script loads, window.Playgent has:

Playgent.on('complete', (data, type) => { /* one event type */ })
Playgent.on('*', (data, type) => { /* every event */ })
Playgent.off('complete', handler)

Playgent.identify({ id: 'u_8f3a2c', name: 'Dana K.', sig: '…' })  // a signed-in reader
Playgent.logout()                                               // same as identify(null)

Playgent.mount(element)  // set up one game element now
Playgent.scan()          // look for new game elements now

To call identify, logout, on or off before the script has loaded, add this line before the script. It queues the calls:

<script>window.Playgent=window.Playgent||{q:[]};"identify logout on off".split(" ").forEach(function(m){Playgent[m]=Playgent[m]||function(){Playgent.q.push([m,arguments])}})</script>

See signed-in readers for identify.

Page events

Every event is also a DOM event named playgent:<type>. It bubbles up from the game's element, with the data in event.detail, so you can listen without the API:

document.addEventListener('playgent:complete', (event) => {
  const { won, time, hints } = event.detail
  console.log(won ? `Solved in ${time}s` : 'Not solved', `with ${hints} hints`)
})

Every event also has:

• game: the game type, such as worday.
• player: the game's id, pg_….
• element: the game's element on your page.
• stream: the placement label, when data-stream is set.
• user: { id, name }, while a reader is signed in.

day is YYYYMMDD. level is null for games without levels.

Error codes

Google Analytics

With data-datalayer on the element, the game pushes these to window.dataLayer:

Each push has game_name, level_name (the level, or the day), playgent_time and, on level_end, success.

Content-Security-Policy

If your site sends a Content-Security-Policy header, allow the script and the frame:

script-src https://play.playgent.com 'sha256-t4oBvol880Et9gL8QMQu3AfpRFm2vwy3QFzMixuVxlA=';
frame-src https://play.playgent.com;

The hash allows the one-line queue above, exactly as written. Leave it out if you don't use that line. The script writes no HTML into your page, so it also works where Trusted Types are required.

Without the script

You can use a plain iframe:

<iframe src="https://play.playgent.com/run/v1/?i=pg_7hk2qp0azx"
        title="Today's word search"
        style="width:100%;max-width:560px;height:700px;border:0"
        allow="web-share; clipboard-write"></iframe>

The game then has a fixed height, your page gets no events, and Analytics counts no impressions. Your sites still applies. Use the script when you can.