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.

3.1%20Code%20Editor_cabecera

If you want to see a complete example, download one of the experiences from our library that already have the code included. For example this quick-start you can see about a boiler.

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.

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

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. 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 before-after-loading


Screenshot and video capture

See the complete module in our documentation

Screenshot-video-capture


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 before-after-logo

Change permissions panel

Example in GitHub

Customize sensors

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 Markers preview example

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

Toast audio

Customize back to map button

Example in GitHub

Customize back to map button

Customize back to experience

Example in GitHub

Customize back to experience

Show HTML on load

Example in GitHub

Show HTML on load

Preview and share snapshot

Example in GitHub

Show HTML on load

Results