Integrating Scenario in other applications (without SCORM or LTI)

Integrating Scenario in other applications (without SCORM or LTI)

1. Getting the space’s URL        2

2. Including Scenario as an iframe        2

3. Providing scenario with a user identity        2

4. Receiving the user’s score from Scenario        3


1. Getting the space’s URL

The first step in integrating Scenario into another website is to create the space to be included and grab its spaceId.

  1. Login to https://app.learnbrite.com/dashboard
  2. Create a space. After creating the space, a complete list of them will appear
  3. Click on the one to integrate, and a new tab will open with the interactive space
  4. Copy the URL of this new tab. It should look similar to

https://app.learnbrite.com/scenario_2.7/index.php?spaceId=spc856be528f754b758ea3d59288

2. Including Scenario as an iframe

Due to browser security restrictions, a space that is included in an iframe will not be allowed to use the microphone, camera, and some additional browser features. It is possible to explicitly allow LearnBrite Scenario to access those features by including some additional attributes in the iframe’s code.

<iframe src="THE_SPACE_URL" allow="vr; geolocation; microphone; camera; midi; encrypted-media; autoplay; fullscreen; gyroscope; accelerometer;" width="300" height="150" id="scenarioFrame" frameborder="0" scrolling="no" />

By swapping THE_SPACE_URL for the URL obtained in step one, the iframe will include the desired space. Any change to the space will of course be reflected in the iframe, so if multiple different versions of the experience need to be created (for instance for slight changes in dialogue, or in the decorations of the scene), it is highly recommended to create a space for each version.

3. Providing scenario with a user identity

Scenario includes analytics, which are bound to a user identity. The user identity can be provided to LearnBrite Scenario by calling  postMessage  on its iframe. It is recommended to trigger this when receiving the  SCEN|events_onInitEnd  message from the iframe itself.

var url = location.hostname + location.pathname;
var userId = 'USER_ID';
var userName = 'USER_NAME';
var message = 'LMS|init|' + userId + '|' + url;
message = userName ? message +
'|' + userName : message;

// The complete message looks like this:
// "LMS|init|USER_ID|URL|USER_NAME"
message =
JSON.stringify(data);

// Send data to Scenario.  
document.getElementById('scenarioFrame').contentWindow.postMessage(message, '*');

Nothing else is required to initialize user tracking in LearnBrite Scenario – it will generate a deterministic ID for the user based on the information provided.

4. Receiving the user’s score from Scenario

It is often useful to store the score of the user in a particular scenario within an external system (for instance in an LMS). While this is often done through SCORM or LTI, both of which are compatible with Scenario, this can also be implemented on other systems.

First, the score must be submitted within Scenario by using

LB.Lms.submitScore(USER_SCORE)

Where USER_SCORE is a number representing the user’s score.

This is fundamental as it will also trigger a postMessage (sent to Scenario’s container/parent of the iframe), where the content of the message is

SCEN|ScormScore|USER_SCORE

By listening to this message from Scenario’s iframe, it is then possible to extract the user’s score and save it in the system as desired.

© 2018 LearnBrite™

Trademarks & Copyrights are property of their respective owners. Pictures are indicative only & may not reflect final production.

How useful was this article?

Click on a star to rate it!

We are sorry that this article was not useful for you!

Let us improve this article!