> ## Documentation Index
> Fetch the complete documentation index at: https://platform.docs.zenoo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Localization

> All about localization

### Localization

HUB Client has built-in support for multiple locales and an easy way to manage translations.

All translation keys are being stored in `src/translates` folder under appropriate YAML files: `{LANG}.yml` and should be described in `index.yml` project configuration file:

```yaml theme={null}
defaultLocale: "en"
translates:
  en: !include ./translates/en.yml
```

Translations can be stored under nested keys, e.g.

```yaml theme={null}
# translates/en.yml
welcome:
  text: "Automated real-time identity authentication & decisioning."
  button: "Lets get started"

otp:
  title: "Enter your confirmation code"
  text: "We've sent a confirmation code to your phone number"

...

# Page configuraion
- !component as: Heading
  items: !t "welcome.text"
- !component as: SubmitButton
  text: !t "welcome.button"
```

In order to use translation key with some parameter, the following notation can be used:

```yaml theme={null}
# translates/en.yml
welcome:
  text: "Some text with {param}"

...

# Page configuraion
!t text: "welcome.text"
param: "Zenoo"

# Expression can be used as well
!t text: "welcome.text"
param: !expression "flow.export.param"
```

There are two ways to use translations in YAML:

* Use the `!t` function. It can value for any property in any object.
* Use `!expression` and call the function `t`.

To change locale, use the action `changeLocale`, in which the first parameter is target locale name.

**Examples:**

```yaml theme={null}
# Evaluate translation for given translation key
- !t translation_key

# Evaluate translation for dymanic translation key (e.g. error coming from Backend)
- !expression t(flow.export.translation_key)
```

#### Markdown and HTML content in translations

Translation key value can have string, HTML or Markdown as a value:

```yaml theme={null}
welcome:
  string: "Welcome"
  text1: !html |
    <h1>Welcome to our <b>website</b></h1>
    <br />
    Please provide some information
  text2: !markdown |
    # Welcome to our **website**

    Please provide some information
```

In order to use Markdown/HTML you need to use `!te` tag instead of `!t`:

```yaml theme={null}
# String
- !component as: Paragraph
  items: !t "welcome.string"

# Markdown
- !component as: Paragraph
  items: !te "welcome.text1"

# HTML
- !component as: Paragraph
  items: !te "welcome.text2"
```