Apps Frontend Integration

PARTNERS INTEGRATIONS
by CogniFit

This article will walk you through the steps to upload CogniFit activities into your app. Before following these steps, create a partner account in CogniFit to obtain your client keys.

To load an assessment, a training session or a specific game you need the following data:

  1. the client key: an alphanumeric value linked to your CogniFit account, it’ll be provided to you to access the CogniFit API.
  2. the access token: an alphanumeric value that identifies the user’s CogniFit account. Ideally it is requested in a server-to-server interaction through the user-authentication endpoint.
  3. the activity mode: a string that defines what the user will do. It has one of these three values:
    • ‘assessmentMode’: loads an assessment;
    • ‘trainingMode’: loads a training session;
    • ‘gameMode’: loads a single game;Create an account in CogniFit to familiarize yourself with the differences between each mode of operation.
  4. the activity key: an alphanumeric value that sets the specific activity (which assessment, training session or game) to be performed. You can use the API to request all the values that can be used:
    • for assessments;
    • for training sessions;
    • for games;
  5. the version of the SDK to load: get this value from the following endpoints
  6. the type of device: a string with either ‘web’ or ‘app’. If set to ‘web’ our code will assume a computer where the main modes of interaction are a keyboard and mouse. If set to ‘app’ our code will assume a mobile device where the main mode of interaction is a touchscreen.

The HTML/JS code that is loaded in your site or App’s webview must load the following script: https://${prejs/js}.cognifit.com/${VERSION}/html5Loader.js where:

  1. the prefix ‘prejs’ is used for the testing/stage environment, and ‘js’ for the production environment.
  2. ${VERSION} is the version of the SDK;

The simplest HTML would be:

<html>
  <body>
    <div id="cogniFitContent">
      <!-- our code will add an iframe here -->
    </div>
  </body>
</html>

That script defines the variable HTML5JS with a single method: loadMode. The function requires the following arguments:

  1. the ${VERSION} string used in the script’s URL;
  2. the activity mode;
  3. the activity key;
  4. the id of the element where our content will be loaded;
  5. an object with the rest of the information required:
{
    "clientId":"123456abcdef",
    "accessToken":”t0k3n_t0k3n",
    "appType":"app"
}

To load, for example, the Mahjong game, the following call needs to be made:


HTML5JS.loadMode("A_VERSION", "gameMode","MAHJONG","cogniFitContent",
    {
        "clientId":"123456abcdef",
        "accessToken":”t0k3n_t0k3n",
        "appType":"app"
    }
);

Data flow from CogniFit to your site/app

Once the iframe loads the activity can be started by the user. Once the activity is completed or aborted our code will do the following:

window.parent.postMessage(
  {
    status: 'completed' OR 'aborted',
    mode: ${ACTIVITY_MODE},
    key: ${ACTIVITY_KEY},
  },
  '*'
);

Code on your end should handle this message and destroy the iframe as it cannot be reused.