Notification toasts component

<wy-notification-toasts> | WyNotificationToasts

Notification toasts can be displayed when notifications are received. To enable them, just add the <wy-notification-toasts> element anywhere on your page. You can also handle navigation when a notification is clicked.

Importing

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

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

Examples

Example: Display rich notification toasts on your page.

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

Example: Display native browser notification toasts.

<wy-notification-toasts appearance="native"></wy-notification-toasts>

HTML attributes

Attributes can be set when using the component in HTML. All attributes have corresponding Javascript properties.

Most attributes are optional and/or has sensible default values. Any required attributes are indicated with an asterisk (*).

Learn more about attributes and properties.

Attribute	Value	Description
`appearance`	`"internal", "native", "none"`	The kind of toasts to use. Defaults to `"internal"`.
`duration`	`number`	Duration of the HTML toasts in milliseconds. Defaults to 5000.
`requestUserPermission`		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.
`typeFilter`	`"activity", "mention", "reaction"`	Optionally filters the notifications to only show notifications of the specified type.

JavaScript properties

Properties can be used in JavaScript. Some of them have corresponding HTML attributes where applicable.

Property	Type	Default	Description
`appearance`	`"internal", "native", "none"`	`"internal"`	Notification delivery mode; `internal` renders in-app toasts, `native` uses browser notifications, `none` only emits notification events.
`duration`	`number`		Duration in milliseconds for internal toast visibility.
`requestUserPermission`	`boolean`	`false`	Require user consent before showing internal notifications. Native notifications always prompt automatically.
`typeFilter`	`"", "activity", "mention", "reaction"`	`""`	Notification types to display.

JavaScript methods

Methods for the component are available in JavaScript. Methods that are async return a promise.

Method	Returns	Description
`hasUserPermission()`	async `boolean`	Checks if the user has granted permission for desktop notifications. A request will be made if permission has not yet been granted.
`clearNotifications()`		Clears queued internal toast notifications.
`markAsRead(notificationId: number, read: boolean)`	async	Marks a notification as read or unread.

DOM Events

The component triggers custom events that bubbles up the DOM tree. They can be listened to using the addEventListener() method.

Learn more about events.

Name	Type	Description
`wy-notification`	`WyNotificationEventType`	Emitted when a notification should be shown.
`wy-link`	`WyLinkEventType`	Emitted when a notification is clicked.