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.

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",
    Ringing: "Ringing...",
    "Active call": "Active call",
    "Is calling you": "Is calling you...",
    Accept: "Accept",
    Reject: "Reject",
    "Start call": "Start call",
    "Join call": "Join call",
    "End call": "End call",
    "Ended call": "Ended call",
    "Incoming call": "Incoming call",
    "Outgoing call": "Outgoing call",
    "Rejected call": "Rejected call",
    "Missed call": "Missed call",
    "Can't start the call": "Can't start the call",
    "Could not find your": "Could not find your",
    "Error opening your": "Error opening your",
    microphone: "microphone",
    camera: "camera",
    Size: "Size",
    B: "B",
    KB: "KB",
    MB: "MB",
    GB: "GB",
    "File size exceeds the limit": "File size exceeds the limit",
    "File upload error": "File upload error",
    "Smileys & People": "Smileys & People",
    "Animals & Nature": "Animals & Nature",
    Activity: "Activity",
    "Travel & Places": "Travel & Places",
    "Food & Drink": "Food & Drink",
    Objects: "Objects",
    "Search results": "Search results",
    Symbols: "Symbols",
    Basic: "Basic",
};

Specifying Custom Locale

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

1. 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: "Участники"
};

2. Define the current locale for Chat. For these purposes, set the locale property of Chat in its constructor:

// use custom scrolls, optional 
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.

1. First, set custom translations to the desired labels:

chat.locales.ru = {  // Russian
  "Add members": "Добавить в чат", ...
};
 
chat.locales.zh = {  // Chinese
  "Add members": "新增成员" ...
};

2. 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