Change and translate the wording
Choose English, German, French or Italian for each UI, write your inboxes' copy in each, and replace the agent UI's own strings.
Both UIs ship in English, German, French and Italian. The package's own strings are fixed per language; the copy that belongs to your team, such as an inbox's title or the promise about replies, comes from your config, one entry per language.
Choose the language
The agent UI takes locale, 'en', 'de', 'fr' or 'it'. Pass the agent's own preference from your app:
import { HelpdeskAdmin } from 'better-helpdesk/admin';
export default async function Page() {
const locale = await agentLocale(); // 'en', 'de', 'fr' or 'it', however your app stores it
return <HelpdeskAdmin api="/api/helpdesk" basePath="/helpdesk" locale={locale} />;
}The widget and HelpdeskConversations take locale as well. Leave it out and the widget follows the browser's language: German for any de variant, French for any fr variant, Italian for any it variant, English for everything else.
Write your inboxes' copy in every language
The texts customers and agents read about an inbox are given per locale in its config:
export const helpdesk = buildHelpdesk({
// ...
inboxes: {
support: {
name: { en: 'Support', de: 'Kundendienst', fr: 'Service client', it: 'Servizio clienti' },
title: { en: 'Help and support', de: 'Hilfe und Support', fr: 'Aide et support', it: 'Aiuto e supporto' },
replyPromise: {
en: 'We answer within a working day.',
de: 'Wir antworten innerhalb eines Arbeitstags.',
fr: 'Nous répondons sous un jour ouvrable.',
it: 'Rispondiamo entro un giorno lavorativo.',
},
},
},
});title and replyPromise are the widget's header and its promise about replies; name is what agents see instead of the inbox's key. A language you leave out counts as unset for that language: the widget shows its default title and promise, and the agent UI shows the key, capitalized. The qualifying question's label, each option's label and badge, and a custom field's label need English and show it for a language you leave out, so a language added to the package never breaks your build. The inboxes reference lists every field, and the configuration reference covers teamName and agentTitles, which name your team and your agents per language.
Agents can change one more text without a deploy: the confirmation the widget shows after a first message, under Settings in the agent UI.
Replace the agent UI's strings
HelpdeskAdmin takes messages, a map from the package's string keys to your text. It applies to whichever language is showing, so pick the map by locale:
import { HelpdeskAdmin } from 'better-helpdesk/admin';
const messages = {
en: { 'admin.inbox': 'Queue', 'agentType.billing': 'Billing' },
de: { 'admin.inbox': 'Warteschlange', 'agentType.billing': 'Abrechnung' },
fr: { 'admin.inbox': 'File d’attente', 'agentType.billing': 'Facturation' },
it: { 'admin.inbox': 'Coda', 'agentType.billing': 'Fatturazione' },
};
export default async function Page() {
const locale = await agentLocale();
return (
<HelpdeskAdmin api="/api/helpdesk" basePath="/helpdesk" locale={locale} messages={messages[locale]} />
);
}UI strings lists every key with its English, German, French and Italian text. Strings with placeholders such as {name} or {count} keep them in your text, and the values fill in as before.
The same map names your own conversation types and stages. A custom type billing reads as agentType.billing, and a custom lead or deal stage trial as stage.trial. Without an entry, the agent UI shows the key itself.
The widget has no such map. Its strings stay the package's own, and a custom type shows in it under its key, so give your types keys that read well to customers.
Emails
The package does not write your emails' wording; your email adapter does. Each message carries a locale. For a customer, it is the locale that identify or their identity token gave when they first wrote in, or, for a visitor, the language of the widget they wrote from; failing both, en. Agent emails always carry en. Send email covers the adapter.