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

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
  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

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.

<iframe src="THE_SPACE_URL" allow="xr-spatial-tracking;display-capture;magnetometer;picture-in-picture; wake-lock;screen-wake-lock;vr;geolocation;microphone;camera;midi;encrypted-media;autoplay;fullscreen;gyroscope;accelerometer;" id="learnbriteSpaceFrame" width="300" height="150" frameborder="0" scrolling="no" style="overflow:hidden;border:0;position:absolute;padding:0;margin:0;width:100%;height:100%;z-index:100;"></iframe>

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:
message =

// 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


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


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.

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!

Tell us how we can improve this article?