Embed on the web

The web SDK puts a channel on your page in an iframe, sizes it to fit the game, and tells your page what happens inside. You can load it with a script tag or install it as a package.

You need a client token for each play. See Authentication.

Load the SDK

Script tag

Copy the snippet from the channel’s Embed tab in the dashboard. It looks like this, with your channel id filled in:

<div id="keliplay-game"></div>
<script src="https://play.keliplay.com/sdk/loader.js"></script>
<script>
  KrdsGames.mount('#keliplay-game', {
    channelId: '3f6b1c0a-8e2d-4b7a-9c15-2d4e6f8a0b1c',
    clientToken: 'YOUR_CLIENT_TOKEN',
    playBaseUrl: 'https://play.keliplay.com',
  })
</script>

The loader adds one global, KrdsGames, with a mount function.

Package

npm install @krds-games/sdk-web

import { mount } from '@krds-games/sdk-web'

const game = mount('#keliplay-game', {
  channelId: '3f6b1c0a-8e2d-4b7a-9c15-2d4e6f8a0b1c',
  clientToken: tokenFromYourBackend,
  playBaseUrl: 'https://play.keliplay.com',
})

Without any JavaScript of your own

The loader can mount itself from attributes on its own script tag. This is handy in content management systems where you can only paste HTML:

<div id="keliplay-game"></div>
<script
  src="https://play.keliplay.com/sdk/loader.js"
  data-target="#keliplay-game"
  data-channel-id="3f6b1c0a-8e2d-4b7a-9c15-2d4e6f8a0b1c"
  data-client-token="YOUR_CLIENT_TOKEN"
  data-play-base-url="https://play.keliplay.com"
></script>

data-target and data-channel-id are required. Leave out data-client-token to show the between-campaigns message.

Options

mount(target, options) takes the element (or a CSS selector for it) and these options:

Option	Type	Default	Description
channelId	string		Required. The channel to show.
clientToken	string or null		The token your backend asked for. null shows the between-campaigns message.
playBaseUrl	string	The address the loader came from	Where games load from: https://play.keliplay.com.
theme	'light' or 'dark'	'light'	Which colour scheme the game uses.
locale	string		A language tag such as fr or en-GB, for campaigns with translations.
initialHeight	number	420	Height in pixels before the game reports its own.
allowImmersive	boolean	true	Whether a game may expand to fill the screen when it asks to.

Size and full screen

The frame grows and shrinks to fit the game, so give its container a width and let the height follow. Some games, such as side-scrollers, ask to fill the screen while they are being played and return to normal size afterwards. Pass allowImmersive: false if your layout must not be covered. The game still works inline.

Control the embed

mount returns an object you can keep:

const game = KrdsGames.mount('#keliplay-game', { channelId, clientToken })

// Listen to what happens inside the game. Returns a function that stops listening.
const stop = game.on('session_completed', (payload) => {
  console.log('Play finished', payload.score)
})

// The iframe element, if you need it.
game.iframe

// Remove the game from the page, for example when the user navigates away.
game.destroy()

See Game events for every event and its contents.

Show a new play

A client token is good for one play. To let a player go again, ask your backend for a new token, then mount again:

game.destroy()
game = KrdsGames.mount('#keliplay-game', { channelId, clientToken: newToken })

Content Security Policy

If your site sends a Content Security Policy, allow the play address as a frame and script source:

frame-src https://play.keliplay.com;
script-src https://play.keliplay.com;