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

# Internationalization

> Unlock global communities with effortless internationalization support

**LI.FI Widget** supports internationalization (i18n) and, with the help of our community, is translated into multiple languages to provide a localized user experience to your users, making it easier for them to understand and interact with the widget.

See supported languages and help us translate by [**joining**](https://crowdin.com/project/lifi-widget) our translation projects on [**Crowdin**](https://crowdin.com/project/lifi-widget):

![https://crowdin.com/project/lifi-widget](https://badges.crowdin.net/lifi-widget/localized.svg)

## Configure languages

By default, the widget is in English. You can configure the default language, which languages you want to show inside the widget, or in which language your users can see the widget if you hide the in-built language selection.

There are `allow`, `deny`, and `default` options for language configuration.

```typescript theme={"system"}
import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  // hide the language selection part of the UI
  // hiddenUI: { language: true },
  languages: {
    // default to German
    default: 'de',
    // allow German and Spanish languages only
    allow: ['de', 'es'],
    // disable Chinese from being shown in the languages list
    // deny: ['zh'],
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};
```

## Language Resources

You can customize the widget to support any language that your dApp needs by providing language resources.

Rather than trying to add a language via config, it's best to first consider helping us to translate the language you need by joining our [Crowdin translation project](https://crowdin.com/project/lifi-widget). 🙂

<CodeGroup>
  ```typescript widget.tsx theme={"system"}
  import { LiFiWidget, WidgetConfig } from '@lifi/widget';
  import es from './i18n/es.json';

  const widgetConfig: WidgetConfig = {
    languageResources: {
      es,
    },
  };

  export const WidgetPage = () => {
    return (
      <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
    );
  };
  ```

  ```json i18n/es.json theme={"system"}
  {
    "language": {
      "name": "Español",
      "title": "Idioma"
    }
  }
  ```
</CodeGroup>

Also, you can customize the existing language resources if you want to adjust some text. Find the complete list of key-value pairs in the reference `en.json` in our repository [here](https://github.com/lifinance/widget/blob/main/packages/widget/src/i18n/en.json).

```typescript theme={"system"}
import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  languageResources: {
    en: {
      button: { swap: 'Test swap' },
    },
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};
```