Skip to content

fix: inbox feedback MRK 1069 #981

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 8, 2025
Merged

fix: inbox feedback MRK 1069 #981

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ce18ad
Fix docs issues raised by a client
Aviatorscode2 Oct 7, 2025
836e5db
Update content/docs/platform/inbox/configuration/preferences.mdx
jainpawan21 Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 40 additions & 4 deletions content/docs/platform/inbox/configuration/preferences.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<Callout type="info">
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.
</Callout>

![Global preferences](/images/inbox/preferences.gif)

<Callout>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).</Callout>

## 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.
Expand Down Expand Up @@ -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 notification for an account updates worflow but in-app notifications for security alerts.

<Callout>
The name given to a workflow in the Novu dashboard is the name your subscribers will see in their preferences UI.
</Callout>

![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.

<Callout type ="info">Learn how to configure channel steps in a workflow in the [Building Workflows guide](/platform/workflow/build-a-workflow).</Callout>

Expand Down Expand Up @@ -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 (
<Inbox
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
subscriber="YOUR_SUBSCRIBER_ID"
appearance={appearance}
/>
);
}
```

## 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.
Expand Down
30 changes: 0 additions & 30 deletions content/docs/platform/inbox/configuration/styling.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Inbox
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
subscriber="YOUR_SUBSCRIBER_ID"
appearance={appearance}
/>
);
}
```

## 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.
Expand Down
4 changes: 3 additions & 1 deletion content/docs/platform/inbox/features/schedule.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ The **Schedule** feature in the <Method href="/platform/inbox/overview">{`<Inbox

By defining their hours of availability from the <Method href="/platform/inbox/overview">{`<Inbox />`}</Method> UI, subscribers can automatically skip notifications outside of their chosen time range.

![](/images/inbox/schedule.png)
<Callout>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).</Callout>

![Schedule](/images/inbox/schedule.png)

<Callout>In-app notifications and notifications from critical workflows are never paused and will always be delivered, regardless of schedule settings.</Callout>

Expand Down
2 changes: 2 additions & 0 deletions content/docs/platform/inbox/features/snooze.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ icon: 'Clock'

The `<Inbox />` 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.

<Callout>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).</Callout>

![Snooze icon on the inbox notification](/images/inbox/snooze.png)

<Callout type="info">Snooze is supported in client-side SDKs starting from version 3.3.0 and is only available for cloud workspaces.</Callout>
Expand Down