Reference
UIKit

Weavy UIKit

Before using any component in the UIKit you need to create an instance of the Weavy class and initialize it with the url to your environment and tokenFactory or tokenUrl for authentication.

Importing

If you installed the UIKit with npm you can use the following snippet to import the Weavy class into your project. Otherwise, if you installed the UIKit as a <script> you can ignore this section.

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

Examples

In the example below we provide a custom array of emoji for reactions in addition to the required url and tokenUrl properties .

const weavy = new Weavy();
weavy.url = "{WEAVY-URL}";
weavy.tokenUrl = "https://example.com/myapp/token";
weavy.reactions: ["👍", "❤️", "😂", "😒", "😁"],

Properties

Most properties are optional and/or has sensible default values. Required properties are indicated with an asterix (*).

Property	Type	Description
`url`*	`string \| URL`	URL to your Weavy environment.
`tokenFactory`*	`WeavyTokenFactory`	Async function returning an `access_token`. See Authentication for details.
`tokenUrl`*	`string \| URL`	URL to token endpoint. Can be specified instead of `tokenFactory`.
`locale`	`string`	Preferred locale. See localization for details.
`locales`	`string[]`	Array of enabled locales. See localization for details.
`localesUrl`	`string`	Base url where translation files can be found. Defaults to `./locales`.
`reactions`	`string[]`	Emoji for reactions. Defaults to `["😍", "😎", "😉", "😜", "👍"]`.
`modalParent`	`string`	Query selector for where to attach modals. Defaults to `body` but can be set to `html` for better compatibility with some frameworks.
`notificationEvents`	`boolean`	Set to `true` to enable the `wy:notifications` event.
`scrollBehavior`	`"smooth" \| "instant" \| "auto"`	Scroll behavior to use (where applicable). Defaults to `"instant"` for Google Chrome and `"smooth"` for other browsers.

Methods

The Weavy class exposes the following methods:

fetch()

The fetch() method makes it easy to call the Web API as the authenticated user. It's compatible with the standard Fetch API, but with some restrictions to only support URLs and the HTTP methods supported by the Web API .

Getting data is as simple as specifying the API endpoint and then processing the response. You can also send data to the Web API (unless specified the value of the Content-Type header defaults to application/json).

Example: Get user data for the authenticated user.

async function getCurrentUser() {
  const response = await weavy.fetch("/api/user");
  const user = await response.json();
  return user;
}

Exemple: Post a message in a chat on behalf of the authenticated user.

async function postChatMessage() {
  const response = await weavy.fetch("/api/apps/test-chat/messages", {
    method: "POST",
    body: JSON.stringify({
      text: "This is a test message"
    })
  })
  const message = await response.json():
  return message;
}

fetchOptions()

You can also use the weavy.fetchOptions({ ...options }) method to get the RequestInit object used by weavy.fetch(), e.g. for use with the standard window.fetch method.

async function getCurrentUser() {
  // Get default fetch options and add the GET http method
  const options = await weavy.fetchOptions({ method: "GET" });

  // Construct a Web API url using the configured weavy environment url
  const url = new URL("/api/user", weavy.url);

  // Use default window.fetch() method instead of weavy.fetch()
  const response = await window.fetch(url, options);
  const user = await response.json();
  return user;
}

destroy()

When a user signs out from your applicaton you can destroy the Weavy instance to disconnect the user and prevent further usage.

weavy.destroy();
weavy = undefined;