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.
Chat / JavaScript /
Let's Add Chat
- On this page
<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
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.
Badge Notifications
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");
});
Congratulations!
If you've done everything correctly, you should now see Weavy Chat rendered in your UI - cool, right? 😉
Could look like something like this...
weavy.com