Loading o3h.js

You have some options regarding how you import o3h.js.
You must always request it via absolute path. Do not include the domain.
We recommend that you "export" it by copying the module object to global scope, e.g. window.o3h = o3h

You can use a dynamic import to load the Javascript file asynchronously.

<script>
  import(/* webpackIgnore: true */ '/api/o3h.js').then((o3h) => {
      window.o3h = o3h;
      // Load the module here
      o3h.Instance.ready(start);
  });
  function start() { /* your code */ }
</script>

You can also await the import promise, like so:

<script>
  (async () => {
      const o3h = await import(/* webpackIgnore: true */ '/api/o3h.js');
      window.o3h = o3h;
      // Load the module here
      o3h.Instance.ready(start);
  })();
  function start() { /* your code */ }
</script>

Or, you could use the standard static import from your own compiled Javascript, or a script tag with the type="module" attribute:

<script type="module">
  /* webpackIgnore: true */
  import * as o3h from '/api/o3h.js';

  function start() { /* your code */ }

  window.o3h = o3h;
  // Load the module here
  o3h.Instance.ready(start);
</script>

Setting webpackIgnore will let you use Webpack when this file isn't found in /api/. Do not include this file in your project. Always load it remotely.

Initialization sequence

Once o3h.js is loaded, the API will be available to you.
You can then begin creating layouts and components, requesting data, etc., as well as loading any assets required to intially run the module.

Only call o3h.Instance.ready() once everything required has been loaded and your module has started rendering.

Don't show any preloaders of your own, one will be provided by the platform. Or, if you already have a preloader, make sure it occurs before you call ready() and it will not be visible in the app.

Once you call ready() the splash screen will be removed, and finally, the callback you provide to ready() will be executed.

Only when that callback is called will your module finally be visible.

For example, if you are using screen recording, the call to getFullScreenRecorder() should be before the call to ready() so that the permission prompt shows up during the loading screen.

Check Troubleshooting if you run into any problems!