nuvo-vanilla-js v2.16.3

nuvo uses AI to enable you to import messy files with ease.

Use the UI library in our nuvo-vanilla-js package to create the best data import experience for your customers!

Getting started

Make sure you have signed up for nuvo, and that you have access to your Licence Key.

Installation

CDN:

<div class="nuvo-container" />
<script type="module">
  import { launchNuvoImporter } from 'https://unpkg.com/nuvo-vanilla-js';

  launchNuvoImporter('.nuvo-container', {
    licenseKey: 'Your License Key',
    settings: {
      developerMode: true,
      identifier: 'contact_data',
      allowManualInput: true,
      columns: [
            {
              label: 'Product ID',
              key: 'product_id',
            },
            {
              label: 'Article Name',
              key: 'article_name',
            },
          ],
      modal: true,
    },
    onResults: (result, errors, complete) => {
      console.log('Result:', result);
      console.log('Errors:', errors);
      complete();
    },
  });
</script>

npm:

npm install nuvo-vanilla-js

yarn:

yarn add nuvo-vanilla-js

Implementation Example

<div class="nuvo-container" />
<script type="module">
  import { launchNuvoImporter } from 'nuvo-vanilla-js';

  launchNuvoImporter('.nuvo-container', {
    licenseKey: 'Your License Key',
    settings: {
      developerMode: true,
      identifier: 'contact_data',
      allowManualInput: true,
      columns: [
            {
              label: 'Product ID',
              key: 'product_id',
            },
            {
              label: 'Article Name',
              key: 'article_name',
            },
          ],
      modal: true,
    },
    onResults: (result, errors, complete) => {
      console.log('Result:', result);
      console.log('Errors:', errors);
      complete();
    },
  });
</script>

In the interactive demo below, try changing the code and see how it affects the output.

For more options, see our documentation and visit our Knowledge base to see more code examples.