Learn how to add novu powered In-App notification center to your React app
@novu/notification-center
a React library that helps to add a fully functioning notification center to your web application in minutes. Let’s do a quick recap on how you can easily use it in your application.
@novu/notification-center
npm package in your react appsubscriberId
applicationIdentifier
<NotificationCenter>
component in place of <PopoverNotificationCenter>
subscriberId
which identifies the user’s end-customer, and the application Identifier which is acted as a public key to communicate with the notification feed API.
A malicious actor can access the user feed by accessing the API and passing another subscriberId
using the public application identifier.
HMAC encryption will make sure that a subscriberId
is encrypted using the secret API key, and those will prevent malicious actors from impersonating users.
How to enable HMAC encryption for In-App notification center
subscriberHash
along with subscriberId
is not provided, then notification center will not loadAdd an Avatar
option in in-app step editor as shown below
How to enable avatar icon for in-app notifications
Ways to show the avatar icons in in-app notifications
avatar
field. For this option to work actor should have avatar
field set with valid publicly accessible image URL. If the actor doesn’t have avatar
field, then the default avatar will be shown. Worklfow trigger example with avatar
useSocket
hook provided by the @novu/notification-center
library. Let’s see an example of that:
unseen_count_changed
unread_count_changed
notification_received
useSocket
hook. Add the toast opening code in socket.on
callback.
The notification center is not loading properly.
There is a render error due to the notification center in React.
<NovuProvider>
What is the difference between a redirect URL and CTA?
onNotificationClick
function prop is used for redirecting url and the onActionClick
function prop is used for CTA.Can bell icon in Novu dashboard be used for in-app channel testing?
How to fix CORS error with notification center?
withCredentials
config in axios or fetch http requests.