4. How to Manage Translations

The Translations module is your single source of truth for every short text element in the Client Area—buttons, labels, tooltips, error messages, and more. By centralizing all keys and their localized values here, you ensure consistency across the entire UI and make it easy to keep every language up to date.

To translate short elements (e.g., buttons), go to Client Area > Translations. You will see a list of all currently available items. The Text column will show in which language they are available.

To add a translation of an element:

1. Open the Translations table

Go to Client Area > Translations. You’ll see a paginated list of all keys (labels) and their current localized text.

2. Locate the entry you want to update

Scroll or use the search bar (see next section) to find the exact label.

3. Click the ✏️ Edit icon in the Actions column. This opens the Edit translation drawer on the right.

4. Select your target language

At the top of the drawer, you’ll see buttons for each Active locale (pulled from your Languages configuration). Click the one you need to update—for example, Es for Spanish.

5. Clone translations from

To copy all existing text from another language into your current locale (without translating), open the “Select” dropdown, pick the source language (e.g. English), and click Clone. This instantly duplicates those fields as-is.

6. Translating flow

To programmatically generate translations, click Translate in the drawer header, then choose your provider (OpenAI, etc.) from the Integration dropdown. The system will pull translated strings and populate every field.

Tip: Cloning and translating are independent—feel free to clone first and then auto-translate, or translate first and use cloning to reset individual entries.

7. Save your changes

Hit Save at the bottom of the drawer. A success toast confirms the update—and the table immediately reflects your new string.

To easily search for an element:

Type in the Search field at the top of the Translations page.

It filters by Label (the key) or by any snippet of Text in any language.

Clear the search box (✕) to return to the full list.

Note: Adding custom elements is intended for development purposes only. The translation object label should be added to the code by developers. Otherwise, if you add a label just with this functionality, it will not be displayed anywhere on the page.

To add a custom element:

Important: Before using this feature, your developers must have wired the new key into the front-end code. Otherwise the UI won’t reference it, and your translations won’t appear anywhere.

1. Click the + Add button in the top-right.

2. Define your Label

Enter a unique identifier that your code will reference (e.g. checkout.confirmButton).

3. Choose one or more Languages

Check the locales you want to initialize. Only Active languages appear here.

4. Enter your Text for each

For each selected language tab, fill in the string.

5. Save

Clicking Save creates the new row. Now developers can pull that key into the UI.

You can also delete current items using the Delete icon. Before deletion, make sure you are no longer use the item in your product.

Best Practices

• Consistent Label Naming: Use a predictable case style (camelCase or snake_case) across all keys.

• Complete Every Locale: When adding or editing, fill in all active languages to avoid fallbacks or missing copy.

• Leverage “Show All”: Always expand and scan every locale before saving to catch any stale or missing translations.

• Coordinate with Development: New keys must be added to the codebase first—coordinate with your engineers to avoid orphan labels.

• Clean Up Periodically: Remove unused or obsolete keys to keep the list lean and maintainable.

By following these steps and best practices, you can ensure that every button, message, and tooltip in your Client Area is accurately translated—and that your users enjoy a fully localized, consistent experience.