Localizing the Inbox component

Learn how to localize the pre built Inbox component

Localization Prop

The localization prop can be used to change the copywriting of the Inbox to a different language for your users or change the wording to suit your product. See the list of available keys, or use the fully typed TS auto complete to find the key you need.

import { Inbox } from '@novu/react';
 
function Novu() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
      localization={{
        // Filter dropdown options
        'inbox.filters.dropdownOptions.unread': 'Unread only',
        'inbox.filters.dropdownOptions.default': 'Unread & read',
        'inbox.filters.dropdownOptions.archived': 'Archived',
        
        // Filter labels
        'inbox.filters.labels.unread': 'Unread',
        'inbox.filters.labels.default': 'Inbox',
        'inbox.filters.labels.archived': 'Archived',
        
        // Notifications section
        'notifications.emptyNotice': 'Quiet for now. Check back later.',
        'notifications.actions.readAll': 'Mark all as read',
        'notifications.actions.archiveAll': 'Archive all',
        'notifications.actions.archiveRead': 'Archive read',
        'notifications.newNotifications': ({ notificationCount }: { notificationCount: number }) =>
          `${notificationCount > 99 ? '99+' : notificationCount} new ${
            notificationCount === 1 ? 'notification' : 'notifications'
          }`,
        
        // Individual notification actions
        'notification.actions.read.tooltip': 'Mark as read',
        'notification.actions.unread.tooltip': 'Mark as unread',
        'notification.actions.archive.tooltip': 'Archive',
        'notification.actions.unarchive.tooltip': 'Unarchive',
        
        // Preferences section
        'preferences.title': 'Preferences',
        'preferences.emptyNotice': 'No notification specific preferences yet.',
        'preferences.global': 'Global Preferences',
        'preferences.workflow.disabled.notice':
          'Contact admin to enable subscription management for this critical notification.',
        'preferences.workflow.disabled.tooltip': 'Contact admin to edit',
        
        // Set locale
        locale: 'en-US',
        
        // Dynamic localization for workflow names
        dynamic: {
          // use the workflowId as a key to localize the workflow name
          'comment-on-post': 'Post comments',
        }
      }}
    />
  );
}

On this page