1. Learn
  2. UIKit

Adding the Weavy UIKit

The Weavy UIKit is a JavaScript library with ready-to-use components that you add to your app or website. The components are feature complete with rich text, images, file uploads, cloud files, video meetings, office integration, polls, file previews for 100+ file formats, embedded links, emoji reactions, AI agents, rich comments and more.

Being built on web components technology, the UIKit runs natively in all browsers which makes it easy to use with, or without, any JavaScript framework.

Loading the library

You have several ways of loading the library. We recommend using npm or importing as ESM from the Weavy environment. As a fallback and fail-safe method, you can alternatively load the UIKit as an UMD script for compatibility with older applications.

npm

For most projects with a bundler or build system, the best way to install the library is with npm install.

npm install @weavy/uikit-web

After installing the library you can import modules and components as you normally would.

import { Weavy } from "@weavy/uikit-web";

If you use TypeScript in your project, the @weavy/uikit-web package also contains type definitions for the whole library which helps improve your code and makes debugging easier.

ESM

Loading the UIKit as ECMAScript Modules (ESM) from your Weavy environment is another efficient way of adding Weavy to your web app. This will give you a scoped script with dynamic module loading from the Weavy environment.

<script type="module">
  import { Weavy } from "{WEAVY-URL}/uikit-web/weavy.esm.js";
</script>

UMD

Loading the weavy.js file with a <script> element from your Weavy environment is an alternative way of adding Weavy to your application. This option uses UMD (Universal Module Definition) loading and should be considered a legacy workaround for compatibility with older applications.

<script src="{WEAVY-URL}/uikit-web/weavy.js"></script>

Initialize the UIKit

Next, you need to initialize the UIKit with some basic configuration settings. At the very least, you need to set the url to your environment and a tokenUrl or tokenFactory for authentication.

const weavy = new Weavy();
weavy.url = "{WEAVY-URL}";
weavy.tokenUrl = "https://myapp.example.com/token";

Add components

Finally, after initializing Weavy, you can start adding components to your application. In this example we'll show you how to add a messenger component that renders a fully functional chat application for private messaging with one-to-one and group chats.

Note that you need to replace {WEAVY-URL} with with the url to your environment and set the weavy.tokenUrl value to your token endpoint.

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import { Weavy } from "{WEAVY-URL}/uikit-web/weavy.esm.js";

      const weavy = new Weavy();
      weavy.url = "{WEAVY-URL}";
      weavy.tokenUrl = "https://myapp.example.com/token";
    </script>
  </head>
  <body>
    <wy-messenger></wy-messenger>
  </body>
</html>

Troubleshooting

If things are not working as expected, check the output in the console window of your browser for any warnings and/or errors.

One common issue is version mismatch between the UIKit and the Weavy environment. When loading the UIKit directly from the Weavy environment the versions are guaranteed to match, but when installing via npm and importing @weavy/uikit-web you need to make sure to match the package version with the Weavy environment version.