Now it's time, let's add in-app chat to your app.
First, let's add the Client SDK. Include the Client SDK globally.
Now it's time, let's add in-app chat to your app.
First, let's add the Client SDK. Include the Client SDK globally.
<script src="https://{your-url}/javascript/weavy.jquery.js"></script>
The {your-url}
refers to the hostname where you installed the Weavy Server SDK.
When you have loaded the SDK, you can create a new Weavy()
instance anywhere at any point in your app.
The Weavy instance is the main entry point used when embedding Weavy. It sets up a connection to a Weavy server and handles realtime communication, event distribution, and more.
To avoid timing issues when loading it may be a good idea to make sure you instantiate Weavy at the window DOMContentLoaded event.
For our example, make sure you have a container in your app named id="weavy-chat"
The container must also have a specified width & height.
Use the encoded JWT you generated in the previous step.
<script>
var jwt = "{your generated jwt token}";
var weavy = new Weavy({ jwt: jwt });
var space = weavy.space({ key: "demo" });
space.app({
key: "chat-demo",
type: "messenger",
container: "#weavy-chat"
});
</script>
Spaces are used in Weavy to group apps around a subject or entity. Within those spaces are members. Any members within a space have access to any apps within that space.
In order to set up the Weavy space, we need a unique identifier - a key - in the sample snippet above that's key: "chat-demo"
Keys must be unique because they are used to grab the contextual information for that specific space or app. Any unique identifier will do - it just can't be too long.
Weavy has its own event listeners that listen to events from the Server SDK. Badge events are triggered when the user has a new message or notification. They contain data about the number of unread conversations
and the number of unread notifications
.
We can use this information to add an indicator icon for new messages.
weavy.on("badge", function (e, data) {
var im = $("#instantmessaging");
data.conversations > 0 ? im.addClass("has-unread") : im.removeClass("has-unread");
});
If you've done everything correctly, you should now see Weavy Chat rendered in your UI - cool, right? 😉
Could look like something like this...