Quick Start Guide
This page covers on how to embed your first experience to your page.
Please note that the Quick Start Guide covers the embedding process using the SDK, which is only available for the plan PRO and above. If you wish to use the iframe to embed the experience, please take a look at other ways to embed an experience.
Getting Started
1. Create the parent container
Create the parent container where you want the experience to be placed. It will dynamically create all the HTML tags that are necessary to run the experience under this container.
<div id='experience-root'></div>2. Creating the initialisation function
To initialise the experience, create a function called emperiaAsyncInit and attach it to the window object. This function will get called once the SDK is ready.
<script>
window.emperiaAsyncInit = function () {
emperia.init({
id: "experience-root", //The id of the tag where the experience should be mounted
experience_url: "https://experience.emperiavr.com/example/experience/experience.html",
ui_url: "https://ui.emperiavr.com/Standard-UI/Development/1.1.0/static/", //The static folder where the user interface should come from
attach_ui: true //Should the SDK attach the user interface?
});
};
</script>You can find all the supported parameters of the SDK under the embedding documentation page.
3. Adding the SDK
Finally, you need to add the SDK via the <script> tags:
<script type="module" async src="https://sdk.emperiavr.com/Production/latest/emperia-sdk.min.js"></script>End result
The end result should look something like this:
<!DOCTYPE html>
<html>
<head>
<script>
window.emperiaAsyncInit = function () {
emperia.init({
id: "experience-root",
experience_url: "https://experience.emperiavr.com/example/experience/experience.html",
ui_url: "https://ui.emperiavr.com/Standard-UI/Production/1.1.0/static/",
attach_ui: true
});
};
</script>
<script
type="module"
async
src="https://sdk.emperiavr.com/Production/latest/emperia-sdk.min.js"
></script>
</head>
<body>
<div id="experience-root" style="width:800px; height: 800px"></div>
</body>
</html>You should now be able to see the experience embedded inside your page, like so:
The AR model allows you to visualize 3D models within the experience.
To create a new AR model, follow these steps:
- Right-click in the Content Browser.
- Go to Miscellaneous → Data Asset.
- Search for "ARModel" and select the corresponding type.
- Click "Create" to generate the asset.
- The AR Data Asset contains all necessary configurations for the AR Viewer.
Key | Description |
MeshURL | The URL or references for the 3D Mesh to display in the AR model. |
iFrame Model
The iFrame model allows you to embed websites or iframes within the experience.
To create a new iFrame model, follow these steps:
- Right-click in the Content Browser.
- Navigate to Miscellaneous → Data Asset.
- Search for "iFrame" and select the appropriate type.
- Click "Create" to generate the asset.
- The iFrame Data Asset contains all necessary configurations for the iFrame Viewer.
Key | Description |
URL | The URL or references for the web page to display in the iFrame model. |
Media Model
The Media model allows you to embed videos and images within the experience.
To create a new Media model, follow these steps:
- Right-click in the Content Browser.
- Navigate to Miscellaneous → Data Asset.
- Search for "Media" and select the appropriate type.
- Click "Create" to generate the asset.
- The Media Data Asset contains all necessary configurations for the Media Viewer.
Key | Description |
URLs | The URL or references for the Videos, Images to display in the Media model. |
Automated Action Model Creation Process
To streamline the process of creating action models, assets, and attaching them to interactables, we now support direct editing within the Details Panel of interactables placed in the scene.
Using the Action Type dropdown, you can specify the type of interactable action. Once selected, the relevant properties will appear below the dropdown for configuration. This automatically creates and attaches the corresponding action models and action type assets to the interactable, significantly reducing the number of steps required.
If you forget to save your action models or action type assets, you can simply clear the action models array on the interactable and make a slight modification to any Action Type property. This will automatically regenerate the entire asset.
Help & Support
If you have questions, suggestions, or feature requests, please join the Official Emperia Discord channel!
You can find support here through private support tickets or general conversation. You will also have the opportunity to showcase your work and chat with like-minded individuals across industries using Creator Tools, Unreal Engine, those creating immersive experiences, and more!
If you prefer, you can also reach out to us via email.