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
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;
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.
We are sorry that this article was not useful for you!
Let us improve this article!
Tell us how we can improve this article?