# Internationalization
## Overview
Nectar is multi-lingual. It supports Internationalization (i18n) and Right-to-Left languages such as Arabic, Hebrew etc.
It uses [i18next](https://www.i18next.com) library for implementing i18n.
The translation files in JSON format are present inside `/assets/custom/i18n/` folder.
By default, Internationalization (i18n) is enabled in Nectar.
## Configuration Variables
The configuration variables for i18n are present in `/assets/custom/js/config.js` file, inside `window.config.i18n` object.
```javascript
window.config.i18n = {
enabled: true, // If your app uses multiple languages, then set to true.
languages: { // List of languages your app supports, this is used to load translations and populate language selector widgets.
en: {
name: 'English',
slug: 'english',
code: 'en',
locale: 'en-UK',
dir: 'ltr',
flag: 'https://flagcdn.com/gb.svg'
},
hi: {
name: 'Hindi',
slug: 'hindi',
code: 'hi',
locale: 'hi-IN',
dir: 'ltr',
flag: 'https://flagcdn.com/in.svg'
},
ar: {
name: 'Arabic',
slug: 'arabic',
code: 'ar',
locale: 'ar-AE',
dir: 'rtl',
flag: 'https://flagcdn.com/ae.svg'
}
},
defaultLanguage: 'en', // This is the default or primary language of your app.
fallbackLanguage: 'en', // In case, if translations are not present in JSON files, then the string is translated into fallback language.
namespaces: ['common'] // These are the i18n JSON translation files without the suffix .json
}
```
## Set Primary Language
By default, the primary language for Nectar is set to `English (en)`
To change the primary language from English to any other language (suppose French), follow these steps:
1. Open `index.html` and set ``
2. In case, your primary language is RTL (suppose Arabic), then set `` Additionally, change: `` to ``
3. Now, open `/assets/custom/js/config.js` file.
4. Inside `window.config.i18n = {` change `defaultLanguage` from `en` to `fr`
5. Go to `/assets/custom/i18n/` and create a new folder `fr`
6. Inside `/assets/custom/i18n/fr/`, create a file `common.json` and add translation strings.
This way, you can set your Primary Language.
## Language Switcher
When your app is multi-lingual, you might want to provide a way for your users to switch languages. We have implemented one, and it is located at `/partials/select-language.html`
The list of available languages is populated from `window.config.i18n.languages`
## i18n Related Methods
The code which manages i18n in Nectar is present in `/assets/custom/js/init.js` inside `app.i18n = {` object.
### `app.i18n.initialize();`
This code initializes the i18n library.
### `app.i18n.currentLanguage();`
Using this, you can get the current language of the app.
### `app.i18n.changeLanguage(languageCode);`
Using this, you can change the current language of the app. For example, `app.i18n.changeLanguage('hi');`
### `app.i18n.localize();`
This code looks for all the data-i18n attributes in HTML elements and translate them. This is useful when you dynamically add elements in DOM.
### `app.i18n.translate(key, fallback, options);`
This is used to translate string present in JSON translation files. For example, `app.i18n.translate('app-title', 'Nectar', //i18next options);`
If the current language is Hindi, then this will output `'`नेक्टर`'`. If `app-title` key is not present, then the translation will fallback to `'Nectar'`.
## `languageChanged` Event
Whenever the current language of the app is changed, `languageChanged` event is emitted by the app, which you can listen to and perform required actions. For example,
```javascript
app.on('languageChanged', function(language) {
});
```
{% hint style="info" %}
Read the official documentation of i18next for advanced usage here [https://www.i18next.com](https://www.i18next.com/)
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://pmsgz.gitbook.io/nectar/basics/internationalization.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.