Apps

In Weavy we use the "apps" terminology for our main features (posts, chat, files etc.). Currently the following apps are available for use in the drop-in UI:

There are two different types of apps: contextual and non-contextual. Contextual apps are connected to a specific context or entity that you define. There can be multiple contextual apps of the same type, whereas a non-contextual app only exists in one single instance.

Initializing apps

To initialize an app you need to provide the drop-in UI with an app definition. An app definition is always an object with properties.

Non-contextual apps

For non-contextual apps you need to define the app type and the container to place the app in.

const app = weavy.app({
  type: "messenger",
  container: "#my-container"
})

Contextual apps

A contextual app must first be created in the Weavy backend and your user must be added as member before it can be loaded in the drop-in UI. For these apps you should first call the Web API from your server-side code to initialize the app.

Example: Execute a single request that creates the app (if it does not already exist) with the specified uid and type. Then adds the user with the given uid as a member (if not already a member).

$ curl -H 'Authorization: Bearer {token}' {WEAVY_BACKEND_URL}/api/apps/init -d '{app: {"uid": "product-256", "name": "Product 256 chat", "type": "chat"}, user: {"uid": "u32"}}'

Once the app exists on the Weavy backend and your user is a member you can define it as usual and it will be loaded and displayed in the drop-in UI. For contextual apps you need to define the uid of the app, it's type and a container to place the app in.

const app = weavy.app({
  type: "chat",
  uid: "product-256",  
  container: "#my-container"
})

The uid is a string that uniquely identifies your context (typically your internal entity id) for example a product page, but since it cannot contain whitespace and must contain at least one non-digit you might need to customize it. For instance, if a product has the integer id 256 in your system you can create an uid by adding a prefix, e.g. "product-256".

Options

When defining an app you can specify additional options.

* Required

Properties

Some properties are available instantly when you have defined your app, but most of the properties are available from the point when the app has been fully initialized. Await the whenInitialized() promise to make sure the properties are set.

Promises

Each app has promises and events part of the asynchronous lifecycle.

Events

There are app events triggered when the app changes state. All events are propagated to the weavy instance with a reference to the triggering app as event data. This means you also can add general listerners for all apps on the weavy instance. See events for more info on the event system.

You can register event listeners for a specific app using app.on().

Event methods

The event methods register handlers for the specific app. See events for details on how to use event methods.

Methods

.addStyles(styles) ⇒ boolean

Check if another app or an object is matching this app. It checks for a match of the id property or the server appId property.

.open([destination]) ⇒ Promise

Opens the app panel and optionally loads a destination url after waiting for whenBuilt. If the app is grouped it also closes the other apps in the group.

.close() ⇒ Promise

Closes the app panel.

.toggle([destination]) ⇒ Promise

Toggles the app panel open or closed. It optionally loads a destination url on toggle open. If the app is grouped it also closes the other apps in the group.

.match(options) ⇒ boolean

Check if another app or an object is matching this app. It checks for a match of the id property or the server appId property.

.postMessage(message, [transfer]) ⇒ Promise

Sends postMessage to the app panel frame. Returns a promise that is resolved when the message has been delivered and rejected if the message fails or has timed out.

See: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

.remove() ⇒ Promise

Removes the app in the client and the DOM. The app will not be removed on the server and can be added and fetched at any point again.

.reset() ⇒ Promise

Resets the app panel.