Embed in your website
This section covers installation and configuration steps in order to display Onirix WebAR experiences in custom domains.
You can watch our tutorial video, or follow our step-by-step documentation below.
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:
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).
You can copy the embed code by clicking on the “HTML code” text area (embed tab) of the “Share” menu inside the editor.
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.
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.
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 in the commercial plan. You can access it from your project's settings menu inside the editor.