NOVU In-app Notifications
Hi everyone,
Hope you're all having a great day!
I have a question regarding Novu and in-app notifications.
How can I implement custom action buttons within notifications using Novu?
For instance, I’d like to have a notification that includes buttons—one that triggers an API call and another that redirects the user to a different page.
Also, some notifications may include multiple custom buttons.
For the buttons that trigger API calls, I’d like them to update their state—for example, once a user clicks the button, it should become disabled for that specific user, while still remaining active for other users who receive the same notification.
Would love to hear if anyone has tackled something similar or has creative ideas for implementing this behavior!
Thanks in advance!
9 Replies
@George @Gal Tidhar @sokratis
@Drex
I see you are in touch with Dima on this.
For other community members:
Here, you will need to build a custom Inbox either using hooks or custom components
Use recently added data object feature to send custom data to use in notification display and functionalities
Hooks | Novu Documentation
Learn how to build a custom notifications UI using React hooks powered by Novu
| Novu Documentation
Learn how to use and customize the Inbox component in your React application
@Drex
Let me know if you face any issue
Thank you @Pawan Jain
I'll try this now
@Drex
Just want to follow up if you got chance to check on this?
I've been able to work with the redirect, but i'm currently still trying to implement the api call notification buttons
Also, i noticed something @Pawan Jain
When i use the <Inbox /> Component, the real time system works
In the sense that if i go to my novu dashboard and trigger a notification, i get a notification without having to refresh
but when i use the hooks
const {
notifications,
error,
isLoading,
isFetching,
refetch,
fetchMore,
hasMore,
} = useNotifications();
that function doesn't work (the real time system)
@Drex
Checkout this doc
https://docs.novu.co/platform/sdks/react/hooks/use-novu#listening-to-real-time-events
Thanks man
Let me check it out
It works
Thanks man
@Drex, you just advanced to level 1!