Notification toasts component

Notification toasts can be displayed when notifications are received. To enable notification toasts, just add the <wy-notification-toasts> component anywhere on your page.

Element: <wy-notification-toasts>
Class: WyNotificationToasts

Usage

First import and configure Weavy and the WyNotificationToasts component.

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

const weavy = new Weavy();
weavy.url = "https://myenvironment.weavy.io";
weavy.tokenFactory = async (refresh) => "token_from_server";

Then add the <wy-notification-toasts> component to your HTML.

<wy-notification-toasts></wy-notification-toasts>

Properties

Property	Type/Value	Description
`typeFilter`	`"activity"` \| `"mention"` \| `"reaction"` \| `""`	Optional filter the notifications to only show notifications of the specified type.
`appearance`	`"internal"` \| `"native"`	The kind of toasts to use. Internal HTML toasts or native browser notifications. Defaults to `"internal"`
`requestUserPermission`	`boolean`	Whether to use the Notifications API to request user permission to display internal toasts. Defaults to `false`. This property has no effect on native browser notifications, which always require user permission.
`duration`	`number`	Duration of the HTML toasts in milliseconds. Defaults to 5000.

Events

Clicking a toast emits a wy:link event that you can handle to navigate to the correct page or view in your application.