diff --git a/content/docs/platform/inbox/configuration/preferences.mdx b/content/docs/platform/inbox/configuration/preferences.mdx index 3edb48608..2d7beb0ec 100644 --- a/content/docs/platform/inbox/configuration/preferences.mdx +++ b/content/docs/platform/inbox/configuration/preferences.mdx @@ -8,12 +8,13 @@ icon: 'UserCog' The Preferences interface in the Inbox component lets subscribers customize how they receive notifications. By default, Novu renders a preferences icon inside the Inbox component, giving users access to global and workflow-specific settings directly from the UI. -A workflow marked as "critical" on the Novu dashboard cannot be disabled by the user and will not appear in their preferences UI. -You can override this behavior by setting the `criticality` field in the `preferencesFilter` prop. +A workflow marked as "critical" on the Novu dashboard cannot be disabled by the user and will not appear in their preferences UI. You can override this behavior by setting the `criticality` field in the `preferencesFilter` prop. ![Global preferences](/images/inbox/preferences.gif) +You can also hide any workflow from appearing in the subscriber preferences UI using the appearance prop. To learn more, refer to the documentation on [styling the Inbox UI elements](/platform/inbox/configuration/styling#style-the-inbox-ui-elements). + ## Global preferences Global preferences apply across all workflows. For example, a subscriber can turn off an email or SMS channels globally, ensuring that they don’t receive notifications through that channel from any workflow. @@ -49,11 +50,15 @@ export default InboxWithGlobalPreferencesHidden; ## Workflow-specific preferences -Each workflow has its own set of channel preferences in the Inbox UI, where your subscribers can control how they receive notifications for that specific workflow. For example, a user might prefer email for account updates but in-app notifications for security alerts. +Each workflow has its own set of channel preferences in the Inbox UI, where your subscribers can control how they receive notifications for that specific workflow. For example, a subscriber might prefer to receive email notifications for an account updates workflow but in-app notifications for security alerts. + + +The name given to a workflow in the Novu dashboard is the name your subscribers will see in their preferences UI. + ![Workflow specific preferences](/images/inbox/workflow-specific-preferences.png) -The Inbox UI only displays the channels step used in a given workflow. +For each workflow, the Inbox UI only displays the channels step used in a given workflow. Learn how to configure channel steps in a workflow in the [Building Workflows guide](/platform/workflow/build-a-workflow). @@ -361,6 +366,37 @@ function InboxWithGroupedAndSortedPreferences() { export default InboxWithGroupedAndSortedPreferences; ``` + +## Conditionally display preferences + +This approach can also be used to show or hide elements. The example below hides the global preferences settings by checking the `preference.level` property. + +```tsx +import { Inbox, PreferenceLevel } from '@novu/react'; + +export default function Novu() { + + const appearance = { + elements: { + workflowContainer: ({ preference }) => { + if (preference.level === PreferenceLevel.GLOBAL) { + return 'hidden'; + } + return ''; + }, + }, + }; + + return ( + +); +} +``` + ## Use Preferences outside the Inbox UI You don’t have to display the Preferences UI inside the default Inbox component. Novu provides two main ways to build a custom preference experience for your subscribers. diff --git a/content/docs/platform/inbox/configuration/styling.mdx b/content/docs/platform/inbox/configuration/styling.mdx index d6c052775..b2d9f4549 100644 --- a/content/docs/platform/inbox/configuration/styling.mdx +++ b/content/docs/platform/inbox/configuration/styling.mdx @@ -454,36 +454,6 @@ export default function Novu() { } ``` -### Conditionally display preferences - -This approach can also be used to show or hide elements. The example below hides the global preferences settings by checking the `preference.level` property. - -```tsx -import { Inbox, PreferenceLevel } from '@novu/react'; - -export default function Novu() { - - const appearance = { - elements: { - workflowContainer: ({ preference }) => { - if (preference.level === PreferenceLevel.GLOBAL) { - return 'hidden'; - } - return ''; - }, - }, - }; - - return ( - -); -} -``` - ## Style notifications by severity Notification severity comes with default visual styles, but you can fully customize how notifications look for each severity level using the `appearance` prop. diff --git a/content/docs/platform/inbox/features/schedule.mdx b/content/docs/platform/inbox/features/schedule.mdx index 852232544..9f553426b 100644 --- a/content/docs/platform/inbox/features/schedule.mdx +++ b/content/docs/platform/inbox/features/schedule.mdx @@ -8,7 +8,9 @@ The **Schedule** feature in the {`{``} UI, subscribers can automatically skip notifications outside of their chosen time range. -![](/images/inbox/schedule.png) +If you don't need the Schedule feature, you can hide it from the preferences UI using the appearance prop. To learn more, refer to the documentation on [styling the Inbox UI elements](/platform/inbox/configuration/styling#style-the-inbox-ui-elements). + +![Schedule](/images/inbox/schedule.png) In-app notifications and notifications from critical workflows are never paused and will always be delivered, regardless of schedule settings. diff --git a/content/docs/platform/inbox/features/snooze.mdx b/content/docs/platform/inbox/features/snooze.mdx index fa9ea17dd..4c85cf26d 100644 --- a/content/docs/platform/inbox/features/snooze.mdx +++ b/content/docs/platform/inbox/features/snooze.mdx @@ -7,6 +7,8 @@ icon: 'Clock' The `` component includes built-in support for snoozing notifications, which can be used to temporarily dismiss notifications and have them reappear at a more convenient time. +If you don't need the Snooze feature, you can hide it from the preferences UI using the appearance prop. To learn more, refer to the documentation on [styling the Inbox UI elements](/platform/inbox/configuration/styling#style-the-inbox-ui-elements). + ![Snooze icon on the inbox notification](/images/inbox/snooze.png) Snooze is supported in client-side SDKs starting from version 3.3.0 and is only available for cloud workspaces.