Drop-in localization

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:

1
<script slot="locale" type="application/json">
2
  {
3
    "code": "en-US",
4
    "messages": {
5
      ...
6
    }
7
  }
8
</script>

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:

1
{
2
  "Counterparts": "Suppliers",
3
  "Counterpart Name": "Supplier Name",
4
  "Sales": "销售量",
5
  "Invoices": "Rechnungen",
6
  "Create New": "Создавать новое"
7
}

Usage example

The following snippet shows an example localization object with detailed messages object:

1
<script slot="locale" type="application/json">
2
  {
3
    "code": "en-US",
4
    "messages": {
5
      "Counterparts": "Suppliers",
6
      "Counterpart Name": "Supplier Name",
7
      "Sales": "Incoming transactions",
8
    }
9
  }
10
</script>

After completion, all occurrences of the localization object’s keys in the Drop-in UI will be replaced with the corresponding values provided.