Can’t read, won’t buy
How do you make your app sound authentic such that it stands out in our crowded marketplace? Many businesses underestimate the importance of engaging their global audience through a language that resonates closely with them. Being a global company isn’t just about growing the business — it’s also important that the product and content sound authentic within the targeted locales.
A survey from the CSA research team involving 8,709 Consumers in 29 countries proves that 76% prefer purchasing products with information in their language.
Crayons, a refreshed design library for Freshworks’ developers, witnessed a major version update this March. This update of crayons v3 comes with support for more than 18 new components and many exciting features including Internationalization (i18n) support — allowing you to build multilingual interfaces.
In this article, let’s see how to add localization support to your marketplace apps through the new crayons utility.
Internationalization Support (i18n)
In the new crayons update, first-class i18n support is available through the use of the @freshworks/crayons-i18n package. Thus, you no longer need to rely on any external third-party npm packages. Crayons handles the heavy-lifting for you!
Translations are applied, on an HTML element, in relation to the language attribute. Whenever the attribute changes, the corresponding strings of that language are used.
Not limiting to this, you can also programmatically set a language using the TranslationController.setLang(<<pass lang here>>) method. Once the language is set, the components show the appropriate localized content.
Let’s try to understand this better through a similar React example.
It’s a simple react app with the date-picker and select components. Try switching between the languages to see the corresponding changes in the language strings.
Sounds a little daunting? Worry not! Let’s break down the previous example and understand it better.
To use the localisation package with existing applications that use crayons, set the translation object in translationController as follows:
// In case of javascript:
import { TranslationController } from "@freshworks/crayons";// In case of react:
import { TranslationController } from
"@freshworks/crayons/react";
TranslationController.setTranslations({
//en :{...custom translation object},
//de :{...custom translation object},
})
Now, set the language by using the setLang method as follows:
TranslationController.setLang(<your language code here>);Interpolation
Interpolation is one of the most used functionalities in i18n. To apply interpolation within the translation keys, use the following format:
{
"key": "hello {{world}}"
}TranslationController.t('key', { world: 'great' });
// -> "hello world"
By default, keys are strings surrounded by curly brackets.
There is an undeniably strong link between in-language content and a consumer’s likelihood of making a purchase. What are you waiting for? We can’t wait to see you build your next app with internationalization capabilities from crayons out of the box.
To know more about crayons and other new existing features — https://crayons.freshworks.com/
Looking to contribute? Browse through the contributor guidelines and feel free to raise issues/build components with us.
