@apptrium/web-host NPM

web-host

This library is a gateway for Invent widgets ecosystem into 3rd party web applications or websites. Being an entrypoint, it holds a number of dependencies bundled together, so they could be used in an eager manner by all the widgets and micro-apps that will be embedded.

minimal footprint in 3rd party code
no disruptions/performance problems for 3rd party apps
supporting both node-based build systems, and cases without build systems

How to use

Let's add the initial script on the page - it could be html root of your application in case of SPA, or the same webpage where you want to display the embedded widgets if you use a more classic web approach. To do that, add this script in the <head> section of the html file:

<script type="module" src="https://unpkg.com/@apptrium/web-host@{version/latest}/dist/invent-manager.umd.js"></script>

This is sync-loaded script with a size of ~2kb which generates a wrapper for sync calls to render widgets for convenience. It also provides a method to register your application within Invent ecosystem, using an open token and referrer URL - validating that you are eligible to receive embedded widgets code.

  window.InventManager.initHostApplication({
    token: 'your token',
    widgets: [], // array of numeric widgets IDs which you intend to embed on this page
    themes: [] // array of theme names to use
  })

This will initiate an asynchronous load of web host application file - from the same unpkg base url that you used on step 1. On load success, it will make a call to Invent API service to validate you credentials (open token + referrer url are used). If authenticated, the response will deliver all the requested widgets metadata and themes for web-host to use.

Please consider making this initHostApplication call in the JS root of your application, so the bundle load starts earlier.

Even if the web-host main bundle from step 2 is not loaded yet, widget render calls will be added to the queue, which will be executed later. So, you can safely add those render calls anywhere into your application (just make sure that step 1 was executed correctly and the script is available on the page).

An example of widget render call:

const widgetNode = document.getElementById('widgetRoot');
window.InventManager.createWidget({
  widgetId: insertWidgetNumericID,
  node: widgetNode,
  settings: {...} // any settings available for the widget
});

Make sure that selected node exists at the time of createWidget call.

As it was mentioned earlier, this is a synchronous API, so you don't need to worry about anything from step 2.

settings object is static for now, so once an embedded widget was rendered with this object, it will not reflect any further changes