Web Integration
This guide will walk you through how to integrate a Flarie game into your website or web app. This page covers two main approaches to web integration:
Embed Code - a simple script tag you can drop into your site for a responsive game view with optional fullscreen capabilities.
Fullscreen iframe - for a more immersive experience, launch your game in a fullscreen iframe using a minimal HTML template.
In addition to embedding, we support callbacks and methods for deeper integration. These let you build custom experiences around the game, such as your own loading screens, custom restart views, or popup and events that appears based on gameplay.
Let’s dive in.
Embed Code
<script id="embed-script-v1" type="application/javascript" height="90vh" expander="true" src="https://play.flarie.com/embed.js" embed-url="{your-game-url}"> </script>
Optional attributes
|
Attribute |
Description |
|
|
Set an optional |
|
|
Set an optional |
|
|
Set an optional |
|
|
Activate an expander button that will trigger fullscreen mode. Example: |
|
|
Override the default expander minimize image. Example: |
|
|
Override the default expander fullscreen image. |
Fullscreen iframe
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no minimal-ui'/>
<meta name='apple-mobile-web-app-capable' content='yes'/>
<meta name='screen-orientation' content='portrait'/>
<meta http-equiv='ScreenOrientation' content='autoRotate:disabled'>
<style>
body, html{
height: 100%;
margin:0;
padding:0;
overflow:hidden;
}
#iframe-game {
overflow:hidden;
display:block;
position: absolute;
height: 100%;
width: 100%;
margin:0;
padding:0;
border:0;
}
</style>
</head>
<body>
<iframe id="iframe-game" src="YOUR_GAME_URL"></iframe>
</body>
</html>Callbacks
Flarie games support several callbacks that allow your website or app to listen for specific events during gameplay. These can be used to trigger custom functionality - like creating a custom loading screen, saving game data, or triggering something based on gameplay.
All callbacks are delivered via the window.postMessage API from the embedded iframe. You can listen for them using the message event on the window object.
Example Listener
<script>
window.addEventListener("message", function(event) {
switch(event.data.type) {
case "loading":
console.log("Event: Loading received: " + event.data.value);
break;
case "gameStarted":
console.log("Event: GameStarted received: " + event.data.value);
break;
case "game":
console.log("Event: GameOver received: " + event.data.value);
break;
case "gameClick":
console.log("Event: gameClick received: " + event.data.value);
break;
default:
break;
}
});
</script>
Callback: Loading
Triggered as the game is loading. You can use this to display or update a custom loading screen.When value reaches 100, your game is fully loaded and ready to display.
{"loading": {"progress": value}}|
Parameter |
Type |
Description |
|
value |
int |
Progress of your loading, 0-100. |
Callback: Game Started
Fired when a player begins a game round. Useful for tracking engagement or updating UI elements.
{"gameStarted": {"state": true}}|
Parameter |
Type |
Description |
|
state |
Bool |
State is sent as true |
Callback: Game Over
Triggered when a game round ends. This includes the player's score and time spent, so you can store or display the results.
{"game": {"time": time, "score": score}}|
Parameter |
Type |
Description |
|
time |
int |
Time spent of the game round (seconds) |
|
score |
int |
Score of the game round |
Callback: Game Click
Fired when a user taps a call-to-action (CTA) inside the game.
{"gameClick": {"state": true}}|
Parameter |
Type |
Description |
|
state |
Bool |
State is sent as true |
Methods
If you're integrating a Flarie game in a web environment (e.g. via iframe), you can trigger certain game actions from your parent page using the postMessage API. These methods allow you to control aspects of the game like starting a round, ending it, toggling sound, or showing the pause menu.
Make sure to target the iframe element where your game is loaded using contentWindow.postMessage().
Example Setup
<script>
function startGame() {
document.getElementById("iframe-id").contentWindow.postMessage({ type: "START_GAME" }, "*");
}
function gameOver() {
document.getElementById("iframe-id").contentWindow.postMessage({ type: "GAME_OVER"}, "*");
}
function turnSoundOn() {
document.getElementById("iframe-id").contentWindow.postMessage({ type: "TURN_SOUND_ON" }, "*");
}
function turnSoundOff() {
document.getElementById("iframe-id").contentWindow.postMessage({ type: "TURN_SOUND_OFF" }, "*");
}
function showPauseController() {
document.getElementById("iframe-id").contentWindow.postMessage({ type: "SHOW_PAUSE_CONTROLLER" }, "*");
}
</script>
Available Methods
START_GAMETriggers the game to start.
document.getElementById("iframe-id").contentWindow.postMessage({ type: "START_GAME" }, "*"); GAME_OVERManually ends the current game round. You might use this if the player exits or you want to force end the session and retrieve game data.
document.getElementById("iframe-id").contentWindow.postMessage({ type: "GAME_OVER"}, "*"); TURN_SOUND_ONEnables in-game sound. Ideal for implementing custom sound toggle controls in your app.
document.getElementById("iframe-id").contentWindow.postMessage({ type: "TURN_SOUND_ON" }, "*"); TURN_SOUND_OFFDisables in-game sound.
document.getElementById("iframe-id").contentWindow.postMessage({ type: "TURN_SOUND_OFF" }, "*"); SHOW_PAUSE_CONTROLLERDisplays the pause controller UI within the game. This lets users pause, view instructions, and resume or end the game. The pause controller will automatically hide when the game ends.
document.getElementById("iframe-id").contentWindow.postMessage({ type: "SHOW_PAUSE_CONTROLLER" }, "*");
UI Examples
Game with full width of the container
Game placed as part of the container
