Adding Support For Multiple Languages

Reading time: 5 mins

Introduction

Today, every application aims to provide its users localized content in their language of choice.  With Weavy, adding support to multiple languages for your in-app chat and collaboration features is easy. The default user interface language is English, but by doing minimal changes, you can set up support for any language of your choice. Let’s get started.

Resource Files

Weavy uses resource files to separate localizable strings from the code. Localizable strings are those strings whose translation should be done. These files are key-value pairs, where the key is the English string that should be translated, and the value is the translated string in the other language.  You can find the resource files inside the Server SDK at Resources/Resources.txt and Scripts/resources/resources.js.  It contains all the strings that need to be translated.

Placeholders

You will notice that some keys in the resource files contain curly brackets.  This means that they should not be removed while translating into another language.  For example, the English string "{0} is required" translated to Swedish would look like “{0} måste fyllas i”.  Placeholders allow for the insertion of dynamic content. They need to appear in the translated text even if they are moved around for the sake of syntax.

Example: Translating to Swedish

Step 01

The first step is to find out the language code of your new language by using this link.  So, sv is the language code for the Swedish language.

Step 02

Next, we need to create a resource file for our language.  Create files Resources.sv.txt inside Resources directory and resources.sv.js inside Scripts/resources directory.

Step 03 

Translate all keys in the files into Swedish inside Resources.sv.txt and resources.sv.js.

Step 04

Now, it’s time to configure weavy to use this language.  Inside the web.config file you need to place the language setting like this:

<appSettings>
<add key="weavy.languages" value="en, sv" />
<!-- etc -->
</appSettings>

Find the appSettings tag and add the key-value as described above.  Note that the language you place first will be the default language of the user interface.  You can add multiple languages, all separated by a comma. 

Step 05

To use localized strings in the current language of choice, you must use the localization helpers provided by Weavy:

  • If you want to use them inside views, i.e. for .cshtml pages, you must use the T[“key”] helper. 

Example:  <p>@T["This is a resource key"]</p>

  • If you want to use them inside javascript files, you must use the wvy.t("key") helper.

Example: var localized = wvy.t("This is a resource key");

Conclusion

Using these 5 steps, Weavy can provide support for any language.  The entire process is just about creating the appropriate resource files, translating all keys into that files, adding the language code inside the weavy configuration, and, finally, using it with help of localization helpers. Now you can easily create multi-language variations for your chat apps built with Weavy.