UIKit Web

UIKit Web is a JavaScript library based on the web components technology that you add to your existing app or website. The UIKit uses the Web API to communicate with a Weavy environment and is composed of many small components that can either be used individually, or combined into larger and more complex components.

The web components technology allows the UIKit to run natively in all browsers, and makes it easy to use directly without a component framework, as well as integrate into almost any JavaScript/TypeScript based framework or application.

Installation

You can load the UIKit via CDN or by installing it locally.

Install from CDN

Installing from CDN is the easiest way to add Weavy to your application. You just need to include a <script> element on your page (in this example we reference a pre-built version from the jsDelivr CDN).

<script src="https://cdn.jsdelivr.net/npm/@weavy/uikit-web/dist/weavy.js"></script>

Referencing the UIKit from a CDN automatically registers all components up front, and you can start using Weavy directly. Note that, if you’re only using a handful of components, it will be more efficient to use npm with a bundler/build system.

Install from npm

For most projects with a bundler or build system (or if you don’t want to use the CDN), the easiest way to install the library is with npm install.

npm install @weavy/uikit-web

After installing the library you can import the components you need just as you normally would.

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

Usage

Next step is to add components from the UIKit to your application. In the example below we add a <wy-messenger> component that renders a fully functional chat application for private messaging with one-to-one and group chats.

Configure Weavy

Before adding any components to your application, you need to initialize Weavy with some basic configuration settings. At the very least, you need to configure the url to your Weavy environment and a tokenUrl or tokenFactory for authentication.

const weavy = new Weavy();
weavy.url = "https://myenvironment.weavy.io";
weavy.tokenUrl = "https://myserver.example/api/token";

Add components

After configuring Weavy, you can now add the <wy-messenger> element to your page.

<wy-messenger></wy-messenger>

Example

The following code shows everything required to add a fully functional <wy-messenger> component.

Note that you should replace the weavy.url value with with the url to your Weavy environment and the weavy.tokenUrl value with the url to your user token endpoint.

See the authentication article for details on how to provide user tokens.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@weavy/uikit-web/dist/weavy.js"></script>
    <script>
      const weavy = new Weavy();
      weavy.url = "https://myenvironment.weavy.io";
      weavy.tokenUrl = "https://myserver.example/api/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.

Weavy Docs