Logo
  • For Artists
  • For Developers
  • User Guide
Quick Start Guide

Quick Start Guide

image
‣
Getting Started
‣
Distributing the experience
‣
Building Custom UI

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.

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/2.0.0/emperia-sdk.min.js"></script>

End result

The end result should look something like this:

You should now be able to see the experience embedded inside your page, like so:

image

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.

On this page

  • Quick Start Guide
  • Getting Started
  • 1. Create the parent container
  • 2. Creating the initialisation function
  • 3. Adding the SDK
  • End result
  • Help & Support
Logo

Contact Support

Website

2024 Emperia. All rights reserved.

DiscordXYouTubeInstagramLinkedIn
  <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/Production/2.0.0/static/", //The static folder where the user interface should come from
        attach_ui: true //Should the SDK attach the user interface?
      });
    };
  </script>
<!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/2.0.0/static/",
              attach_ui: true
          });
      };
    </script>
    <script
      type="module"
      async
      src="https://sdk.emperiavr.com/Production/2.0.0/emperia-sdk.min.js"
    ></script>
  </head>
  <body>
    <div id="experience-root" style="width:800px; height: 800px"></div>
  </body>
</html>