This is a reference project that demonstrate how to build web UI widget that can be embedded into 3rd party website. See walkthrough for details here.

This structure provides those advantages:

• Small footprint and solid snippet on hosting website (see usage)
• Multi-instance on the same page
• Isolation of code execution and CSS
• Customization via configuration injection and API to Widget
• Minimal dependencies and small size via single request (>30KB gzipped)

and a few more.

In order to embed the widget add the following snippet at any location on the hosting page:

<script>
    (function (w, d, s, o, f, js, fjs) {
        w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
        js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
        js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', '_hw', './widget.js'));
    _hw('init');
</script>

During initialization you can pass additional configurations to widget like so:

-_hw('init');
+_hw('init', { minimized: true });

You can find a full list of configurations in AppConfigurations interface.

The widget dev setup is similar to regular client application. To get started:

npm i
npm start

This will open browser with "demo" page which hosts the widget.

The source and documentation in this project are released under the MIT License