Drop-in localization
Learn how to rename and localize UI labels in Monite's Drop-in library.
Overview
Monite’s Drop-in library support a localization mechanism. The library defaults to the browser’s locale for handling localization within UI components. However, you can explicitly define localization using the code
property on the locale object.
Use Monite’s custom localization mechanism for any of purposes:
- To define currency formatting and usage of delimiters and decimal separators using the
code
property. - To define date formats by country or region using the
code
property. - To customize any text labels in the widgets (for example, rename “Counterpart Name” to “Supplier Name”).
- To translate the labels into one or more other languages.
Localization mechanism
To customize the Drop-in library, you must define your localization object within the script
tag in your HTML. The script
tag that contains your custom localization is assigned an slot
attribute with a value of locale
as shown:
The script
tag containing the localization object must be a child of the Drop-in library’s monite-app
element.
The code
prop on the locale object is an optional property that handles the usage of delimiters and decimal separators for different currency regions. It also handles the date formatting across various UI components. The accepted format for the code
property must adhere to the BCP-47 language tag standard.
The messages
prop is an object used to define text translations and customizations. In the messages
object:
- The keys represent the text labels in the Drop-in library’s UI that you wish to replace. You can find all available keys on Monite’s Portable Object template—look for the
msgid
strings. The keys match the exact text labels that you see in the UI. - The values are the new text to use in place of the object’s keys. Values can be of any language, and you can customize these values as required.
Any other labels not specified in the messages
object will keep their original text. The following snippets shows how to handle translations and customizations on the messages
object:
To successfully update properties, the localization object that contains your custom localization must be JSON-compliant.
Usage example
The following snippet shows an example localization object with detailed messages
object:
After completion, all occurrences of the localization object’s keys in the Drop-in UI will be replaced with the corresponding values provided.