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.

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

https://app.learnbrite.com/dashboard/spaces/visit/spcb09cd094a7c50d0197eb9b

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 the Scenario to access those features by including some additional attributes in the iframe’s code.

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 a Hyperspace scenario with a user identity

Hyperspace Scenarios includes analytics, which are bound to a user identity. The user identity can be provided to the Hyperspace 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 the Scenario – it will generate a deterministic ID for the user based on the information provided.

4. Receiving the user’s score from Hyperspace 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.

Integrating Scenario in other applications (without SCORM or LTI)

1. Getting the space’s URL

2. Including Scenario as an iframe

3. Providing a Hyperspace scenario with a user identity

4. Receiving the user’s score from Hyperspace Scenario