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.

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

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)
#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)
Geolocated Experiences
#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
#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-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-map-location Geolocated experience map POI image

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: #1144AA !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

Results