Notification Center Configure Settings?
Hey I'm using the notification center in React. I would like to conditionally show the notification settings options based on the user.
Is there a way to configure what settings we show and hide in the frontend?
7 Replies
Hi @turtles, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question.
-----------------------------
While I generate an answer, here are some sources that might be helpful:
* React
* API Reference
* Configuring Multiple Tabs
* Customizing Notification Center
-----------------------------
Answer
Currently, the official documentation does not provide direct information about conditionally showing or hiding specific settings options in the Novu Notification Center based on the user directly from the frontend. The provided resources do not cover a method to programmatically control the visibility of different settings or preferences on a per-user basis within the Notification Center UI components or APIs.
However, you might find the general concept of customizing the Notification Center's appearance or behavior useful, as indicated in the documentation regarding customizing the Notification Center experience (1) , which includes adjusting styles and behavior. But for user-specific conditional display logic, such capabilities are not explicitly documented in the provided materials.
For more complex user-based conditional logic not covered in the standard documentation, it may involve implementing custom logic outside of the provided Novu components or exploring more advanced configurations that might not be directly supported at this time.
@turtles
showUserPreferences prop can be used to hide/show the cog icon
https://docs.novu.co/notification-center/client/react/api-reference#popovernotificationcenter
@turtles did you get chance to test showUserPreferences prop on PopoverNotificationCenter component?Hey sorry was the weekend for me (New Zealand).
Ahh yeah, had a look but that's to hide all preferences. I'm trying to show/hide specific preferences. Ideally I want the users account to meet a specific requirement before showing them the notification preferences for 'Job Complete' (see the screenshot from the original post).
We have added a gross hack in the meantime to get the preference id from the button itself (the preference buttons have
id="mantine-rh-control-PREFERENCE-ID-IS-HERE") and our backend sends us a list of allowed preferences and we filter them this way.
So is there any prop or way to deal with individual preferences?@turtles, you just advanced to level 2!
@turtles
Checkout
preferenceFilter function prop
https://codesandbox.io/p/sandbox/kind-nova-xv6s9g?file=%2Fsrc%2FApp.js%3A13%2C1-20%2C1&fontsize=14&hidenavigation=1&theme=darkahh exactly what I was after. Thanks