Adding the Widget Script

The Weavy widget is a drop-in UI that you add to your existing app or website with a small javascript snippet.

Widget script configurator

To obtain the widget snippet you should point your browser to https://[weavyinstallation]/widget to get to the widget configurator in your weavy installation.

You will be presented with a form where you can configure the script. Once you are happy with the configuration, all you have to do is copy the javascript snippet and paste it into the code on your site.

widget.js

The widget.js url can be modified to get different versions of the bundle. You may refer to the bundle directly or download it to include it in your app if necessary. All this can be set in the widget configurator.

  • widget.js - Standard bundle.
  • widget.min.js - Minified standard bundle
  • widget.slim.js - Bundle without jQuery
  • widget.slim.min.js - Slim bundle minified

Plain HTML example

To include WeavyWidget in a javascript app or your own build environment, you must load the widget script globally. The widget currently does not support module loading. jQuery must be loaded prior to widget.js if you use the slim bundle, while it’s included in the standard bundle. When you have loaded the widget globally, you can create a new WeavyWidget() anywhere at any point in your app. To avoid timing issues when loading it may be a good idea to make sure you instantiate WeavyWidget at the window DOMContentLoaded or load event.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://[weavyinstallation]/javascript/widget.slim.min.js"></script>
<script>var widget = new WeavyWidget();</script>

Widget loader example

The Widget Loader is suitable for environment where the Widget is injected or if you want to load the script from javascript directly.

The configured javascript from the Widget Configurator should look similar to the following example. The url and s.src variables should point to your installation instead of [weavyinstallation]). You can get a fully configured code snippet in the built-in Widget Configurator, just browse to https://[weavyinstallation]/widget. You can also place this snippet in anywhere in your code as it will load widget.js globally before making a new WeavyWidget() instance.

(function (window, document) {            	
    var onload = function() {
        var script = document.createElement("script"); 
        script.src = "https://[weavyinstallation]/javascript/widget.js"; 
        script.onload = function(){
        var widget = new WeavyWidget();
        };
        var firstScript = document.getElementsByTagName("script")[0]; 
        firstScript.parentNode.insertBefore(script, firstScript); 
    };
    if(document.readyState !== "complete") {
        window.addEventListener("load", onload, false); 
    } else {
        onload();
    }
})(window, document);