Embed in your website

This section covers installation and configuration steps in order to display Onirix WebAR experiences in custom domains. Both to embed your experiences in Web AR mode (full screen) and to embed them as a block inside a web, 3D web mode, you need to follow the following steps.

3.2%20Embed%20in%20your%20website%20_cabecera

Step 1: Set up your domain as a trusted request origin

In order to allow your domain to make requests to Onirix servers, it needs to be added to an internal whitelist.

You can manage your custom domains in Onirix Studio from Plan & Billing section of your Account:

custom%20domains%20config

When opening an Onirix WebAR project, the browser makes requests to Onirix Servers to download asset files and resources in order to load the experience. Because these requests come from an external and unknown source (your domain), the browser blocks them by default. This security mechanism is called Cross-Origin Resource Sharing (CORS).

Testing with a local domain

In case you want to test the access to the scene embedding on your website without including a custom domain to start with, one method you can follow is to set up a local server in order to use one of the domains accessible for testing. Onirix allows the following domains and addresses are whitelisted for development:

  • localhost
  • 127.0.0.1
  • 192.168.*
  • 10.50.*
  • 10.10.*
  • 10.0.*
  • *.ngrok.io

If you use this option it is mandatory you serve your files through HTTPs. There are plenty of tools out there that may help you with this by generating an self-signed certificate and serving your files with a single command. Take a look at http-server utility.


Step 2: Get your project's embed HTML code

You can copy the embed HTML code from the Share options within the Scene editor. This is part of the Advanced options section. For more information about the sharing options in Onirix visit the specific documentation page: Sharing options in Onirix.

Sharing%20options%203

Establish your settings: Web AR or Web 3D block

Depending on the purpose you want to give to the insertion of the iframe within the web, you may need some settings or others. As explained in this section, by default the default sharing mode is web AR, but you can easily modify the settings to insert it as an embedded block in web 3D: Access to advanced options and settings.

Custom%20%20embed


Step 3: Insert the code in your website

Web AR mode: full screen

In order to include the code in your website you can just paste it at any place inside the HTML body tag of your desired page.

If you are curious and inspect the HTML code, you'll see it consists of two different html elements, an iframe and an external script.

Using an iframe is an easy way to embed external HTML content in your website.

The iframe element includes some hard-coded styles so the experience is displayed full-screen. Feel free to modify them if required.

The external script (ox-devicemotion.min.js) is required to allow running surface-tracking experiences on iOS (Safari).

Starting with iOS 9.2, Safari blocked deviceorientation and devicemotion event access from cross-origin iframes. This means the iframe wouldn’t be able to access device motion data by itself, so it would have to be requested externally (from your site) and passed to the iframe. ox-devicemotion.min.js script sets up all of this for you.

Embedding a unique Scene from Onirix (not the whole project)

If at some point you want to insert a scene included in one of your projects, in an isolated way, for example to assign a url to each of the different scenes, you can get the Scene url in order to do this. Here we explain how to get this url within the scene editor.

Web 3D mode: example embedding in a Wordpress post

If you want to insert your scene as part of a pre-existing website, you can simply place the inserted HTML code block in the corresponding part, and modify the styles to your liking. In this example we will show how to do this inside a Wordpress post:

Web%203D%20embedding%20sample

Simply copy the code provided by Onirix, tweak the styles as you prefer and add it to your website, for example inside a Wordpress HTML code block:

Access this page to see the final result: https://www.onirix.com/example-embedded-scenes-with-iframes-web-3d/


Step 4: Modify the styles and behavior inside the iframe

Iframes are protected by the same-origin policy. This means the browser won’t allow an external site to inject CSS or JS code inside the iframe. This is a critical security mechanism to avoid malicious attacks.

However, from Onirix we have set up a way to internally inject CSS and JS code to WebAR experiences so the iframe already comes bundled with that, and thus, there are no restrictions from the browser.

This feature is called Code Editor and is available for all plans in Onirix.

Results