Online code editor

The online code editor allows customizing Web AR player user interface by overriding styles, or adding new elements such as logos, banners or buttons that might even trigger behavioural changes within the AR scene by using the Embed SDK.

Accessing the code editor

You can access the code editor from "Settings" menu, located at the top bar of the editor.

code-editor-access

Please note that this feature is only available on certain plans. Check our pricing for more information.


Customizing UI

Once you access the code editor, you'll find it uses a 3-column layout. Each column is intended for a different purpose.

code-editor-layout

  • HTML: This will allow you adding new elements to the page.
  • CSS: This will allow you creating styles for your new added elements or overriding existing ones.
  • JS: This will allow you to listen to events or add interaction to your new created elements, or use the Embed SDK to manipulate the AR scene.

The code editor also allows you to minimize and maximize each column to facilitate the development.

In the following list you'll find all relevant element selectors:

Scene and loading controls

Selector Description
#overlay Background container for all overlays (loading, scene selection and error screens)
#webar-powered-img Onirix logo that is shown in loading screen
#webar-topbar Topbar container
#webar-bubble-message Text that is shown in the topbar under some circumstances
#webar-fullscreen-button Button that is shown in the topbar to activate full-screen mode
#webar-context-button Button that is show in the topbar to show the context menu
#webar-context-menu Context menu container
#webar-add-button Button to confirm surface selection (surface scenes only)
#webar-close-button Button to exit from surface selection mode (surface scenes only)
#webar-markers-button Button to open marker list (image scenes only)
#webar-markers-bubble Bubble to encourage users clicking on markers button (image scenes only)

You can check the E-commerce user experience product carousel for a project that uses these selectors to hide unneeded controls.

Permissions

When an iOS user launches Onirix WebAR for the first time, it will show a page warning them about the permissions that they need to accept to use the application.

Selector Description
#motion-permission-panel Panel that warns the user about permissions

If the AR scene has been embedded inside an iframe, the CSS must be added from that page instead of the code editor.

Permissions example

Error page

When the user rejects the petition to access the camera of their device or any other error occurs, Onirix shows an error page that can also be personalised from the code editor.

Selector Description
#overlay Background of the page
#error-center Centred container with the error description
#error-title Title with a brief description of the error
#error-message White block containing the steps to fix the error

Progress bar

Selector Description
#ox-progress-bar-container Progress bar container
#ox-progress-bar Progress bar
#ox-progress-loading-text Progress bar loading text (left side)
#ox-progress-percentage-text Progress bar percentage text (right side)

Progress bar example

Marker preview component

When an image tracking experience is launched, various UI elements are loaded to help the user find the markers that will start the scenes.

Selector Description
#ox-markers-list List of all the markers defined in the project
#ox-marker-detection-guides Camera frame guide
#ox-marker-detection-controls View markers purple box
#ox-marker-detection-view-images Button that shows the image list
#ox-marker-detection__container UI container when there is only one marker image
#ox-marker-detection-bubble Title shown when there is only one marker
#ox-marker-detection-img Marker guide when there is only one marker image

Markers preview example

Geolocated experiences

Welcome page

Selector Description
#webar-geolocated-welcome Geolocated experience welcome screen container
#webar-geolocated-welcome-logo Geolocated experience welcome screen logo
#webar-geolocated-welcome-card Geolocated experience welcome screen card
.ox-g-round-button Rounded buttons used on the welcome page, map screen and location list

before-after geolocated welcome

Map screen

Selector Description
#webar-geolocated-container Geolocated experience map container
#webar-geolocated-back-button Geolocated experience back button (from map)
#webar-geolocated-menu-button Geolocated experience menu button (from map)
#webar-geolocated-satellite-button Button for changing the style of the map
#webar-geolocated-route-panel Panel shown when routing to a location
.ox-current-position Button for centering the view at the current location
.ox-map-location Geolocated experience map POI image
.ox-map-location-(scene's oid) Same as .ox-map-location but identified by its scene's oid
.ox-location-radius Activation circle placed around every POI

before-after geolocated map

Location list and panel

Selector Description
#webar-geolocated-locations-panel Geolocated experience location panel (after pressing menu button from map)
.ox-location-panel Geolocated experience location sliding panel (after pressing a POI from map)
.ox-location-header Header of the .ox-location-panel
.ox-navigate-button "View on map" button
.ox-route-button "Route" button

before-after geolocated location list

For an example of a modified geolocated experience, you can check out the Geolocated Treasure Hunt tutorial.

If you want to override any of the following element styles, make sure you use the CSS !important property

In order to look for any other element selectors not listed above, feel free to inspect the source code with your browser's developer tools. Use device-emulator mode or connect a real device to avoid any error when loading the experience.


Code snippets

In this section you'll find some code snippets for common UI modifications.

Customize loading overlay with your own logo

CSS

#webar-powered-img {
    display: none;
}
#overlay {
    background-color: #093997 !important;
}

#my-custom-logo {
    position: absolute;
    width: 100px;
    bottom: 150px;
    left: calc(50% - 50px);
}

JavaScript

const overlay = document.querySelector("#overlay");
const logo = document.createElement("img");
logo.setAttribute("id", "my-custom-logo");
logo.setAttribute("src", "https://www.onirix.com/docs/sample-logo.svg");
overlay.appendChild(logo);

Result before-after-loading


Add a screenshot capture button

HTML

<img id="screenshot-button" src="https://www.onirix.com/docs/screenshot-button.svg">
<div id="screenshot-flash"></div>

CSS

#screenshot-button {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: auto;
}

#screenshot-flash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFF;
    opacity: 0;
    pointer-events: none;
}

#screenshot-flash.active {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

JavaScript

(()=>{
    let screenshotButton = document.querySelector('#screenshot-button');
    let screenshotFlash = document.querySelector('#screenshot-flash');
    screenshotButton.addEventListener('click', () => {
        let downloadLink = document.createElement('a');
        downloadLink.setAttribute('download', 'screenshot.png');
        let video = document.querySelector('#video');
        let threeCanvas = document.querySelector('#ox-editor-renderer');
        let screenshotCanvas = document.createElement('canvas');
        screenshotCanvas.width = threeCanvas.width;
        screenshotCanvas.height = threeCanvas.height;
        let screenshotCanvasCtx = screenshotCanvas.getContext('2d');
        screenshotCanvasCtx.drawImage(video, 0, 0, threeCanvas.width, threeCanvas.height);
        screenshotCanvasCtx.drawImage(threeCanvas, 0, 0);
        screenshotCanvas.toBlob(blob => {
            let url = URL.createObjectURL(blob);
            downloadLink.setAttribute('href', url);
            downloadLink.click();
      });
      screenshotFlash.classList.add('active');
      setTimeout(() => {
          screenshotFlash.classList.remove('active');
      }, 300);
    });
})();

Result before-after-screenshot


HTML

<img id="watermark-logo" src="https://www.onirix.com/docs/sample-logo.svg">

CSS

#watermark-logo {
    position: fixed;
    bottom: 50px;
    left: 50px;
    opacity: 0.5;
    width: 100px;
    height: auto;
}

Result before-after-logo

Change permissions panel

CSS

#overlay {
    background-color: #093997;
}

#motion-permission-panel button {
    background-color: #1144AA;
}

Permissions example

Change color and text of marker preview

CSS

#ox-marker-detection-bubble {
   background-color: #093997;
}

#ox-marker-detection-bubble span {
   display: none;
}

#ox-marker-detection-bubble::after {
   content: 'Scan this image!';
}

Result Markers preview example

Do not show image marker list

CSS

#ox-markers-list { display: none }
#ox-marker-detection-guides { display: none; }
#ox-marker-detection-controls { display: none; }
#ox-marker-detection-view-images { display: none; }
#ox-marker-detection__container { display: none; }

Share button for social networks

JavaScript

const shareData = {
  title: 'Onirix',
  text: 'Try our new hunt experience: pair colors',
  url: 'https://studio.onirix.com/exp/lnwbxL'
}

document.getElementById("share-button").addEventListener("click", () => {
    navigator.share(shareData)
});

Results