Localizations

i18n files

As we saw in the manifest.json example, some parameters take values of the form widget.name, widget.description, advanced.title. These items are needed if the widget will work with more than one language.

In this case, you need to create localization files for the provided languages. Kommo supports English, Spanish and Portuguese languages, and the corresponding files should be named en.json, es.json and pt.json and they should exist in the i18n folder. Then, depending on the language of the account, messages will be available in the appropriate language for both the UI/UX and backend.

Very important note:

If 2 localizations are used, it is necessary that both i18n files are the same in structure.

Example

i18n/en.json

{
    "widget":{
        "name":"My Widget",
        "short_description":"Short description",
        "description":"Full description",
        "tour_description":"Tour description"
    },
    "settings":{
        "login":"User login",
        "api_key":"API key",
        "account":"Account"
    },
    "advanced":{
        "title":"Settings menu item title"
    },
    "salesbot":{
        "button_title":"Button title",
        "button_caption":"Button caption",
        "button_title_default_value":"Button title",
        "button_caption_default_value":"Button caption",
        "text":"Text",
        "number":"Number",
        "url":"URL",
        "handler_name":"Handler name"
    },
    "dp":{
        "message": "Message"
    }
}

i18n/es.json

{
    "widget":{
		"name":"Mi Widget",
        "short_description":"Descripción corta",
        "description":"Descripción completa",
        "tour_description":"Descripción de Tour"
    },
    "settings":{
        "login":"Inicio de sesión",
        "api_key":"Clave API",
        "account":"Cuenta"
    },
    "advanced":{
        "title":"Título del menú de Ajustes"
    },
    "salesbot":{
        "button_title":"Título de botón",
        "button_caption":"Descripción del botón",
        "button_title_default_value":"Título de botón",
        "button_caption_default_value":"Descripción del botón",
        "text":"Texto",
        "number":"Número",
        "url":"URL",
        "handler_name":"Nombre del gestor"
    },
    "dp":{
        "message": "Mensaje"
    }
}

As an example of where the localizations appear, the settings will appear in the integration modal window in the two defined languages.


The localization files are also used in the widget’s JS part. To get an object from language files, use the self.i18n(‘key’), where key is the name of the object that needs to be extracted, and its value exists in the localization file.

For example, you can get the widget name in the JS, by writing 

self.i18n('widget').name

Details about the method in the widget’s script.JS.

Next, let’s discuss the types of fields we can see in the manifest.json.