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.

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:

Add custom domain

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).


Step 2: Get your project's embed HTML code

You can copy the embed code by clicking on the “HTML code” text area (embed tab) of the “Share” menu inside the editor.

Embed code


Step 3: Insert the code in your website

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 separate scene from a 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 include this scene OID parameter as part of the url of the iframe, to get direct access to that scene:

https://studio.onirix.com/projects/project_id/webar?token=access_token&scene=scene_oid

To get the scene Id just select the whole scene and copy the id from the properties panel: scene_id


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 in the commercial plan. You can access it from your project's settings menu inside the editor.

Results