Immersive OD widget

The Immersive OD widget allows you to include an interactive immersive application on a web page.

How to install the widget?

Single installation

To add the widget you must include the following code in the page. You can copy the embedded code from the Dashboard in the Media > Virtual Tours section.

<div data-application-id="<application-id>"></div>

<script>
  (function (o, n, l, i, v, e) {
    v = o.createElement(n);
    v.onload = i;
    v.async = 1;
    v.src = l;
    e = o.getElementsByTagName(n)[0];
    e.parentNode.insertBefore(v, e);
  })(document, 'script', '<loader-script-src>', function () {
    window.onliveManager.loader.load('<organization-id>');
  });
</script>

Multiple installation

Several applications can be added on the same page.

<div data-application-id="<application-id-1>"></div>
<div data-application-id="<application-id-2>"></div>

<script>
  (function (o, n, l, i, v, e) {
    v = o.createElement(n);
    v.onload = i;
    v.async = 1;
    v.src = l;
    e = o.getElementsByTagName(n)[0];
    e.parentNode.insertBefore(v, e);
  })(document, 'script', '<loader-script-src>', function () {
    window.onliveManager.loader.load('<organization-id>');
  });
</script>

Advanced installation

It is also possible to control when the application is opened or closed by events, without the need to include the default interface. To hide the default interface in the installation options, set interface.showSummary to false.

{
    ...
    "interface": {
        "showSummary": false
    },
    ...
}

To configure in the page, it would be as follows, the open-application and close-application events are sent to the custom element olim-widget.

<div data-application-id="<application-id>"></div>

<button onclick="openApplication">Start tour</button>

<script>
  function openApplication() {
    document.querySelector('[data-application-id] olim-widget')
      .dispatchEvent(new CustomEvent('open-application'));
  }

  (function (o, n, l, i, v, e) {
    v = o.createElement(n);
    v.onload = i;
    v.async = 1;
    v.src = l;
    e = o.getElementsByTagName(n)[0];
    e.parentNode.insertBefore(v, e);
  })(document, 'script', '<loader-script-src>', function () {
    window.onliveManager.loader.load('<organization-id>');
  });
</script>

For multiple applications

<div data-application-id="<application-id-1>"></div>
<div data-application-id="<application-id-2>"></div>

<button onclick="openApplication('<application-id-1>')">Start tour 1</button>
<button onclick="openApplication('<application-id-1>')">Start tour 2</button>

<script>
  function openApplication(applicationId) {
    document
      .querySelector(`[data-application-id="${applicationId}"] olim-widget`)
      .dispatchEvent(new CustomEvent('open-application'));
  }

  (function (o, n, l, i, v, e) {
    v = o.createElement(n);
    v.onload = i;
    v.async = 1;
    v.src = l;
    e = o.getElementsByTagName(n)[0];
    e.parentNode.insertBefore(v, e);
  })(document, 'script', '<loader-script-src>', function () {
    window.onliveManager.loader.load('<organization-id>');
  });
</script>