Drop-in UI

The Drop-in UI is a javascript library that you add to your existing app or website. The library enables you to quickly add collaboration features such as messaging, document collaboration, and more to your application. It handles Single-Sign-On (SSO) between your app and Weavy, and features an api for initializing and rendering weavy apps that served from the Weavy.Dropin area on the Weavy backend.

Installation

The easiest way to install the library is by adding it with npm install, but you can also clone the weavy-dropin-js repo on GitHub.

npm install @weavy/dropin-js

Initializing Weavy

The Weavy instance is the main entry point used when embedding Weavy. It sets up a connection to your Weavy backend and handles realtime communication, event distribution, and more. Embedding Weavy into an application starts with adding a reference to the Weavy javascript library and initializing a new Weavy instance.

The minimum configuration requires the url to your weavy backend and a jwt factory function that provides authentication tokens from your server. See authentication for additional details on how to implement this function. Finally, you also need to some required default styling by pointing to the weavy-dropin.css stylesheet found in the dist folder of the npm package.

Make sure you copy /dist/weavy-dropin.css from the @weavy/dropin-js npm package to a preferred stylesheet location in your project.

import Weavy from "@weavy/dropin-js";

const weavy = new Weavy({
  url: "https://my-weavy-backend.example",
  jwt: () => "{SERVER_GENERATED_TOKEN}",
  stylesheet: "weavy-dropin.css"
});

Initializing apps

When you have your weavy instance running you can start adding apps to your website. Apps add rich content and social dimensions to your website. They are presented using backend server rendered HTML and integrated by the frontend using iframe technology. See Working with apps and Open and closing apps for more information.

In the example below we inititialize a messenger app. As you can see you need to supply a DOM container to place it in, for instance a <div>. Reference your div as an element or by a selector using the container property ( the app will adapt itself to the size of the container, so you need to define the size of your container in css, otherwise the app will not be visible).

const messenger = weavy.app({ 
  id: "my-messenger", 
  type: "messenger",
  container: "#my-container"
})

Complete example

Here is an example of how to bind the messenger app to a toggle button and display the number of unread messages.

HTML

<!-- Messenger toggle button -->
<button id="messenger-button">Messenger</button>

<!-- The container to place the messenger in -->
<!-- Height is used to define a size on the container -->
<div id="messenger-container" style="height: 600px"></div>

Javascript

import Weavy from "@weavy/dropin-js";

const weavy = new Weavy({
  url: "https://my-weavy-backend.example",
  jwt: () => "{SERVER_GENERATED_TOKEN}",
  stylesheet: "weavy-dropin.css"
});

let messengerButton = document.getElementById("messenger-button");
let messengerContainer = document.getElementById("messenger-container");

let messenger = weavy.app({ 
  type: "messenger",
  id: "messenger1234",
  container: messengerContainer,
  open: false,
  badge: true
});

// Let the button toggle the messenger on click
messengerButton.addEventListener("click", () => messenger.toggle());

// Add/remove classes on the container when the messenger is opened or closed
messenger.on("app-open", () => messengerContainer.classList.add("open"))
messenger.on("app-close", () => messengerContainer.classList.remove("open"));

// Update your UI with badge count from the messenger
messenger.on("badge", (e, badge) => { 
  messengerButton.innerText = "Unread conversations: " + badge.count; 
});
Weavy Docs