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


First import and configure Weavy and the WyNotificationToasts component.

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

const weavy = new Weavy();
weavy.url = "";
weavy.tokenFactory = async (refresh) => "token_from_server";

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



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.


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