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 the options menu in the top right area of the scene editor, just above the Properties panel:

This way you can start including HTML, CSS and JS code from scratch, or start from one of our full code examples in our experience library.

---

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.

• 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
#ox-permissions-dialog	Panel that warns the user about permissions
#ox-permissions-dialog .btn	Permission dialog accept button

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

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
#error	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

Example in GitHub

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)

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

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

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

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

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

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. Every example shown here is publicly available in our Online Code Editor Samples repository on GitHub.

Customize loading overlay with your own logo

Example in GitHub

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

---

Screenshot and video capture

See the snippet in GitHub

---

Add a watermark logo

Example in GitHub

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

Change permissions panel

Example in GitHub

Change color and text of marker preview

Example in GitHub

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

Do not show image marker list

Example in GitHub

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; }
#ox-marker-detection-controls + ox-button.web-ar { display: none; }

Share button for social networks

Example in GitHub

HTML

<button id="share-button">Click to share</button>

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)
});

CSS

#share-button {
  position: absolute;
  top: 50px;
  left: 145px;
  background: #df2a54;
  border-radius: 20px;
  padding: 10px;
  color: black;
  width: max-content;
}

Indicate that a scene has audio

Example in GitHub

Customize back to map button

Example in GitHub

Customize back to experience

Example in GitHub

Show HTML on load

Example in GitHub

Preview and share snapshot

Example in GitHub