Instant Messaging

This tutorial will show you how to add Weavy's instant messenger functionality to your host application.

The following steps are involved:

  • Find and inject the Weavy script in your app or website.
  • Instantiate the Weavy Client and add the Messenger in a panel.
  • Toggle and style the panel.

Finding the Weavy script

Everything starts with the Weavy javascript library - it needs to be added to your application or website in order for Weavy to work. To obtain a copy of the Weavy javascript library you should point your browser to the client configurator in your weavy installation, i.e. https://{weavyurl}/client

You will be presented with a form where you can configure the client SDK. As you can see the url to the client SDK can be modified to get different configurations of the SDK.

Copy the script for Plain HTML and inject it somewhere in your host application. It should look something like this:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://{weavyurl}/javascript/weavy.min.js"></script>

Create the Weavy Client

Now you will need to create the Weavy client and add a global Space.

var weavy = new Weavy();
var space = weavy.space({ key: "global"});
It's recommended to instantiate the Weavy variable after the HTML document is loaded and parsed, e.g. after jquery.ready or DOMContentLoaded.

Add the Messenger app

Start by adding an element we can use as a container for the Messenger.

<div id="messenger-container"></div>

Add the Messenger app to the global space.

var weavy = new Weavy();
var space = weavy.space({ key: "global"});
var messenger = space.app({ key: "messenger", type: "messenger", container: "#messenger-container", open: false});

Add the css below to make the panel slide in from the right. Wrap in a style tag or add to a new or existing style sheet.

#messenger-container {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1000;
    transition: transform, opacity;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    right: 0;
    width: 20rem;
    transform: translateX(20rem);
    pointer-events: none;
    height:100%;
}

#messenger-container.open {
    transform: none;
    border-left: 1px solid #ccc;
}

Toggle the Messenger panel

You can toggle the panel however you like, but for the sake of clarity, we'll add a simple button element in this example.

<button class="toggle-messenger">Toggle Messenger</button>

Add the script below to hook up the click event of the button to the Weavy Client's toggle function.

$(document).on("click", ".toggle-messenger", function() {             
    messenger.toggle();
    $("#messenger-container").toggleClass("open");
});

Reload your app and click the button you added. You should see the Weavy Messenger slide in from the right.

Below you can find the final version of the script.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://{weavyurl}/javascript/weavy.min.js"></script>

<script>

    $(function() {
    
        var weavy = new Weavy();
        var space = weavy.space({ key: "global"});
        var messenger = space.app({ key: "messenger", type: "messenger", container: "#messenger-container", open: false});

        $(document).on("click", ".toggle-messenger", function() {             
            messenger.toggle();
            $("#messenger-container").toggleClass("open");
        });
    });
</script>