Flarie Help Station

Brand Settings

In the Brand Settings, you can change settings related to your brand. Here you can find:

• Terms
  
  
• Form Parameters
  
  
• Brand Prefix

• Time Zone

   

Terms

Who can use this feature: Admin, Manager

When collecting user data it's important to have users agree to terms and conditions. In Terms, you can populate the terms and conditions text with terms important to your brand. This will apply to all future Games and Game Centers. 

How to add Brand Terms:

1. Navigate to Terms in Brand Settings by expanding the menu. 

2. In the additional terms and conditions text box add your terms and conditions, they will now be applied to all future Games and Game Centers. 

Form Parameters

Who can use this feature: Admin, Manager

In Form Parameters, you can create custom data points to use in forms that appear in Games and Game Centers. 

How to add a Custom Form Parameter:

1. Navigate to Form Parameters in Brand Settings by expanding the menu.

2. Click Add Form Parameters Button

3. Set an internal name, this name will be used in analytics and once set cannot be changed.

4. Set the component type your question should have you can select between free text, dropdown, radio button, and checkbox. 

5. Depending on what component type you picked fill in the description or answers the user can select from. 

6. Click save and then when creating forms in Games and Game Centers the newly created Form Parameter will be in the list with the internal name.

Brand Prefix

Who can use this feature: Admin, Manager

Setting the brand prefix will help the system when generating links for your brand. Your brand prefix will be inserted to the redirect links that you create.

How to set a brand prefix:

1. Navigate to Brand Prefix in Brand Settings by expanding the menu. 

2. Type in the prefix you wish to use in the input field. The prefix will now be applied to all future redirection links created.

Brand Time Zone

Who can use this feature: Admin, Manager

Setting the time zone of your brand will help the system understand what time events in your Games or Game Center should trigger if you are using date and time settings. 

How to set a time zone:

1. Navigate to Brand Time Zone in Brand Settings by expanding the menu. 

2. Select the time zone you wish to use in the dropdown. 

Access Key

In the Brand Settings, you can change settings related to your brand. Here you can find:

• API Access Key
  
  
• API Secret Key
  

API Access Key

Who can use this feature: Admin, Manager

Your API access key is essential for authenticating with the Flarie API. It should be specified as the ‘accessKey’ parameter in the payload for external gamification events. 

For webhooks, authentication is managed through a bearer token, formatted as “Bearer <accessKey>“. This is adding an authentication layer that verifies requests originate from Flarie.

How to get an API Access Key.

1. Navigate to API Access Key by expanding the menu.

2. Generate and copy the key to use in your API. If an API Access Key has already been generated, generating a new one will invalidate the old key.

API Secret Key

Who can use this feature: Admin, Manager

Your API secret key plays a crucial role in securing your webhook payload by generating a hash, ensuring the request originates from Flarie and remains unaltered. This hash, formulated as SHA-256 (payload + secretKey), is included in the headers under the X-Signature attribute, providing an added layer of verification and integrity protection.

The Secret Key is optional. 

 

Integration

• Get Started

• Add Game to Web

• Add Game to App

• Callbacks & Methods

• Webhook

• [POST] Gamification

• [GET] Gamificaition

Get Started

In this documentation, you can discover how to implement Games in your App or Website using Flarie Studio. 

The Game Url

Your Game Url is generated in Flarie Studio.

https://game.flarie.com/games/{gameName}/{gameUid}?{optionalParameters}

{gameName} 
The static Flarie game name. Automatically populated from Flarie Studio.

{gameUid} 
The unique identifier for your game. Automatically populated from Flarie Studio.

{optionalParameters} 
you can add player information to your game through the URL, e.g. if you distribute the game on your website or in your app you can automatically add a unique identifier that you have on your user to make it easier to match your game data with your existing user data in Flarie Studio.

To add player information to the URL, simply add the desired parameters as URL Parameters in the Userbase section in Game Settings and append them to your URL. You can also specify if the parameter should be the identifier, meaning scores will be grouped by that value. Identifier is required to use the URL Parameter type of UUID. 

Example: 
https://game.flarie.com/games/{gameName}/{gameUid}?uuid=xxxx-yyyy-zzzz

Making the Game View look perfect

To make sure the game looks good on all devices the games have a fixed ratio of 9:16. If you have a greater screen resolution on the device, the game view will always center itself both vertically and horizontally on the screen. If you are running your game in your app you can set your webview to have constraints to cover the whole screen or create a webview with the correct aspect ratio of 9:16 and then have your own custom background to frame the game. 

Add Game to Web

Website

Depending on your needs we have two examples on how you can integrate your game on your website.

• Embed Code

• Fullscreen iframe

[WEB] 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

[WEB] 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>

Add Game to App

App

To run Flarie Studio games in your app you need to create a webview that supports custom interfaces and load your game url in the webview. WKWebView would be our recommended option for iOS. 

[recommendation] - in Flarie Studio you can enable Instruction Views. These Instruction View may include tutorial videos. set allowsInlineMediaPlayback in order to prevent the video going into full screen mode.

[App] iOS - Swift

import WebKit

class webGames: UIViewController, WKScriptMessageHandler, WKUIDelegate {

  var webView: WKWebView!
  var contentController = WKUserContentController()

  override func viewDidLoad() {
    // this will add support for the callback “gameOver”, meaning you will receive a notification every time the user ends a gameRound
    contentController.add(self, name: "gameOver")

    let config = WKWebViewConfiguration()
    config.allowsInlineMediaPlayback = true // recommended to prevent full screen video
    config.userContentController = contentController

    webView = WKWebView(frame: CGRect(x: 0, y: 0, width: size.width, height: size.height), configuration: config)
    self.view.addSubview(webView)

    // don’t forget to set the WKUIDelegate otherwise the target='_blank' won’t work
    webView.uiDelegate = self

    let gameUrl = Foundation.URL(string: "YOUR_GAME_URL")
    let gameUrlRequest = URLRequest(url: gameUrl!, cachePolicy: NSURLRequest.CachePolicy.reloadIgnoringCacheData, timeoutInterval: 20)
    webView.load(gameUrlRequest)
  }

  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
      if (message.name == "gameOver") {
          print("data: \(message.body)")
          return
      }
  }

  // allow target _blank for external urls
  func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
    if let frame = navigationAction.targetFrame,
        frame.isMainFrame {
        return nil
    }

    if let url = navigationAction.request.url {
        // this will allow target _blank on urls
        UIApplication.shared.open(URL(string: "\(url)")!)
    } else {
        webView.load(navigationAction.request)
    }
    return nil
  }
}

[APP] Android - Java

public class Demo {
    WebView webView;
    
    private void setupWebView() {
        webView = findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new WebAppInterface(context), "Android");
        webView.loadUrl("YOUR_GAME_URL");
    }

    private Handler handler = new Handler();
    
    public class WebAppInterface {
        @JavascriptInterface
        public void gameOver(final String message) {
            handler.post(new Runnable() {
                @Override
                public void run() {
                    Log.d("", "Data: " + message);
                }
            });
        }
    }
}

Callbacks & Methods

We support callbacks and methods for app and iframe integrations. 
You can use these callbacks and methods to create more customization in your app, for example your own loading screen or a custom restart view for your game. You can also use them to save data passed back to you from the game to create custom experiences in your app, such as unlocking certain features of your apps using games. 

Callbacks

Callbacks contain an interface name that you may listen to. Once the data is being sent the body of the message will contain the json data passed to your interface. 

Iframe  Example

<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 "gameOver":
                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

If you wish to build a custom loading screen for your game you can use our callback for Loading. 

When the progress value reaches 100 you are ready to hide your custom loading screen and present the game. 

Interface: loading Example: {"loading": {"progress":  _value}};

Callback: Game Started 

When the user starts a game round the data will be passed to your app’s interface.

Interface: gameStartedExample: {"gameStarted": {"state":  true}};

Callback: Game Over 

When the user completes a game round the data will be passed to your app’s interface. Save the game data as you see fit and use it to build gamified solutions within your app. 

Interface: gameOverExample: {"game": {"time":  _gameTime, "score": _score}};

Callback: Game Click 

When the user clicks on a CTA within a game this event will be called.

Interface: gameClick
Example: {"gameClick": {"state": true}};

Methods

Can be called from your app to trigger actions in the game.

Method: Start Game

If you wish to build your custom Start Game-button in your own restart view. 

Example:
iOS Swift: yourWebView.evaluateJavascript("startGame()");
Android Java: yourWebView.loadUrl("javascript:startGame()");

Method: Game Over

If you wish to manually end a game round for the user, e.g. when the user closes or leaves your app and you wish to retrieve the game data for that current round you can manually call the endGame method. 

Example:
iOS Swift:  yourWebView.evaluateJavascript("gameOver()");
Android Java: yourWebView.loadUrl("javascript:gameOver()");

Method: Turn Sound On

You can set if the sound should be on or off as default on the Settings page in Flarie Studio. If you want to create your own custom restart view with sound settings in your app you can use this method to turn the sound on. 

Example:
iOS Swift:  yourWebView.evaluateJavascript("turnSoundOn()");
Android Java:  yourWebView.loadUrl("javascript:turnSoundOn()");

Method: Turn Sound Off

You can set if the sound should be on or off as default on the Settings page in Flarie Studio. If you want to create your own custom restart view with sound settings in your app you can use this method to turn the sound off. 

Example:
iOS Swift: yourWebView.evaluateJavascript("turnSoundOff()");
Android Java: yourWebView.loadUrl("javascript:turnSoundOff()");

Method: Pause Controller

You can call this method to display the pauseController. With the pauseController the user can pause the game to see game instructions and also resume or end the game round. The pauseController will automatically hide again when the game ends. 

Example:
iOS Swift: yourWebView.evaluateJavascript("showPauseController()");Android Java: yourWebView.loadUrl("javascript:showPauseController()");

Webhook

Flarie Studio is equipped with a powerful Data Integration - Webhook feature that empowers you to seamlessly respond to events and design personalised processes. Whether it’s reward users in your own platform, tracking user activity and engagement, or consolidating your analytics - this feature streamlines the process. 

In order to get going with Data Integration you simply create a Webhook in your Flarie Studio account, provide a Webhook URL where Flarie will POST the data. Choose your events that you would like to monitor and determine the specific Games, Game Centers or Rewards where these events should trigger.

You may find payload examples for each Webhook Event in your Flarie Studio account.

Authentication (optional)

Enable Access Key and Secret Key in Flarie Studio to get authentication sent in the header of the webhook request.

Learn more about Access Key here

Learn more about Secret Key here

• If Access Key is enabled, the Authorization header will be added to the request: 
  Authorization: Bearer {accessKey}

• If Secret Key is enabled, the X-Signature header will be added to the request:
  X-Signature: SHA-256 HMAC signature generated using the Secret Key and the JSON payload
  The X-Signature header contains the SHA-256 HMAC (Hash-based Message Authentication Code)  signature generated by using the Secret Key to hash the JSON payload. This signature is used for verifying the integrity and authenticity of the webhook payload.
  

   

Below is an example of how you can verify the payload with the X-Signature

const crypto = require("node:crypto");

const payload = // your json payload in the request

const payloadString = JSON.stringify(payload);

const secretKey = "your-secret-key";

const calculatedSignature = crypto
  .createHmac("sha256", secretKey)
  .update(payloadString)
  .digest("hex");

const X_Signature = "X-Signature-in-the-header";

if (X_Signature === calculatedSignature) {
  console.log("Payload is authentic and unmodified")
} else {
  console.log("Payload is modified")
}

Game - Events

• First Game Start
  Description:Event sent the first time the Player starts the Game.

  Payload: Event, User Base, Game

• Form Submission - StartGame
  Description: Event sent time the form is submitted when the Player starts the Game. This event will be sent at the start of every Game Session.

  Payload: Event, User Base, Game

• Game Start
  Description: Event sent every time the Player starts the Game.

  Payload: Event, User Base, Game

• Challenge Completed
  Description: Event sent when the Player completes the challenge by reaching the set target in your Game, This event will only be sent once per Game Period.

  Payload: Event, User Base, Game, Game Score

• Form Submission - Challenge Completed
  Description: Event sent when the Player submits the form after a Challenge has been completed. This event can be sent multiple times, since the Player can access the form and modify the details.

  Payload: Event, User Base, Game, Game Score

• Game over
  Description: Event sent every time the Player completes a Game Round and submits a Game Score.

  Payload: Event, User Base, Game, Game Score

• Winners - Prizes
  Description: Event sent with the generated winners (array) when a Game or Game Period expires.

  Payload: Event, [Prizes]

Game - Events

• Game Center SignUp
  Description:Event sent when the Player successfully registers in your Game Center.

  Payload: Event, User Base, Game Center

• Game Center Additional Form Submission
  Description:Event sent when the Player submits the form of additional parameters in your Game Center. This event will happen if you add parameters to your Game Center and the Player is already registered.

  Payload: Event, User Base, Game Center

• Game Center Rewards
  Description:  Event sent when the Player purchase a Reward in the Game Center.

  Payload: Event, User Base, Game Center, Game Center Reward

[POST] Gamification

This guide is for external Gamification Condition - events created in Flarie Studio.

Example / Use Case

Company X run an e-commerce selling clothes online and want to increase their sales on t-shirts. To do so they incentives Customers by giving out 5 game attempt to a promotional competition with great prizes every time a Customer buy a t-shirt. 

Company X has created a Gamification Condition in Flarie Studio that is configured to give 5 game attempts to the customer every time this api is called. 

When the Customer purchase a t-shirt, Company X will trigger the api from their backend. 

Company X has a unique identifier on their end on every Customer. This is passed as the playerIdentifier in the api. When it’s time for the Customer to play in the competition the same playerIdentifier is passed to the game as a URL Parameter. 

[POST] https://prod-api.flarie.com/v1/public/gamification

Payload

{
  "accessKey": "string",
  "gamificationConditionId": "string",
  "playerIdentifier": "string"
}

Response Message

[GET] Gamification

This guide is for getting the number of attempts for a single playerIdentifier in a gamification.

[GET] https://prod-api.flarie.com/rest/gamification-service/v1/player-gamifications/player-identifiers/{playerIdentifier}/gamifications/{gamificationId}

URL Parameters

Note! you need gamificationId, not the gamificationConditionId. You can locate your gamificationId in the URL on the edit gamification page.

Response(200)

{
  "playerIdentifier": "demo-player-identifier",
  "entityType": "PLAYER_GAMIFICATION",
  "gamificationId": "xxxxx-xxxxxx-xxxxxx-xxxxxxxx",
  "updatedAt": "2023-11-10 12:58:14",
  "createdAt": "2023-11-10 12:57:37",
  "SK": "xxxxx-xxxxxx-xxxxxx-xxxxxxxx",
  "attempts": 4,
  "PK": "PLAYER_GAMIFICATION#demo-player-identifier",
  "id": "090cb380-2663-4cae-a20d-85967d03c78c"
}

Brand Assets

In the Brand Assets, you can add and edit assets related to your brand. This will make Games and Game Centers easier to create. Here you can find:

• Brand Fonts

• Brand Emails

• Brand Time Zone

• API Access Key

• API Secret Key

• Brand Terms

• Form Parameters

Brand Fonts

Who can use this feature: Admin, Manager, Designer

Upload custom fonts to be used when styling text for your Games and Game Centers. You can upload multiple fonts and apply them in text styling. 

How to upload Fonts:

1. Navigate to Brand Fonts in Manage Brand Assets by clicking on the profile icon. 

2. Click the Add New Font button.

3. Set a font name, this name will be visible in the font dropdown when picking a font.

4. Upload a Regular and a Bold version of the font. The font needs to be in .otf or .ttf format.

5. Click Add Font to Assets, the font is now available when styling texts.
   
   

Your fonts will be available in all font dropdowns in Flarie Studio, e.g in general settings on Games and Game Centers.

Brand Emails

Who can use this feature: Admin, Manager, Designer

Set the default email styling for your brand. This email styling will be applied to all future Games, Game Centers, and created emails on your brand account.

How to customize Brand Email:

1. Navigate to Brand Email in Manage Brand Assets by clicking on the profile icon.

2. Change the email sender to be related to your brand, so that the users receiving the email will know who the sender is. 

3. Set the text and button settings to the desired style.

4. Upload a Header and a Footer image to your emails that fit your brand. 

Brand Time Zone

Who can use this feature: Admin, Manager

Setting the time zone of your brand will help the system understand what time events in your Games or Game Center should trigger if you are using date and time settings. 

How to set a time zone:

1. Navigate to Brand Time Zone in Manage Brand Assets by clicking on the profile icon. 

2. Select the time zone you wish to use in the dropdown. 

API Access Key

Who can use this feature: Admin, Manager

Your API access key is essential for authenticating with the Flarie API. It should be specified as the ‘accessKey’ parameter in the payload for external gamification events. 

For webhooks, authentication is managed through a bearer token, formatted as “Bearer <accessKey>“. This is adding an authentication layer that verifies requests originate from Flarie.

How to get an API Access Key.

1. Navigate to API Access Key in Manage Brand Assets by clicking on your profile icon.

2. Generate and copy the key to use in your API. If an API Access Key has already been generated, generating a new one will invalidate the old key.

API Secret Key

Who can use this feature: Admin, Manager

Your API secret key plays a crucial role in securing your webhook payload by generating a hash, ensuring the request originates from Flarie and remains unaltered. This hash, formulated as SHA-256 (payload + secretKey), is included in the headers under the X-Signature attribute, providing an added layer of verification and integrity protection.

The Secret Key is optional. 

 

Brand Terms

Who can use this feature: Admin, Manager

When collecting user data it's important to have users agree to terms and conditions. In Brand Terms, you can populate the terms and conditions text with terms important to your brand. This will apply to all future Games and Game Centers. 

How to add Brand Terms:

1. Navigate to Brand Terms in Manage Brand Assets by clicking on the profile icon. 

2. In the additional terms and conditions text box add your terms and conditions, they will now be applied to all future Games and Game Centers. 

Form Parameters

Who can use this feature: Admin, Manager

In Form Parameters, you can create custom data points to use in forms that appear in Games and Game Centers. 

How to add a Custom Form Parameter:

1. Navigate to Form Parameters in Manage Brand Assets by clicking on your profile icon

2. Click Add Form Parameters Button

3. Set an internal name, this name will be used in analytics and once set cannot be changed.

4. Set the component type your question should have you can select between free text, dropdown, radio button, and checkbox. 

5. Depending on what component type you picked fill in the description or answers the user can select from. 

6. Click save and then when creating forms in Games and Game Centers the newly created Form Parameter will be in the list with the internal name.

Gamification

Who can use this feature: Admin, Manager

1. Pick Gamification Scenario
   

2. Attempts/Unlock Games gamification
   

3. Adventure Mode in Game Center
   

4. Coins Distribution in Game Center
   

5. Unlock Rewards in Game Center

6. Gamification Analytics

Gamification is about applying game mechanics to a non-game environment, such as a product or service, to increase user engagement. For example, when a customer performs a transaction or another desirable action, you can reward them with a Gaming experience.

With Flarie Studio, you can design different gamification scenarios and apply them to your service. Some scenarios are connected to Game Center while others only require a Game.  
 

How to pick a gamification scenario

Four different gamification scenarios can be picked and combined with other solutions.

Attempts/Unlock games: Reward players with attempts in a Game when performing a specific task, i.e. by reaching a set target score or by performing an external action like a transaction.

Adventure mode: Let your players go through the Game Center as a playable journey by unlocking Games and Rewards in a specific order.

Coins Distribution: Reward your players by giving them a chunk of coins when reaching a score in a Game or by performing an external action.

Unlock Reward: Make your players unlock Rewards by setting up tasks to complete, i.e. reach a target score, buy a Reward, or perform an external action.

How to set up Attempts/Unlock Games gamification

First, make sure you have already prepared at least one Active Game to be used in the gamification scenario. 

Navigate to Gamification in the header click on Create Gamification and then pick Attempts/Unlock Games. 

1. Name your gamification scenario.

2. (optional) Set your gamification status to active. You can change the status at any time but the Gamification needs to be Active in order for it to work.

3. Click on Add Game in the Game Table, and add the Game/s that you have prepared to be included in the gamification scenario. 

4. Set an internal or external condition. 

How to set an internal condition for attempts/unlock games

Two internal conditions can be set up with attempts/unlock games. 

Reach score in game

1. Select reach score in the game in the internal scenario dropdown for the set condition.
   
   
2. Select the Game that the player has to play to gain attempts
   
   
3. Set a score that the player has to reach.
   
   
4. Set the amount of attempts the player will gain to reach the set score. If you select unlimited then the game will simply be unlocked, once the player reaches the score.
   
   
5. Save the condition and add more conditions, if needed. 
   
   
6. Save the Gamification
   
   

Buy attempts in Game Center

First, make sure you have prepare an Active Game Center with a Reward to connect the condition with.

1. Select buy attempts in the Game Center in the internal scenario dropdown for the set condition

2. Select the Game Center that the user needs to purchase the Reward in.

3. Select the Reward that needs to be purchased to gain the attempts.

4. Set the amount of attempts the user should gain from purchasing the Reward. If you select unlimited, then the game will simply be unlocked after the player purchases the Reward.

5. Save the condition and add more conditions, if needed.

6. Save the Gamification.
   
   
   

How to set an external condition for Attempts/Unlock Games

1. Select external in the set condition for the Gamification scenario.

2. Set the amount of attempts the user should gain from triggering the external condition.

3. Save the condition and add more conditions, if needed.
   
   

If this is your first time setting up an external condition make sure to generate an Access Key for your brand. How to:

1. Expand the See External API Guide and navigate to the access key, or navigate to Manage brand assets → API access key.
   
   
2. Generate and copy the key to your API. If an API key has already been generated, generating a new one will invalidate the old key.
   
   
   

How to set up Adventure Mode gamification in Game Center

First, make sure you have already prepared an Active Game Center with Games in it to be used in the gamification scenario. Rewards can also be used in the adventure mode.

Navigate to Gamification in the header, and click on Create Gamification. Then pick Adventure mode. 

1. Name your Gamification scenario.

2. (Optional) Set your gamification status to Active. You can change the status at any time but the Gamification needs to be Active in order for it to work.

3. In the Gamification flow, click on Add Games and add the Games that you have prepared to be included in the Gamification scenario. You can also add Rewards by clicking the Add Rewards button. 

   

4. In the gamification flow table, sort the Games in the order you want the player to clear them. You can drag and drop them to change the order. Add a target score that the player needs to reach in the Game to unlock the next one. 

5. (Optional) Add a custom popup text for if players click on the locked Game. This can be set by ticking the Set Game lock pop-up text in the gamification flow table on the selected game.

6. (Optional) Add a custom popup text for if players click on the locked Game. This can be set by ticking the Set Game lock pop-up text in the gamification flow table on the selected game.

7. Save your Gamification and try it out in the selected Game Center.

8.  

   
   

   
   

    
   

How to set up Coins Distribution in Game Center

First, make sure you have already prepared an Active Game Center 

Navigate to Gamification in the header and click on Create Gamification. Then pick Coins Distribution. 

1. Name your Gamification scenario.

2. (Optional) Set your gamification status to Active. You can change the status at any time but the Gamification needs to be Active in order for it to work.

3. Select the Game Center you want the players to gain coins in

4. Set an internal or external condition.

   

How to set an internal condition for Coins Distribution

One internal condition can be set up with attempts/unlock games. 

1. Select reach score in game in the internal scenario dropdown for the set condition.

2. Select the Game that the user needs to play to gain coins. Only games in the selected Game Center can be picked. 

3. Set a target score that the players need to reach 

4. Set the amount of coins the user should get for reaching the score. The user is only able to receive the Reward once per game period on the same game.

5. Save the gamification

   
   

How to set up an external condition for Coins Distribution.

1. Select external in the set condition for the Gamification scenario.

2. Set the amount of coins the user should gain from triggering the external condition.

3. Save the gamification 

   

If this is your first time setting up an external condition make sure to generate an Access Key for your brand. How to:

1. Expand the See External API Guide and navigate to the access key or navigate to Manage brand assets → API access key.

2. Generate and copy the key to your API. If an API key has already been generated, generating a new one will invalidate the old key.

   
   

How to set up Unlock Rewards in Game Center

First, make sure you have already prepared a Game Center with Rewards in it.

Navigate to Gamification in the header click on Create Gamification and then pick Unlock Rewards.

1. Name your gamification scenario.

2. (Optional) Set your gamification status to Active. You can change the status at any time but the Gamification needs to be Active in order for it to work.

3. Select the Game Center users should unlock rewards in

4. In the reward, table click add rewards and add rewards. Only rewards from the selected game center will be available

5. (Optional) Write a custom popup text for if players click on the locked Reward.

6. Set an internal or external condition. 

   

How to set an internal condition for Unlock Rewards

Two internal conditions can be set up with attempts/unlock games. 

Buy Reward in Game Center

Prepare another Reward excluding the ones in the reward table to connect the condition with. 

1. Select buy reward in the Game Center in the internal scenario dropdown for the set condition.

2. Select the Reward that needs to be purchased to unlock the Reward in Reward table.

3. Save the gamification

   

Reach game score in game

Prepare a game in the selected Game Center to connect the scenario with. 

1. Select reach score in game in the internal scenario dropdown for the set condition.

2. Select the Game that the player has to play to gain attempts Only Games from the selected game center are available

3. Set a score that the player has to reach to unlock the Reward.

4. Save the gamification

   

How to set an external condition for Unlock Rewards

1. Select external in the set condition for the Gamification scenario.

2. Save the gamification

If this is your first time setting up an external condition make sure to generate an Access Key for your brand. How to:

1. Expand the See External API Guide and navigate to the access key or navigate to Manage brand assets → API access key.

2. Generate and copy the key to your API. If an API key has already been generated, generating a new one will invalidate the old key.

   
   

How to view your gamification analytics 

Navigate to gamification and click the see analytics button.

1. The data shown will be on the past month, adjust the date to suit your analytics needs.

2. Expand the chevron on each gamification event to see the statistics breakdown in each gamification scenario. 

Game Center

• General Settings

• Rewards and Wallet

• Email Settings

• User Base and Log-In

• Modules

• Game Module

• Text Module

• Ad Module

• Reward Module

Who can use this feature: Admin, Manager, Designer, (Analyst can only see analytics data)

A Game Center can be thought of as an Arcade, where you gather Games you have created in one place so users can easier find all your Games. With the activation of wallet user can also gain in game currency to spend in a Reward store that can be set up in the Game Center. 

The Game Center can be used combined with any type of Game setting and shared through an URL, and even built or integrated in an app.

Build your Game Center however you wish by dragging and dropping different modules with texts, images, Games and Rewards. The background, currency and all items can be branded.

General Settings

This section controls the general look and feel of your game center. Here you will find everything from text styling to pop-up design. You will be able to decide on the different backgrounds and colors as well.

Rewards and Wallet

The Game Center enables users to collect currency for their account which they can in turn exchange for different rewards. Users collect currency by participating in different competitions and most commonly, playing games. The amount of currency that the users get is determined by the amount of points they score on the different games. Utilizing Gamification (länk till Gamification), you can also allow users to earn coins in other ways, for example reaching a score in a game or performing an external action.

Email Settings

This section features the general styling of all e-mail communication that will be sent out to players. The user can add a top image and a bottom image and specify what the sender of the e-mail should say. 

User Base and Log-In

This section dictates the styling and texts for the login and registration flow for new and existing users. This is also where you will decide what type of information you want to collect from new users as well as set up your terms and conditions. 

User BaseThe User Base functionality is used to enable the collection of different forms of personal data/user data as well as decide how you should identify the users upon their return. 

Different types of identifiers

User Input: The user will provide information through a form. You will then set custom parameters deciding which information you wish to collect from the user. There are a number of different parameters available in the “+Add Parameters”-section 

URL Parameter: With this option, you can add player information to the game URL. Add the desired parameters below and append them to your URL. Example:https://your-game-url.com?{parameter}={your_value}

Modules

The main content of the Game Center consists of different modules. There are four different kinds: Game Module, Ad Module, Text Module and Rewards Module. You can mix these modules and place them in whatever order you want. You can also use the same kind of module and stack on top of each other several times.

Status on Modules

You can choose to control if a module should be visible or not in the Game Center through the Module Status. You can change the status through a toggle. A module status can either be visible or hidden. Module status overrides status on the Game and Reward level. 

Start and End Date

You can choose to set a Start Date and End Date for a module to control when it will appear in the Game Center. If you set a Start/End Date on the module level it will override any Start/End Date set on the Game and Reward level.

How to add a Game Module

This module is where you connect Games to your Game Center. Make sure you have at least one Game prepared to connect.

1. Click on Add Module and select Game Module from the popup

2. Name your Module and add a description text (optional)

3. Add Games to the module by clicking on the Add Games button. The list will show all Games in your Games Library. 

   
   

4. Select the Games you want and click on Select. You can add as many Games as you want to the module and all the Games you have selected will be added to the Games Table. The default status will be Hidden. The Games will be added to the Games Table.
   

5. Click on Edit Settings on the Game in the table to open the popup for the settings for the specific Game.
   

   
   

6. Select the status for the Game through the Visible/Hidden toggle. As soon as the status is set to Visible, your players will then be able to see it in the Game Center. Keep in mind that the status at the module level will override the status set at the individual Reward level.

7. Select if you want a Start - and/or End date to the Game to control when it will appear in the Game Center and for how long it should be available. Keep in mind that if you have set a Start/End Date at the module level, it will override any Start/End Date set at the Reward level. When an End Date has passed, the status is automatically changed to Hidden.
   
   
   
   

8. Choose Game image size of the Game Image (full size or half size). Once you have set the size, you can upload an image that will represent the Game in the Game Center. The recommended image size will be visible above the file drop/upload box.

   
   
   

9. Select if you want the game to have a Game Lock (optional). If you don't want it to be available to players straight away. This will add a lock icon and a countdown to when the Game will be unlocked. Select the number of days you want the countdown to last and upload an image if you want to replace the Game image during the countdown period. This is great for retention. If the user tries to play the Game during the locked period, a popup will appear. The text for the popup is set in the popup messages section 
   
   

   
   
   
10. Click on Save. 

How to add a Text Module

The Text module is a great module if you want to add some text in-between modules, explaining e.g. a competition or campaign you are running.

1. Click on Add Module and select Text Module from the popup

2. Add a Text Header and Description text and style them.

How to add an Ad Module

In the Ad module you can add an image to display an ad, highlight a campaign or just visually improve your Game Center. The image can be clickable and you can add any URL to the Ad image.

1. Click on Add Module and select Ad Module from the popup

2. Name your Module (optional)

3. Select the Ad size you want. Either full width or half width

4. Drag and drop the image you want to use. You find the recommended image size above the upload image box.

5. Ad an external URL link (optional).

   

How to add a Reward Module

A reward is an item that your players can purchase in your Game Center. You can add any number of Rewards that your players can purchase with their coins earned by playing Games. They can be e.g discounts or digital and physical products.

1. Click on Add Module and select Reward Module from the popup

2. Name your Module (optional)

3. Click on Add Reward 

4. Add a Text Header and Description text and style them (optional)

5. Select the status for the Reward module through the Visible/Hidden toggle. As soon as the status is set to Visible, your players will then be able to see it in the Game Center. Keep in mind that the status at the module level will override the status set at the individual Reward level.

6. Select if you want a Start - and/or End date to the Reward module to control when it will appear in the Game Center and for how long it should be available. Keep in mind that if you have set a Start/End Date at the module level, it will override any Start/End Date set at the Reward level. When an End Date has passed, the status is automatically changed to Hidden.

7. Set an item description to the Reward that players can read before the Reward is purchased.

8. Choose the size for the Reward Image. Sizes to choose between are full size and half size. Once you have set the size, you can upload an image that will represent the Reward in the Game Center. The recommended image size will be visible above the file drop/upload box. 

9. Set a Price for the Reward. The price determines how much the Reward will cost for players to purchase in the currency you have selected (e.g. coins).
   
   

   

10. Select if you want the reward to have a cooldown period (optional), meaning a period when players are unable to purchase the same Reward more than once. Select the number of days you want the cooldown to last and upload an image to replace the Reward image during the cooldown period. If the user tries to buy the reward during the cooldown period, a popup will appear. The text for the popup is set in the popup messages section

11. Select if you want the reward to have a Reward Lock (optional) if you don't want it to be available to players straight away. This will add a lock icon and a countdown to when the Reward will be unlocked. Select the number of days you want the countdown to last and upload an image if you want to replace the Reward image during the countdown period. This is great for retention. If the user tries to buy the reward during the locked period, a popup will appear. The text for the popup is set in the popup messages section Select a reward type that should trigger when the reward is purchased. You can read more about the different Reward types below.

    

12. Add the needed information to the selected reward type, e.g a coupon code, if that is the selected Reward type

13. Select if you want to set a limited stock or not for the reward. You will be able to keep track of the stock in the Rewards Table.
    
    

14. Setup the text for the email that the reward is gonna be attached to. Email is always the distribution method for all Rewards.

15. Save and its completed.

Reward Types

All Rewards are distributed via email. The different Reward types available are

Coupon Code - same for everyone: This reward type will distribute a generic coupon code for all players who buy the Reward. You can set the code to be distributed in the Coupon Code input field.

Coupon Code - Unique for everyone: This Reward type enables you to upload a set of unique coupon codes to be distributed to the players who purchase the Reward. Add your unique codes in the input field, separated by a comma, and upload the codes. Make sure you upload enough codes to cover the purchases of the code. If they are all used up, new players won't be able to buy a code, as they are unique to each player. The codes can be viewed or edited from the Rewards Table in the module settings

URL - Same for everyone: This reward type will create a CTA button in the Reward email with one generic destination for all purchases of the Reward. You can set the destination URL you want to use in the Destination URL input field.

URL - Unique for everyone: This reward type will generate a CTA button that is unique for every player who purchases the Reward. You can upload an unlimited number of URLs, just make sure there are enough URLs for each player. If they are all used up, new players won't be able to gain a URL, as they are unique to each player who has purchased the Rewar

Form - Ask users for data: This Reward type will trigger a form where the players that have purchased the Reward will be able to fill in the form with the specific data parameters that you choose to set up. The data will then be added to the user’s ID and gathered in the User Base. This reward type is mainly used to gather addresses to send physical Rewards, such as merchandise.

Drag and Drop Modules

You can move modules up or down the list of modules by pressing and holding down the hamburger icon and dragging the module in the list. This sorting will reflect on the Game Center view. Example: if you drag the same module to the bottom of the list the game module will now appear in the bottom of the game center.

Manage Winners

The Manage Winners section is used to randomly select winners from a challenge that you have set using the “Challenge” functionality. In the Manage Winners section, you will find three different sections. Randomize Winners, Challenge Winners and Prizes Winners. Let's explore these different categories.

• Randomize Winners

• Challenge Winners

Randomize Winners

This functionality will enable you to manually generate winners from the users who have completed your challenge. By clicking the “Randomize Winners” button, you will get a pop-up where you are asked what terms you want to randomize and to enter three different values.

Randomize by min. high score: Enables you to select winners based on their minimum high score.

Randomize by probability (multi-entry): If you have activated the multi-entry feature, this enables you to randomly select winners based on probability rather than minimum high score.

Number of winners: Select the number of winners that you wish to generate.

Min points: The requirement for the minimum points the players should have reached to qualify to be included in the randomization

Max points: The maximum points the players can reach and still qualify for randomization. We suggest you set this number very high, to not exclude any players.

Once you have done this and generated your winners, you can download the CSV file which contains a list of your winners.

Challenge Winners

This section shows all the people who have completed the Challenge (länk till Challenge) in your game. This means that everyone on this list has reached the set point goal. This list can be exported as a CSV file, similar to the Randomize Winners section.

Game Settings

Who can use these features: Admin, Manager, Designer

1. Game Status

2. Split Game

3. Views

4. Challenge

5. User Base

Game Status

The Game Status defines whether a game should be considered active or not. The status can be toggled between the following statuses:

Active: This means that the game counts as an active Game link. This is especially significant for One Game licenses which only allow one active game link at a time. Games also need to be active to work in Gamification scenarios and/or to send payloads if added to webhooks. 

Draft: The game is currently only a draft and will be populated with banners notifying you that the Game is still in draft mode. It is not counted as an active game link.

Expired: This status will automatically appear if a Game has been populated with specific start and end dates. Once the Game passes the end date, the Game Status is changed to Expired by the system.

Split game

Turning this feature on will give you the possibility to split your Game, meaning you could have e.g. 4 competitions during a month to run weekly competitions with your Game URL. 

How to set up Split Game: Adding monthly time periods to my game

1. In the selected Game go to Game Setting → General Settings and set a Start - and End Date for your Game

2. Scroll down to Activate Split Game and select Yes to activate

3. In the popup, set your first Game period

   

4. Click on add time period and add the desired number of periods

Add a single time period:

1. To add a single time period, set the desired End Date after opening the add time period popup.

2. After that, hit update and the added time period will appear in the table.

Add multiple time periods

1. To add multiple time periods at once, select Add Time Periods, and in the popup, select Multiple Time Periods. 

2. Select the start date of your second period and add the number of periods you want to create, along with the number of days each period should contain. Please ensure that the start date of the multiple time periods doesn't overlap with the first game period that you created.

    

   

    

Views

The Views feature enables you to create custom text boxes that you can connect to a desired URL. You will also have the opportunity to decide if you want the boxes to be visible before a user has played a game round, or after. This feature most resembles a classic Call To Action button which can be found amongst other online platforms and media.

How to add Views to your game

1. In the selected game, go to Game Setting → Views and activate views 

2. Select if you want the Views to be displayed before the game starts, or after the player has played a game round. 

3. Add text, an optional URL link, and style to your view

4. (optional) Add more views by clicking the + add view button, when doing this make sure to change the Top value in styling so that the views don’t overlap with each other.

Challenge

The challenge function enables you to trigger an event upon a player reaching a certain score. This is the most commonly used functionality when setting up competitions in Flarie Studio Games. This feature can trigger different types of events based on the settings you choose. 

How to set up a challenge in game

You can set up a challenge in Game by activating the challenge-setting 

1. In the selected Game, navigate to Game Settings → Challenge and activate Challenge.

2. (optional) Set a target score for your Challenge to encourage your players to play more of the Game. Don’t forget to edit your text to fit your Game. If you are unsure of what Game Score to set, we suggest playing the Game a few times to get an idea of what a good limit would be. If you need suggestions, do not hesitate to contact us for some guidance.

3. Select a Reward type from the 5 available options. Read more about the reward types here.

Reward Types

Different reward types for challenge

Coupon Code - Same for everyone: This reward type will make distribution for one code available through a selected distribution method. It’s perfect if you want to distribute a discount code to all players who have completed the challenge.

Coupon Code -Unique for everyone: This reward type makes uploading of codes to distribute available. The code will be displayed through your selected distribution method. This option is good if you want to control the number of rewards that are getting distributed.  You can upload an unlimited number of codes, just make sure there are enough codes for each player. If they are all used up, new players won't be able to gain a code, as they are unique to each player who has completed the challenge

URL -Same for everyone: This reward type will create a CTA button with one single destination. It’s perfect if you want your players to visit e.g. a specific website after they complete the challenge. You can set the URL in your selected distribution method.

URL-Unique for everyone: This reward type will generate a CTA button that is unique for every player in the selected distribution method. This reward type is good if you want to limit the number of URLs that you are distributing. You can upload an unlimited number of URLs, just make sure there are enough URLs for each player. If they are all used up, new players won't be able to gain a URL, as they are unique to each player who has completed the challenge

Form - Ask users for data: Reward type Form will instead of a reward in-game popup trigger a form where the players that have completed the challenge will be able to fill in the form with the specific data parameters that you choose to set up after they have finished playing the Game. The data will then be added to the user’s ID and gathered in the User Base. This reward type is an excellent way to gather information about your players such as their Email and Name. 

Tips: In Manage brand assets → Form Parameters you can create new form parameters that you want to add to the form.

Display the reward in-game

Make the reward available to your players after they complete the challenge, by enabling reward in the game.

How to Set up Reward in Game

1. Activate the Reward In-Game setting in the challenge
2. Change the text and style to suit your game. Depending on the selected reward type different styling options will be available. 

Email distribution 

Send an email to all players that have completed the challenge with their reward, by enabling email distribution. 

1. Set your email sender so that the player knows who the sender is. The email sender will be defaulted to your brand name but can be edited.

2. Set the text and style of your email. You can also use the Send Test Email function to send a replica of the mail that will be distributed to the players. 

Tips: In Manage Brand Assets → Brand Email you can set the email sender and style for all Emails and save time on future Emails.

Multi Entry

Motivate your players with an increased chance of winning by entering the challenge multiple times. 

1. Activate multi-entry in the Challenge settings

2. Set a limit to how many times a player can enter the challenge. You can set if the limit should be daily or total for the game period. 

3. Style the text to fit your game

Manage Challenge Winners 

In Manage Winners you can see the list of all players that have completed the challenge, along with their high scores. Read more about Manage Winners here

User Base

The User Base functionality is used to enable the collection of different forms of personal data/user data. The main thing that you will select in the User Base section is the type of player identifier that you want the game to have. A unique identifier is required to use some functionality such as Prizes and Winners.

Different types of identifiers

Unique Browser: This option identifies the user by placing a token in their browser. If the user changes the browser, a new token and identifier is created for that user.

Email: This option identifies the user by the email address that they submit. If the user changes the email address, a new token and identifier is created for that user.

Mobile Number: This option identifies the user by the Mobile Number that they submit. If the user changes the Mobile Number, a new token and identifier is created for that user.

URL Parameter: With this option, you can add player information to the game URL. Add the desired parameters below and append them to your URL. Example:https://your-game-url.com?{parameter}={your_value}.This functionality also allows you to collect multiple parameters of data from the users before they can access the game. There are several different parameters available in the “+Add Parameters”-popup

Select whether you want the parameter to be based on User input through a Form, or a URL parameter, which will be appended to your Game URL. 

If you have selected “User Input”, make sure you add a descriptive name in the Input Field Text so that the player can easily understand what information to provide.

Furthermore, you can style the look and design of the form fill that appears when collecting different types of data parameters from the users. This include Form Title, Terms & Conditions Text, Start Game Button-text etc.

Game Design

In Flarie Studio you will find 100+ entertaining and engaging games.

All of the games are simple pick up and play games so the best way to get to know these Games is simply to play a few.

• Design Assets

• Parallax Effects

• Web Page Background Image

• Spritesheets

Design Assets

Once you've picked the game it's time to get started with the creative part - the branding.

This is where you can add your custom design to your Game. Each Game has between 5-20 different brandable elements including the background, players, obstacles and enemies. Use your favorite design tool to help create the different elements for the game. Then simply 'drag and drop' your assets into Studio and the game is instantly updated.

Make sure to use the correct image sizes and file formats. Different Games may have different requirements for the image size needed for the game to function correctly.

The required image sizes and formats are always stated under the image name so just follow the guidelines and either upload or drag and drop an image and the changes will be reflected immediately in the preview window. 

In many of our games, you can also use sprite sheets to create your animations.

There is also the possibility to brand the screens and buttons before and after your game so don't forget to add some creativity to those as well.

Also, make sure you consider contrasts so that objects and pickups are visible against the background.

Parallax Effects

Some of the games have the possibility to use a parallax effect. A parallax consists of a layer of images that moves at different speeds in the Game. This is a great way to create some depth in your Game and to make it more exciting. 

The image loops, so make sure both ends of your image match so that it’s seamless. It’s also good to consider the different layers and how they work and interact with each other. If you want something to always be visible, like a logo or a product, make sure it’s not covered by the front layer.

Our best tip is to test it properly by playing the Game a few times once the images have been uploaded to make sure it looks good, loops well and has the effect you were going for.

Web Page Background Image

The Web page background image is an image placed behind your Game in a web browser window.

In this image, you can brand your game even further. Some brands use this to place a logo next to the Game or to extend the world of the Game to the whole screen. If you think your Game might be played on a web browser, make sure to upload an image for the Web page Background.

Spritesheets

A spritesheet is multiple images combined into a single image. By using spritesheets in supported Games, we can  alternate the objects appearing in the Game whilst playing or create animations. Spritesheets are an excellent way to bring life to your game.

To create a sprite sheet, simply place your design assets in a row next to each other without space in between. Just make sure that the Game supports using sprite sheets. We will always mention this in the description text under the Image Title.

When creating a sprite sheet for animation make sure that the animation overlaps so that the animation is smooth.