Internationalization and Localization

Prerequisites

This example specifically requires completion of all setup steps listed on the following White Label sub-pages:

1. Prerequisites page.

2. Installation page.

GLChat UI uses JSON files to store translations. By default, GLChat UI supports English (en) and Indonesian (id).

Translation list for en (this is a TypeScript file):

102KB

en.ts

Open

Translation list for id:

105KB

id.ts

Open

You can override the translation by providing your own JSON file. For example, you can create the following JSON file to change the copywriting for disclaimer section.

{
  "en": {
    "error": {
      "badRequest": {
        "title": "We're sorry but there's been an error",
        "description": "We couldn't process your request. Please try again.",
        "button": "Retry here"
      }
    }
  },
  "id": {
    "error": {
      "badRequest": {
        "title": "Ada masalah",
        "description": "Kami tidak dapat memproses permintaan tersebut. Silakan coba lagi.",
        "button": "Ulangi lagi"
      }
    }
  }
}

To make GLChat UI use the above JSON file, host it in a URL accessible by GLChat UI container image and then add the following environment variable into GLChat UI docker container:

# Adjust http://localhost:8080/i18n.json with your actual URL that returns the JSON file
CUSTOM_I18N_URL=http://localhost:8080/i18n.json

If you recreate the GLChat UI docker container and visit http://localhost:3000 you will see that the copy writing has changed:

If you want to check the id translation, visit http://localhost:3000/id .