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.