Horizon API documentation

The Horizon API allows you to interact with and receive events from an embedded horizon experience.

<script src="https://cdn.horizon.ipaper.io/embed/horizon.js" type="module" defer></script>
Copy

The [YOUR_ACCOUNT] and [YOUR_ALIAS] is the unique identifier for your horizon experience, these can be found in admin site.

<ip-horizon id="horizonTest1" experience="[YOUR_ACCOUNT]/[YOUR_ALIAS]"></ip-horizon>
Copy

The WebComponent will request the experience through our API and emit a ready event when it's done loading, a ready attribute will also be added to the element.

The best way to ensure eveything is ready, is to check both the ready attribute, and then await the ready event if needed.

function whenHorizonReady(horizonEl) {
  // Resolve immediately if the element is already ready
  if (horizonEl.getAttribute('ready') === 'true') return Promise.resolve(true);
  // Otherwise, wait for the ready event
  return new Promise((resolve) => {
    horizonEl.addEventListener('ready', () => resolve(true), { once: true });
  });
}

const horizonElement = document.getElementById('horizonTest1');
whenHorizonReady(horizonElement).then(() => {
  // Your code
});

Copy

You can also use a window bound function as callback for the ready event.

<ip-horizon experience="[YOUR_ACCOUNT]/[YOUR_ALIAS]" on-ready="myCoolInitFunc"></ip-horizon>

<script>
  window.myCoolInitFunc = (horizonEl, api) => {
    // Your code
  }
</script>
Copy

Accessing and checking API type

At the moment, the only API available is the Leaflet API, but we expect to add more in the future. The type of API you get is determined by the type of experience attached to the alias, and can therefore be different and changes in our UI, so we have to do a bit of checking.

whenHorizonReady(horizonElement).then(() => {

  // getApi() returns a promise that resolves to the API object
  const api = await horizonElement.getApi();

  // Check the type of API
  switch (api.type) {
    case 'leaflet':
      console.log('We have an instance of ILeafletApi!');
      // Your code
      break;
    default:
      console.error('Unknown API type');
  }
});
Copy