Learn
Installation

Installing the Weavy UIKit

The Weavy UIKit is a JavaScript library that you add to your app or website. You can load the UIKit by including a <script> element on your page or by installing it in your application with npm.

Being built on web components technology, our UIKit runs natively in all browsers which makes it easy to use without a JavaScript framework. We also have dedicated articles on specific frameworks, such as Angular, React and Vue.js with additional info on installing and using Weavy with those frameworks.

Loading the library

You have several ways of loading the library. We recommend loading the library as a module when you want better performance and as an UMD when you need a fail-safe method.

Script module installation

Loading the UIKit with a <script> element is the recommended way to add Weavy to your HTML application. It registers all components, and can be used in javascript in the script where it's imported. Just add the following <script> element to load the UIKit directly from your Weavy environment. Importing Weavy as a module will give you a scoped script with dynamic loading directly from your Weavy environment as well as optimal performance.

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

npm installation

For most projects with a bundler or build system, the best way to install the library is with npm install as it will be more efficient than using the <script> installation. It uses dynamic loading directly from your Weavy environment as well as optimal performance.

npm install @weavy/uikit-web

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

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

Script url installation

Loading the UIKit using a script src is a fail-safe way to add Weavy to your application as it automatically registers all components, and you can use Weavy in any other script. Just add the following <script> element to load the UIKit directly from your Weavy environment. It is using the weavy.js UMD library file, which should be a fail-safe fallback alternative that is compatible with most applications.

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

Library module variants

There are several pre-built library files optimized for different environments. If you are using npm installation and a build system, the appropriate library file will be automatically selected for you.

File	Approx. size (gzip)	Type
`weavy.esm.js`	1 MB (220 kB)	ES2020 module with automatic dynamic module loading from the environment.
`weavy.js`	3 MB (880 kB)	UMD legacy compatible bundle with all modules included.

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://example.com/myapp/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://example.com/myapp/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.