Adding the Weavy widget to a website

The Weavy widget is a drop-in UI that you add to your existing app or website with a small javascript snippet. To obtain the widget snippet you should point your browser to /widget in your Weavy installation to get to the widget configurator.

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 somewhere before the </body> tag on the page(s) where you want the Weavy widget to appear.

widget.js

The widget.js url can be modified to get different versions of the bundle. You should always provide a cache busting version parameter to avoid browser caching of your previous version when you update. 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
  • widget.js?v=[semver] - Cache busting parameter. Normally the current version, but may be anything you like.

Example using the Widget Loader

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 [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(widget_options) instance.

<script id="weavy-loader">
  var weavy_options = {
    url: "[weavyinstallation]"
  };

  (function (w, d) {            
    var weavyWidget;				
    function l() {
      var s = d.createElement("script"); 
      s.src = "[weavyinstallation]/javascript/widget.js?v=2.0.1-master"; 
      s.onload = function(){
        weavyWidget = new WeavyWidget(widget_options);				
      };
      var x = d.getElementsByTagName("script")[0]; 
      x.parentNode.insertBefore(s, x); 
    }
    w.addEventListener("load", l, false); 
  })(window, document)
</script>

Example Weavy instance without the Widget Loader

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(weavy_options) 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="[weavyinstallation]/javascript/widget.slim.min.js"></script>
<script>
  $(function() {
    var weavy_options = {
      url: "[weavyinstallation]"
    };
    var weavyWidget = new WeavyWidget(weavy_options);
  })
</script>