Notifications
Weavy automatically creates notifications for reactions, mentions and other activities (you can also create custom notifications with the Notifications API). For convenience, the UIKit provides a set of notification components that can be used to display these notifications in your application.
But one thing that you always need to consider when using these components is how to handle navigation when a notification is clicked. This article describes your options and when to use them.
Handling navigation
When a notification is clicked, Weavy dispatches a wy-link event. You can listen to the event on individual notification components (recommended) or on the document object.
The event details (e.detail) for the event includes information about the related Weavy entity (comment, post, message etc.) in the notification.
Example: Event details for a wy-link event that links to a comment, in a post, in a posts app with uid demo-posts.
{
link: {
id: 3616,
type: "comment",
parent: {
id: 3554,
type: "post",
},
app: {
id: 1971,
type: "5ebfa152-de85-48da-82dd-30a1b560c313",
uid: "demo-posts",
}
}
};
To handle the event you should add an event listener for the wy-link event and navigate to the appropriate page or view in your application. After navigation, and once the corresponding Weavy component on the target page is loaded, the linked entity will automatically scroll into view and be highlighted.
Example: Listen to wy-link on the notifications component and navigate to a page in your application.
<wy-notifications></wy-notifications>
<script>
const component = document.querySelector("wy-notifications");
component.addEventListener("wy-link", (e) => {
// Evaluate the event details and navigate to the correct page/view in your application.
// If you followed our advice with easily decodable uids, you could do something as simple as this:
if (e.detail.link.app.uid.startsWith("product-")) {
const productId = e.detail.link.app.uid.split("-")[1];
window.location = `/products/${productId}`;
} else {
// You could also navigate to an endpoint on your backend
// that knows how to identify and redirect to the correct location
window.location = `/link/${e.detail.link.app.uid}`;
}
});
</script>
Integrations
If you already have a notification system in your application, you might want to integrate Weavy notifications into your system instead of using the provided components and events. In that case you can register a webhook for the notifications trigger.
In your webhook handler you will then receive the notification_created event and can add the notification (including the link data) to your own system. When a user then clicks on a notification in your system that links to a Weavy entity, you can provide the link data to Weavy to via the setLink() method. Weavy will then automatically scroll to and highlight the linked entity in the corresponding Weavy component.
// Get the link data from your native notification system
const link = getWeavyLinkFromMyNotificationSystem(notification);
// Provide the link back to weavy
weavy.setLink(link);
// Navigate to the page where the corresponding Weavy component for the linked entity is located
window.location = "/my-page-with-weavy-component";