1. Reference
  2. UIKit Web

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 by including <script> element or by installing it locally.

Add script element

Loading the UIKit with a <script> element is the easiest way to add Weavy to your application as it automatically registers all components, and you can start using Weavy directly. Just add the following <script> element to load the UIKit directly from your Weavy environment.

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

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, the best 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, WyMessenger } 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 for authentication.

const weavy = new Weavy();
weavy.url = "https://myenvironment.weavy.io";
weavy.tokenUrl = "https://myserver.example.com/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 {WEAVY-SERVER} with with the url to your Weavy environment and set the weavy.tokenUrl value to your user token endpoint.

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

<!DOCTYPE html>
<html>
  <head>
    <script src="https://{WEAVY-SERVER}/uikit-web/weavy.js"></script>
    <script>
      const weavy = new Weavy();
      weavy.url = "https://{WEAVY-SERVER}";
      weavy.tokenUrl = "https://myserver.example.com/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.