@apptrium/web-host
v1.13.0
Published
Web host application
Downloads
84
Keywords
Readme
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.
- Register the application using the following method:
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
Themes usage
Themes can be manage through registerTheme
and setTheme
instance methods. registerTheme
is used for adding theme to the registry in the runtime, setTheme
- defines current theme in use by it's name. Note, that registerTheme
does not automatically chooses the theme you passed as in use
An example of usage:
window.InventManager.registerTheme({
name: "myTheme",
...
});
window.InventManager.setTheme("myTheme");