Localization

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.

Localization only updates the UI text in the Inbox. It doesn’t translate the content of your notifications. Choose or translate the notification content in your application before triggering the workflow. UI localization does not translate the message body.

Use your application’s existing connection and authentication settings with these examples. Set up Inbox covers the application identifier, subscriber, API and WebSocket URLs, and subscriber credentials.

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, then the component reverts to the default en-US values.

Overriding the default text in the Inbox component UI using localization prop

import { Inbox } from '@wv/react';

function PortalInbox() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="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 PortalInbox;

Available localization keys

Here is a list of localization keys, 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.

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.

The complete default key list is maintained in packages/js/src/ui/config/defaultLocalization.ts in this workspace.

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.

import { Inbox } from '@wv/react';

function PortalInbox() {
  return (
      <Inbox
        applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
        subscriber="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 PortalInbox;

Getting Started

Integrate <Inbox />

Build a Workflow

Integrate Channels Providers

Account

Using the localization prop

Available localization keys

Filters

Notifications

Notification actions (tooltips)

Snooze menu

Preferences

Localizing workflow names in preferences

​Using the localization prop

​Available localization keys

​Filters

​Notifications

​Notification actions (tooltips)

​Snooze menu

​Preferences

​Localizing workflow names in preferences

Using the localization prop

Available localization keys

Filters

Notifications

Notification actions (tooltips)

Snooze menu

Preferences

Localizing workflow names in preferences