Translating Overlay UI texts

Modified on Tue, 16 Jun at 2:42 PM

 


We added the possibility for cloud and on-prem customers to translate also texts in Overlay's user interface, like buttons and labels. We understand that this is a feature that a lot of our customers appreciate and decided to provide this service. Below you will find the ways this can be accomplished.



 


How to Translate User Interface Texts

Through Excel sheet


We can send you an Excel sheet where you fill in the buttons and text you want to translate + the translation. We change the translation.json file for you and upload it to your cloud server. 


Through translation.json file


You can request this file to us, perform the translation and send it back. We will test and upload it to your server. Below is an ex. of what you will receive. This can be edited, opening in Notepad++ (Windows) or TextEdit (mac).


[
    {
        "language": "en_US",
        "translations": {
            "handle_title": "Help?",
            "menu_title": "How can we help you?",
            "menu_emptyText": "Please, refine your search.",
            "menu_missingSections": "Missing content of sections.",
            "menu_searchForIt": "Search for it",
            "menu_notAssigned": "Not assigned.",
            "menu_noJourneysAssigned": "No Journeys assigned to this Playbook yet.",
            "menu_appLanguageTitle": "Help language",
            "menu_appLanguageNote": "Defines how the help speaks to you",
            "menu_contentLanguageTitle": "Content language",
            "menu_contentLanguageNote": "What is the language used on the site",
            "menu_languageSettings": "User Settings",
            "menu_userSettings_currentUser": "Current User",
            "menu_userSettings_settings": "Settings",
            "menu_userSettings_warnings": "Warnings",
            "menu_userSettings_unknownUser": "Unknown",
            "menu_userSettings_changeUser": "Set your identity",
            "menu_userSettings_editUser": "Edit",
            "menu_userExperienceTitle": "User Experience",
..



How to apply translations changes for customers with on premise deployment


Docker installation

1. Get translation.json
After the Newired container starts for the first time, the shared/ folder will also contain shared/apps/overlay.zip. This file includes translations.json.


2. Edit translation.json

  1. Unzip overlay.zip
  2. Update the translations in translations.json to your desired text. For example the handle title has key handle_title.
  3. Zip the folder back into shared/apps/overlay.zip.


Docker Instalation (25.2.0 and older)

1. Check Running Containers
   List Docker containers to find your Portal's ID using the command:

   

docker ps

CONTAINER ID   IMAGE                     COMMAND               
12b9b7b09a58   newired-portal:26.2.0     "/bin/sh -c ./docker…" ..
32ccc1a67b05   newired-minio:26.2.0      "/usr/bin/docker-ent…" ..


2. Copy overlay.zip
  
Use the command docker cp to copy the overlay.zip from the container to your local environment (data/shared/overlay.zip), replacing <container_id> with your Portal's actual ID:

docker cp <container_id>:/opt/Newired/apps/overlay.zip shared/app/overlay.zip


3. Edit translation.json

  1. Unzip overlay.zip
  2. Update the translations in translations.json to your desired text. For example the handle title has key handle_title.
  3. Zip the folder back into data/apps/overlay.zip


4. Update Docker Compose
   
In your docker-compose.yml add the volume mapping  - ./data/apps/overlay.zip:/opt/Newired/apps/overlay.zip under the portal service:  
   

   services:
     portal:
       volumes:
         - ./data/apps/overlay.zip:/opt/Newired/apps/overlay.zip

5. Redeploy
   Run the command 
docker-compose up -d to apply the changes.  


Legacy Installer installation

The translation.json file can be found on your server on the following path


C:/Newired/tomcat/webapps/newired/WEB-INF/classes/launcher/package/translations.json


Use the method above and save to your server with the same name and format.


How to translate
To add new language into translation.json add a new key for example:

[
    {
        "language": "en_US",
        "translations": {
            "handle_title": "Help?",
            ..
        }
    },
    {
        "language": "it_IT",
        "translations": {
            "handle_title": "Assistenza?",
            ..
        }




Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article