One of the most powerful things about delivering AR & VR experiences through web browsers is that you can use HTML, CSS and Javascript to customize and extend the experiences. Here is an overview of the range of places you can add your own custom HTML, CSS and Javascript content within your awe app. This should give you all the control you need to add any type of custom HTML, CSS and Javascript content you want.

If you have purchased the white-label bundle then you will have additional options available under your App Settings. If you are interested in purchasing a white-label bundle or any other custom features you can read more about the value added features that are available in our support section.

Once you have your white-label bundle enabled, open the App Branding section of your app (e.g. /settings/custom_branding) and you'll see all of the options you can customize. For example if you click on the pencil icon in the Full custom loading screen enabled panel you'll see Javascript, CSS and HTML panels. These contain the working code that makes your current custom loader work and should be very self explanatory. You can add any custom content you want here to create your own design and content that replaces the default awe loading screen. The content of these panels are loaded inline along with the initial page load so you have control from the very beginning of any loading experience.

If you find that you've accidentally added some custom code to your app that prevents you accessing it in some way you can choose to load your app with all custom code disabled. Add a simple query string to the end of your request and this will load without including any of your custom code so you can fix up and continue editing your app.

?no_custom=1

You can also add additional Javascript and CSS under the Custom Code section (e.g. /settings/custom_code). This is a great place to put global functions and styles that you want to use across multiple views.

You can then use your custom Javascript code to inject additional DOM elements (e.g. if you want to add a persistent menu button or overlay, etc.).

var el = document.createElement('div'); // create a new element
el.id = 'my_div'; // link it to a CSS style
el.innerHTML = 'hello world'; // you can xhr or fetch external content here
el.onclick = function() { alert('say hello'); }; // add some interactivity

// add your element into the DOM using appendChild on the project_html div 
// to ensure you don't break your awe app structure or functionality
document.getElementById('project_html').appendChild(el); 

Then you can add some CSS styles to make your HTML content display as you like.

#my_div {
  background: #FFFFFF;
  position: fixed;
  width: 25%;
  height: 25%;
  top: 10px;
  left: 10px;
  pointer-events: all; /* NOTE: You need to add this if you want user gestures like taps/clicks to be recognized */
}

Please see the note about pointer-events.

You can also create HTML page views that you can link to like any of the other view types (e.g. standard, image, location and page). When you're in the view editor click on the view list menu in the top bar and select Create a new view and then Page.

Under the View Settings you can create HTML overlay content under the Display Hint section. Theses view hint HTML pages are presented over the top of any 3D scene within your view and when you turn them on they will be shown when the view is first loaded. You can also choose to show these only once per app load.

Under the App Settings you can create HTML overlay content under the App Hint section (e.g. /settings/app_hint). These are similar to the view hints, however when you turn this on it will be shown whenever the app is first loaded no matter which view the user is loading. If a view hint is also enabled for the view being loaded then the app hint will be shown first.

For each object within your 3D scene you can also add an Action that shows an HTML information panel (Open infopanel over scene). These can be shown when an object loads or the user interacts with your scene, etc.

See our guide to referring to assets uploaded to your awe app