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.
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.
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
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.
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
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);
Screenshot and video capture
Add a watermark logo
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;
}
Change permissions panel
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!';
}
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; }
#ox-marker-detection-controls + ox-button.web-ar { display: none; }
Share button for social networks
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;
}