|
| 1 | +--- |
| 2 | +pageTitle: 'Localizing the Inbox component' |
| 3 | +title: 'Localization' |
| 4 | +description: 'Learn how to customize the Inbox UI for different languages using the localization prop.' |
| 5 | +icon: 'Globe' |
| 6 | +--- |
| 7 | + |
| 8 | +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. |
| 9 | + |
| 10 | +<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> |
| 11 | + |
| 12 | +## Using the localization prop |
| 13 | + |
| 14 | +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. |
| 15 | + |
| 16 | +If you omit any keys, the component will fall back to the default `en-US` values. |
| 17 | + |
| 18 | + |
| 19 | + |
| 20 | +```tsx |
| 21 | +import { Inbox } from '@novu/react'; |
| 22 | + |
| 23 | +function NovuInbox() { |
| 24 | + return ( |
| 25 | + <Inbox |
| 26 | + applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" |
| 27 | + subscriberId="YOUR_SUBSCRIBER_ID" |
| 28 | + localization={{ |
| 29 | + 'inbox.filters.dropdownOptions.unread': 'Unread only', |
| 30 | + 'notification.actions.archive.tooltip': 'Move to archive', |
| 31 | + 'preferences.title': 'My Preferences', |
| 32 | + locale: 'en-US', |
| 33 | + }} |
| 34 | + /> |
| 35 | + ); |
| 36 | +} |
| 37 | + |
| 38 | +export default NovuInbox; |
| 39 | +``` |
| 40 | + |
| 41 | +<Callout>Localization is also fully supported in @novu/react-native. </Callout> |
| 42 | + |
| 43 | +## Available localization keys |
| 44 | + |
| 45 | +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. |
| 46 | + |
| 47 | +### Filters |
| 48 | + |
| 49 | +| Key | Default Value | Description | |
| 50 | +| ---------------------------------------- | --------------- | -------------------------------------- | |
| 51 | +| `inbox.filters.dropdownOptions.unread` | `Unread only` | Text for the "unread" filter option. | |
| 52 | +| `inbox.filters.dropdownOptions.default` | `Unread & read` | Text for the default filter option. | |
| 53 | +| `inbox.filters.dropdownOptions.archived` | `Archived` | Text for the "archived" filter option. | |
| 54 | +| `inbox.filters.dropdownOptions.snoozed` | `Snoozed` | Text for the "snoozed" filter option. | |
| 55 | +| `inbox.filters.labels.unread` | `Unread` | Label for the unread tab. | |
| 56 | +| `inbox.filters.labels.default` | `Inbox` | Label for the main inbox tab. | |
| 57 | +| `inbox.filters.labels.archived` | `Archived` | Label for the archived tab. | |
| 58 | +| `inbox.filters.labels.snoozed` | `Snoozed` | Label for the snoozed tab. | |
| 59 | + |
| 60 | +### Notifications |
| 61 | + |
| 62 | +| Key | Default Value | Description | |
| 63 | +| ----------------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | |
| 64 | +| `notifications.emptyNotice` | `Quiet for now. Check back later.` | Message displayed when the notification list is empty. | |
| 65 | +| `notifications.actions.readAll` | `Mark all as read` | Text for the action to mark all notifications as read. | |
| 66 | +| `notifications.actions.archiveAll` | `Archive all` | Text for the action to archive all notifications. | |
| 67 | +| `notifications.actions.archiveRead` | `Archive read` | Text for the action to archive all read notifications. | |
| 68 | +| `notifications.newNotifications` | ``({ notificationCount }: { notificationCount: number }) => `${notificationCount} new notification(s)` `` | A function that returns the string for the new notifications indicator. | |
| 69 | +| `notification.snoozedUntil` | `Snoozed until` | Text displayed before the unsnooze time on a snoozed notification. | |
| 70 | + |
| 71 | +### Notification actions (Tooltips) |
| 72 | + |
| 73 | +| Key | Default Value | Description | |
| 74 | +| ---------------------------------------- | ---------------- | ---------------------------------------- | |
| 75 | +| `notification.actions.read.tooltip` | `Mark as read` | Tooltip for the "mark as read" action. | |
| 76 | +| `notification.actions.unread.tooltip` | `Mark as unread` | Tooltip for the "mark as unread" action. | |
| 77 | +| `notification.actions.archive.tooltip` | `Archive` | Tooltip for the "archive" action. | |
| 78 | +| `notification.actions.unarchive.tooltip` | `Unarchive` | Tooltip for the "unarchive" action. | |
| 79 | +| `notification.actions.snooze.tooltip` | `Snooze` | Tooltip for the "snooze" action. | |
| 80 | +| `notification.actions.unsnooze.tooltip` | `Unsnooze` | Tooltip for the "unsnooze" action. | |
| 81 | + |
| 82 | +### Snooze menu |
| 83 | + |
| 84 | +| Key | Default Value | Description | |
| 85 | +| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | |
| 86 | +| `snooze.options.anHourFromNow` | `An hour from now` | Text for the "snooze for one hour" option. | |
| 87 | +| `snooze.options.inOneDay` | `Tomorrow` | Text for the "snooze for one day" option. | |
| 88 | +| `snooze.options.inOneWeek` | `Next week` | Text for the "snooze for one week" option. | |
| 89 | +| `snooze.options.customTime` | `Custom time...` | Text for the option to open the custom date picker. | |
| 90 | +| `snooze.datePicker.timePickerLabel` | `Time` | Label for the time input in the date picker. | |
| 91 | +| `snooze.datePicker.apply` | `Apply` | Text for the "Apply" button in the date picker. | |
| 92 | +| `snooze.datePicker.cancel` | `Cancel` | Text for the "Cancel" button in the date picker. | |
| 93 | +| `snooze.datePicker.pastDateTooltip` | `Selected time must be at least 3 minutes in the future` | Tooltip shown when a past time is selected. | |
| 94 | +| `snooze.datePicker.noDateSelectedTooltip` | `Please select a date` | Tooltip shown when applying without selecting a date. | |
| 95 | +| `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. | |
| 96 | + |
| 97 | + |
| 98 | +### Preferences |
| 99 | + |
| 100 | +| Key | Default Value | Description | |
| 101 | +| --------------------------------------- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------- | |
| 102 | +| `preferences.title` | `Preferences` | The main title of the preferences screen. | |
| 103 | +| `preferences.emptyNotice` | `No notification specific preferences yet.` | Message shown when no workflow preferences are available. | |
| 104 | +| `preferences.global` | `Global Preferences` | Title for the global preferences section. | |
| 105 | +| `preferences.group.info` | `Applies to all notifications under this group.` | Informational text for grouped preferences. | |
| 106 | +| `preferences.workflow.disabled.notice` | `Contact admin to enable subscription management for this critical notification.` | Notice shown for workflows where subscription management is disabled. | |
| 107 | +| `preferences.workflow.disabled.tooltip` | `Contact admin to edit` | Tooltip shown for a disabled workflow preference. | |
| 108 | + |
| 109 | + |
| 110 | +To view the latest and most complete key list, check the defaultLocalization.ts file. |
| 111 | + |
| 112 | + |
| 113 | +## Localizing workflow names in preferences |
| 114 | + |
| 115 | +To display localized names for specific workflows in the Preferences UI, use the dynamic object within the localization prop. |
| 116 | + |
| 117 | +Each key in dynamic should match a workflow ID, and its value should be the localized workflow name. |
| 118 | + |
| 119 | + |
| 120 | + |
| 121 | +```tsx |
| 122 | +import { Inbox } from '@novu/react'; |
| 123 | + |
| 124 | +function NovuInbox() { |
| 125 | + return ( |
| 126 | + <Inbox |
| 127 | + applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" |
| 128 | + subscriberId="YOUR_SUBSCRIBER_ID" |
| 129 | + localization={{ |
| 130 | + dynamic: { |
| 131 | + // use the workflowId as a key to localize the workflow name |
| 132 | + 'new-comment-on-post': 'Post comments', |
| 133 | + 'new-follower-digest': 'New Follower Updates', |
| 134 | + } |
| 135 | + }} |
| 136 | + /> |
| 137 | + ) |
| 138 | +} |
| 139 | +export default NovuInbox; |
| 140 | + |
| 141 | +``` |
0 commit comments