> This page is for version v2024-01-31.
> For other versions, use one of these documentation indexes:
> - v2024-05-25 (default): https://docs.monite.com/v-2024-05-25/llms.txt
> - v2024-01-31: https://docs.monite.com/v2024-01-31/llms.txt
> - v2023-09-01: https://docs.monite.com/v2023-09-01/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.monite.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.monite.com/_mcp/server.

# Drop-in localization

## Overview

Monite's [Drop-in library](./index) supports 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 as shown:

```js
const dropinConfig = {
  entityId: 'ENTITY_ID',
  apiUrl: 'ENVIRONMENT_URL',
  locale: {
    code: 'en-US',
    messages: {
      Sales: 'Invoicing',
      Counterparts: 'Customers',
    },
  },
  fetchToken: async function fetchToken() {...}, 
};

const dropin = new MoniteDropin(dropinConfig);

dropin.create(component).mount(...);

```

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](https://en.wikipedia.org/wiki/IETF_language_tag#Syntax_of_language_tags) 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](https://github.com/team-monite/monite-sdk/blob/main/packages/sdk-react/src/core/i18n/locales/en/messages.po)—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:

```json
{
  "Counterparts": "Suppliers",
  "Counterpart Name": "Supplier Name",
  "Sales": "销售量",
  "Invoices": "Rechnungen",
  "Create New": "Создавать новое"
}
```

> **Note**
>
> To successfully update properties, the localization object that contains your custom localization must be JSON-compliant.