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. In this case, make sure that you de-select the Extended version.

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 the Messenger panel.

var weavy = new Weavy();
weavy.addPanel("messenger-panel", "messenger");
It's recommended to instantiate the Weavy variable after the HTML document is loaded and parsed, e.g. after jquery.ready or DOMContentLoaded.

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"></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() {             
    weavy.toggle("messenger-panel");
});

Reload your app and click the button you added. You should see the Weavy Messenger, and it probably takes up all available space (which is probably not what you wanted).

When you configure the Weavy client without a container it will append it's markup in a section tag as a sibling to the html element.

Style and Customize the Panel

Often you want to control where the markup is injected and also style the Messenger to make it useful - so let's continue the tutorial.

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

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

Update the script you added earlier and specify the container option.

var weavy = new Weavy({ 
    container: document.getElementById("weavy-container") 
});

Register two event listeners for the open and close event. We use these for adding or removing the open class on the container.

weavy.on("open", function() {
    $("#weavy-container").addClass("open");
});

weavy.on("close", function() {
    $("#weavy-container").removeClass("open");
});

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.

#weavy-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;
}

#weavy-container.open {
    transform: none;
    border-left: 1px solid #ccc;
}
You may need to change the css a bit depending on the design of your host application.

That's it. You can build on this example to add additional panels or change the presentation.

Below you can find the final version of the script.

// after jquery ready
$(function() {
    
    // create the weavy client and set the container
    var weavy = new Weavy({
        container: document.getElementById("weavy-container")
    });

    // add messenger panel
    weavy.addPanel("messenger", "/messenger")

    // toggle messenger panel on button click
    $(document).on("click", ".messenger-toggle", function() {
        weavy.toggle("messenger");
    });

    // toggle open class
    weavy.on("open", function() {
        $("#weavy-container").addClass("open");
    });

    weavy.on("close", function() {
        $("#weavy-container").removeClass("open");
    });
});