Installing the Weavy UIKit
The Weavy UIKit is a JavaScript library that you add to your existing 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 Angular, React and Vue.js with additional info on installing and using Weavy with those frameworks.
Script installation
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="{WEAVY-URL}/uikit-web/weavy.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.
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";
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 src="{WEAVY-URL}/uikit-web/weavy.js"></script>
<script>
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.