Localizing Chat

By default, all labels in Chat are defined in English, but you can provide custom translations for:

  • date formats;
  • labels of the main tabs ("chats", "users");
  • labels of the buttons;
  • warning messages.

The Chat widget package includes only en-US locale. Check our Locales repository for the language you need or create your own locale. Feel free to contribute your successful translation.

Locale Structure

Chat titles are stored in the following object:

export default {
  "Add members": "Add members",
  "Are you sure to leave this chat?": "Are you sure to leave this chat?",
  Avatar: "Avatar",
  "Are you sure to delete this member?": "Are you sure to delete this member?",
  Cancel: "Cancel",
  "Change avatar": "Change avatar",
  "Chat info": "Chat info",
  "Chat name": "Chat name",
  Chats: "Chats",
  "Create group": "Create group",
  Delete: "Delete",
  "Delete member": "Delete member",
  "Edit chat": "Edit chat",
  Leave: "Leave",
  "Leave chat": "Leave chat",
  member: "member",
  members: "members",
  Members: "Members",
  "New chat": "New chat",
  "No people to add": "No people to add",
  People: "People",
  Save: "Save",
  Search: "Search",
  "Show all members": "Show all members",
  Users: "Users",
  You: "You",
};

Specifying Custom Locale

To change the default locale, you need to perform the following steps:

  • Set custom translations by creating the needed locale (below it is "ru") within the chat.locales object:
// Russian translations
chat.locales.ru = {
  "New chat": "Новый чат",
  Members: "Участники"
};
  • Define the current locale for Chat. For these purposes, set the locale property of Chat in its constructor:
// use custom scrolls, optional
if (!webix.env.touch && webix.env.scrollSize) 
  webix.CustomScroll.init();
 
webix.ui({
  view: "chat",
  locale: {
    lang: "ru",
    webix: {
      // switch all webix widgets to the selected locale
      ru: "ru-RU"
    },
  },
  token,
  url: "https://docs.webix.com/chat-backend/"
});

Related sample:  Chat: Custom Locale

How to Switch Locales at Runtime

You can change languages dynamically, e.g. by clicking related switch buttons in the toolbar.

  • First, set custom translations to the desired labels:
chat.locales.ru = {  // Russian
  "Add members": "Добавить в чат", ...
};
 
chat.locales.zh = {  // Chinese
  "Add members": "新增成员" ...
};
  • Switch between languages using Chat "locale" service and its setLang method:
{
  view: "segmented",
  options: ["en", "ru", "zh"],
  width: 250,
  click: function() {
    const locale = $$("ch1").getService("locale");
    locale.setLang(this.getValue());
  }
}

Related sample:  Chat: Switching Locales

How to Synchronize Chat and Webix Locale

The built-in labels of Webix components within the Chat, as well as date and number localization depend on the current Webix locale in use. To synchronize localizations of Chat and Webix, define webix parameter in the locale setting of the Chat constructor:

{
  view:"chat",
  url: "https://docs.webix.com/chat-backend/"
  locale: {
    lang: "en",
    webix: {
      // switch Webix the selected locale
      en: "en-US",
      zh: "zh-CN"
    }
  }
}
Back to top