Skip to content

Mrk 949 localization #917

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 3 commits into from
Aug 1, 2025
Merged

Mrk 949 localization #917

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e9775d3
Content for localization page
Aviatorscode2 Jul 31, 2025
780824e
Merge branch 'MRK-935-inbox-architecture' into MRK-949-localization
Aviatorscode2 Jul 31, 2025
3599cae
Update content/docs/platform/inbox/configuration/meta.json
Aviatorscode2 Aug 1, 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
67 changes: 0 additions & 67 deletions content/docs/platform/inbox/configuration/localization.mdx
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions content/docs/platform/inbox/configuration/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"title": "Confiquration",
"title": "Configuration",
"icon": "Layers",
"pages": ["styling", "tabs", "preferences", "snooze", "data-object"],
"description": "Learn how to configure your inbox with styling, tabs, preferences, data objects, and snooze functionality."
}
"description": "Learn how to configure your inbox with styling, tabs, preferences, data objects, and snooze functionality"
}
141 changes: 141 additions & 0 deletions content/docs/platform/inbox/localization.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
---
pageTitle: 'Localizing the Inbox component'
title: 'Localization'
description: 'Learn how to customize the Inbox UI for different languages using the localization prop.'
icon: 'Globe'
---

Localize the UI text of the Inbox component to align with your product’s voice or support multiple languages. This helps create a more consistent, accessible experience for subscribers across different regions.

<Callout>Localization only updates the UI text in the Inbox. It doesn’t translate the content of your notifications. To send messages in different languages, use the [Translations](/platform/workflow/translations).</Callout>

## Using the localization prop

Override the default text in the Inbox component UI by passing a `localization` prop. This prop accepts an object of key-value pairs, where each key maps to a specific UI element and each value is your custom string.

If you omit any keys, the component will fall back to the default `en-US` values.

![Overriding the default text in the Inbox component UI using localization prop](/images/inbox/localization.png)

```tsx
import { Inbox } from '@novu/react';

function NovuInbox() {
return (
<Inbox
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
subscriberId="YOUR_SUBSCRIBER_ID"
localization={{
'inbox.filters.dropdownOptions.unread': 'Unread only',
'notification.actions.archive.tooltip': 'Move to archive',
'preferences.title': 'My Preferences',
locale: 'en-US',
}}
/>
);
}

export default NovuInbox;
```

<Callout>Localization is also fully supported in @novu/react-native. </Callout>

## Available localization keys

Here is a list of [all the keys available for localization](https://github.com/novuhq/novu/blob/next/packages/js/src/ui/config/defaultLocalization.ts#L1), grouped by their respective sections in the Inbox UI.

### Filters

| Key | Default Value | Description |
| ---------------------------------------- | --------------- | -------------------------------------- |
| `inbox.filters.dropdownOptions.unread` | `Unread only` | Text for the "unread" filter option. |
| `inbox.filters.dropdownOptions.default` | `Unread & read` | Text for the default filter option. |
| `inbox.filters.dropdownOptions.archived` | `Archived` | Text for the "archived" filter option. |
| `inbox.filters.dropdownOptions.snoozed` | `Snoozed` | Text for the "snoozed" filter option. |
| `inbox.filters.labels.unread` | `Unread` | Label for the unread tab. |
| `inbox.filters.labels.default` | `Inbox` | Label for the main inbox tab. |
| `inbox.filters.labels.archived` | `Archived` | Label for the archived tab. |
| `inbox.filters.labels.snoozed` | `Snoozed` | Label for the snoozed tab. |

### Notifications

| Key | Default Value | Description |
| ----------------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| `notifications.emptyNotice` | `Quiet for now. Check back later.` | Message displayed when the notification list is empty. |
| `notifications.actions.readAll` | `Mark all as read` | Text for the action to mark all notifications as read. |
| `notifications.actions.archiveAll` | `Archive all` | Text for the action to archive all notifications. |
| `notifications.actions.archiveRead` | `Archive read` | Text for the action to archive all read notifications. |
| `notifications.newNotifications` | ``({ notificationCount }: { notificationCount: number }) => `${notificationCount} new notification(s)` `` | A function that returns the string for the new notifications indicator. |
| `notification.snoozedUntil` | `Snoozed until` | Text displayed before the unsnooze time on a snoozed notification. |

### Notification actions (Tooltips)

| Key | Default Value | Description |
| ---------------------------------------- | ---------------- | ---------------------------------------- |
| `notification.actions.read.tooltip` | `Mark as read` | Tooltip for the "mark as read" action. |
| `notification.actions.unread.tooltip` | `Mark as unread` | Tooltip for the "mark as unread" action. |
| `notification.actions.archive.tooltip` | `Archive` | Tooltip for the "archive" action. |
| `notification.actions.unarchive.tooltip` | `Unarchive` | Tooltip for the "unarchive" action. |
| `notification.actions.snooze.tooltip` | `Snooze` | Tooltip for the "snooze" action. |
| `notification.actions.unsnooze.tooltip` | `Unsnooze` | Tooltip for the "unsnooze" action. |

### Snooze menu

| Key | Default Value | Description |
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| `snooze.options.anHourFromNow` | `An hour from now` | Text for the "snooze for one hour" option. |
| `snooze.options.inOneDay` | `Tomorrow` | Text for the "snooze for one day" option. |
| `snooze.options.inOneWeek` | `Next week` | Text for the "snooze for one week" option. |
| `snooze.options.customTime` | `Custom time...` | Text for the option to open the custom date picker. |
| `snooze.datePicker.timePickerLabel` | `Time` | Label for the time input in the date picker. |
| `snooze.datePicker.apply` | `Apply` | Text for the "Apply" button in the date picker. |
| `snooze.datePicker.cancel` | `Cancel` | Text for the "Cancel" button in the date picker. |
| `snooze.datePicker.pastDateTooltip` | `Selected time must be at least 3 minutes in the future` | Tooltip shown when a past time is selected. |
| `snooze.datePicker.noDateSelectedTooltip` | `Please select a date` | Tooltip shown when applying without selecting a date. |
| `snooze.datePicker.exceedingLimitTooltip` | ``({days}) => `Selected time cannot exceed ${days === 1 ? '24 hours' : `${days} days`} from now`` | Tooltip shown when the selected date exceeds the allowed snooze duration. |


### Preferences

| Key | Default Value | Description |
| --------------------------------------- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `preferences.title` | `Preferences` | The main title of the preferences screen. |
| `preferences.emptyNotice` | `No notification specific preferences yet.` | Message shown when no workflow preferences are available. |
| `preferences.global` | `Global Preferences` | Title for the global preferences section. |
| `preferences.group.info` | `Applies to all notifications under this group.` | Informational text for grouped preferences. |
| `preferences.workflow.disabled.notice` | `Contact admin to enable subscription management for this critical notification.` | Notice shown for workflows where subscription management is disabled. |
| `preferences.workflow.disabled.tooltip` | `Contact admin to edit` | Tooltip shown for a disabled workflow preference. |


To view the latest and most complete key list, check the defaultLocalization.ts file.


## Localizing workflow names in preferences

To display localized names for specific workflows in the Preferences UI, use the dynamic object within the localization prop.

Each key in dynamic should match a workflow ID, and its value should be the localized workflow name.

![Localizing workflow names in preferences](/images/inbox/localizing-workflow-names.png)

```tsx
import { Inbox } from '@novu/react';

function NovuInbox() {
return (
<Inbox
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
subscriberId="YOUR_SUBSCRIBER_ID"
localization={{
dynamic: {
// use the workflowId as a key to localize the workflow name
'new-comment-on-post': 'Post comments',
'new-follower-digest': 'New Follower Updates',
}
}}
/>
)
}
export default NovuInbox;

```
1 change: 1 addition & 0 deletions content/docs/platform/inbox/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"configuration",
"advanced-customization",
"prepare-for-production",
"localization",
"tenants",
"headless",
"migration-guide"
Expand Down
Binary file added public/images/inbox/localization.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/inbox/localizing-workflow-names.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading