The Embed SDK can be loaded via UMD or AMD and is fully compatible with ES5 and ES6, depending on your needs.
Using the UMD module via the browser
If loading the SDK directly into a web page using a script tag, the root ZFE object constructor will be made available as a UMD module at the global ZFE.ZFE.
<script src="https://zfe.company.com/webclient/connector/zfe-embed-sdk.js"></script>
<script>
var zfe = new ZFE.ZFE(opts);
</script>
Using AMD or ES6 module with a JS build tool
If using the SDK in a modular JavaScript app, you'll need to first download it and make it available to your build environment, then can require/import it as with your other libraries.
// if using AMD/CommonJS style modules
const ZFE = require('libs/zfe-embed-sdk').ZFE;
// if using ES6 modules
import ZFE from 'libs/zfe-embed-sdk';
var zfe = new ZFE(opts);
Configuring the SDK instance
The ZFE object constructor takes a JavaScript object argument that can configure various properties. See docs for the complete list.
The property url is always required, and needs to reference the url and path that you would normally use to view the webclient in the browser. The target property must also be provided unless you're using the 03_headless option. The target value must be an existing DOM element that the webclient will be rendered to (which you're free to hide using CSS).
After construction, the ZFE#connect must be called to create and initialize the connection to the session server. If a target property containing a DOM element was provided in the constructor opts, the webclient will be rendered to it at this time. When the SDK is connected and ready to use, the Promise returned by connect() will have resolved successfully.
var zfe = new ZFE({
url: 'https://zfe.company.com/webclient/',
target: document.getElementById('my-host-app')
});
zfe.connect()
.then(function () {
console.log('The SDK is connected and ready to use');
})
.catch(function (error) {
console.error('There was an error connecting to the session server', error);
});