Language of the nuvo importer

language

Type	"en", "de", "es", "pt", "pl", "fr", "it", "nl', "sv", "no", "cz", "dk", "hu", "lt", "ru", "sk", or "zh"
Default	en
Description	This feature enables you to choose the default language for the nuvo Importer, which can be tailored to your particular requirements. Additionally, you have the option to switch languages dynamically before initializing the importer. We currently offer support for a variety of languages, including English (en), German (de), Spanish (es), Portuguese (pt), Polish (pl), French (fr), Italian (it), Dutch (nl), Swedish (sv), Norwegian (no), Slovak (sk), Czech (cz), Danish (dk), Hungarian (hu), Lithuanian (lt), Russian (ru), and Chinese (zh).

Below, you can see an example of how to use it.

React

<NuvoImporter
  licenseKey="Your License Key"
  settings={{
    developerMode: true,
    identifier: "product_data",
    language: "de"
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
  }}
>
  Select File
</NuvoImporter>

Angular

licenseKey!: string
settings!: SettingsAPI;

ngOnInit(): void {
  this.licenseKey = "Your License Key"
  this.settings = {
    developerMode: true,
    identifier: "product_data",
    language: "de"
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ]
  };
}

Vue.js 2

export default {
  name: "App",
  components: {
    NuvoImporter,
  },
  data: () => {
    return {
      licenseKey: "Your License Key",
      settings: {
        developerMode: true,
        identifier: "product_data",
        columns: [
          {
            label: "Product ID",
            key: "product_id",
          },
          {
            label: "Article Name",
            key: "article_name",
          },
        ],
        language: "de",
      },
    };
  },
};

Vue.js 3

export default {
  name: "App",
  components: {
    NuvoImporter,
  },
  setup() {
    const settings = {
      developerMode: true,
      identifier: "product_data",
      columns: [
        {
          label: "Product ID",
          key: "product_id",
        },
        {
          label: "Article Name",
          key: "article_name",
        },
      ],
      language: "de",
    };
    return { settings };
  },
  data: () => {
    return {
      licenseKey: "Your License Key",
    };
  },
};

JavaScript

<script type="text/javascript">

  const settings = {
    developerMode: true,
    identifier: "product_data",
    language: "de",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
  };

</script>

i18nOverrides

The i18nOverrides feature in the NuvoImporter enables you to customize the application's default language keys according to your unique requirements. You can override the language keys for each language by using the i18nOverrides option in the settings of the NuvoImporter.

Below, you can see an example of how to use it.

React

<NuvoImporter
  licenseKey="Your License Key"
  settings={{
    developerMode: true,
    identifier: "product_data",
    i18nOverrides: {
      txt_page_upload_desc: "Hi there 🙏",
    },
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
  }}
>
  Select File
</NuvoImporter>

Angular

licenseKey!: string
settings!: SettingsAPI;

ngOnInit(): void {
  this.licenseKey = "Your License Key"
  this.settings = {
    developerMode: true,
    identifier: "product_data",

    i18nOverrides: {
      "txt_page_upload_desc": "Hi there 🙏"
    }

    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ]
  };
}

Vue.js 2

export default {
  name: "App",
  components: {
    NuvoImporter,
  },
  data: () => {
    return {
      licenseKey: "Your License Key",
      settings: {
        developerMode: true,
        identifier: "product_data",
        columns: [
          {
            label: "Product ID",
            key: "product_id",
          },
          {
            label: "Article Name",
            key: "article_name",
          },
        ],
        i18nOverrides: {
          txt_page_upload_desc: "Hi there 🙏",
        },
      },
    };
  },
};

Vue.js 3

export default {
  name: "App",
  components: {
    NuvoImporter,
  },
  setup() {
    const settings = {
      developerMode: true,
      identifier: "product_data",
      columns: [
        {
          label: "Product ID",
          key: "product_id",
        },
        {
          label: "Article Name",
          key: "article_name",
        },
      ],
      i18nOverrides: {
        txt_page_upload_desc: "Hi there 🙏",
      },
    };
    return { settings };
  },
  data: () => {
    return {
      licenseKey: "Your License Key",
    };
  },
};

JavaScript

<script type="text/javascript">

  const settings = {
    developerMode: true,
    identifier: "product_data",

    i18nOverrides: {
      "txt_page_upload_desc": "Hi there 🙏"
      }

    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
  };

</script>

Dynamic overwrite with variables

The i18n overwrites functionality allows you to define translation keys either statically or dynamically. In the case of dynamic keys, you can insert variables into the key values. For example, if you have the user's name stored in the userName variable, you can personalize the title of the upload page in your importer by dynamically adding the user's name. Use the following code snippet to achieve this:

i18nOverrides: {
  "txt_upload_data": `Welcome to our importer, ${userName}!`
}

info

Additionally, you can modify the value of the variable within the cleaning functions to dynamically change the i18n overwrite during the importing process. You can find an example sandbox here.

Add title & description to "Match Column"- & "Review Entries"-step

The nuvo importer offers optional i18n keys that are initially empty. If you want to add a title and/or a description text to the "Match Column" or "Review Entries" steps, you can define the following four keys. By using the provided code snippet, you can modify these keys and observe how the UI changes in the mapping and review steps of our importer.

i18nOverrides: {
  "txt_match_column": "I am a title",
  "txt_match_column_description": "I am a description text",
  "txt_review_entries": "I am a title",
  "txt_review_entries_description": "I am a description text"
}

This code snippet allows you to customize the text displayed in the title and description sections of the "Match Column" and "Review Entries" steps. Feel free to adjust the values as needed to suit your requirements.

Multilingual application

The i18nOverrides feature also works with multilingual applications. You can easily customize the language keys for each language, ensuring a consistent user experience across all languages.

Here is an example of how to use i18nOverrides inside a multilingual application:

i18nOverrides: {
  "de": {
    "txt_upload_data": "Hochladen",
    "txt_allow_data_type": "Datei zum Hochladen hierher ziehen",
    "txt_select_files": "Datei auswählen"
  },
  "en": {
    "txt_upload_data": "Upload",
    "txt_allow_data_type": "Drop your file here",
    "txt_select_files": "Select file"
  },
  "es": {
    "txt_upload_data":"Subir",
    "txt_allow_data_type":".xls, .xlsx, .csv, .xml y .json archivo aceptado.",
    "txt_select_files":"Seleccione Archivo"
  }
}

In the example code above, we have defined i18n overrides for English (en), German (de), and Spanish (es). By following the same pattern, you can easily add more language overrides to meet your specific needs.

It's worth noting that the overrides will automatically be applied to the default language defined in the settings of the NuvoImporter. This means that any language key that is not overridden will be displayed in the default language. With this level of customization, you can ensure a consistent and tailored user experience for all users, regardless of their language preferences.

i18n keys

To help you finding the correct i18n keys faster, you can take a look at our default translation templates below:

Translations	Download
English (en)	download
German (de)	download
Dutch (nl)	download
Italian (it)	download
Swedish (sv)	download
Portuguese (pt)	download
Polish (pl)	download
French (fr)	download
Spanish (es)	download
Russian (ru)	download
Lithuanian (lt)	download
Hungarian (hu)	download
Danish (dk)	download
Czech (cz)	download
Slovak (sk)	download
Norwegian (no)	download
Chinese (zh)	download

---

If you have any questions or your language still needs to be included inside the language property, please get in touch with us at [email protected].