\n\n> [!NOTE]\n> The `@ingestro/importer-vanilla-js` package is the successor to our previous `@getnuvo/importer-vanilla-js` package.\n> While you can continue using versions 3.x of `@getnuvo/importer-vanilla-js`, we recommend migrating to\n> `@ingestro/importer-vanilla-js` version 4.x to take advantage of the latest features and improvements.\n\n# Ingestro Data Importer SDK\n\n**Ingestro** leverages AI to simplify importing complex and messy files into your application.\n\nIntegrate the Ingestro Data Importer to offer your customers an intuitive and efficient data import experience.\n\n## Features\n\n- **AI-Powered Column and Option Mapping**: Automatically matches imported data columns to your system's target data model, streamlining the import process.\n- **Customizable Cleaning Functions**: Implement custom logic to validate and transform data during the import workflow.\n- **Support for Multiple File Formats**: Handles various file types, including CSV, TSV, XLS, XLSX, JSON, XML, and PDF.\n- **Dynamic Import Capabilities**: Initiate the import process from any step, accommodating diverse data sources and workflows.\n- **Styling and Theming**: Easily adjust the importer's appearance to align with your application's design.\n- **Multi-language Support**: Customize and localize interface text to cater to a global user base.\n\n## Getting Started\n\nEnsure you have signed up on our [User Platform](https://dashboard.ingestro.com/) and have access to your Ingestro license key.\n\n### Installation\n\nAdd Ingestro to your project:\n\n**npm:**\n\n```bash\nnpm install @ingestro/importer-vanilla-js\n```\n\n**yarn:**\n\n```bash\nyarn add @ingestro/importer-vanilla-js\n```\n\n### Basic Implementation\n\nBelow is a basic example of integrating the `DataImporter` component into your Vanilla JS application:\n\nCDN:\n\n```js\n\n\n```\n\nNPM:\n\n```js\n\n\n```\n\nIn this example:\n\n- **licenseKey**: Your unique Ingestro license key.\n- **settings**: Configuration object for the importer.\n- **identifier**: A unique string to identify the import instance.\n- **columns**: Defines the target data model (TDM) with `label` and `key` for each column.\n- **onResults**: Callback function that handles the imported data results.\n\nFor a comprehensive guide on setting up and customizing the importer, refer to the [First Steps](https://docs.ingestro.com/sdk/start/) documentation.\n\n## Advanced Configuration\n\n### Settings & Configuration\n\nThe `settings` property allows you to tailor the importer's behavior and appearance. Key configurable options include:\n\n- **inputTypes**: Specify supported file types (e.g., `['csv', 'xls', 'json']`).\n- **modal**: Determine whether the importer operates within a modal (`true`) or inline (`false`).\n\nFor a detailed list of configuration options, visit the [Settings & Configuration](https://docs.ingestro.com/sdk/settings/) page.\n\n### Target Data Model (TDM)\n\nDefine the structure of the data you expect using the `columns` array within the `settings`. Each column can include:\n\n- **label**: User-friendly name displayed in the UI.\n- **key**: Technical identifier for the column.\n- **description**: Additional information about the column.\n- **alternativeMatches**: Array of synonyms or abbreviations to assist the mapping algorithm.\n- **validations**: Rules such as required fields, uniqueness, regex patterns, and cross-column dependencies.\n\nLearn more about defining your TDM in the [Columns / Target Data Model](https://docs.ingestro.com/sdk/columns/) documentation.\n\n### Cleaning & Data Handler Functions\n\nImplement custom cleaning & data handler functions (callback functions) to transform and validate data during the import process. These functions can correct date formats, enrich entries, compare imported data against external databases, and more.\n\nExplore the capabilities of these functions in the [Cleaning Functions](https://docs.ingestro.com/sdk/cleaning-functions/) & [Data Handler](https://docs.ingestro.com/sdk/data-handler) docs.\n\n### Dynamic Import\n\nThe dynamic import feature allows you to start the import process from any step and with various data formats. This flexibility enables integration with different workflows and data sources.\n\nFor implementation details, refer to the [Dynamic Import](https://docs.ingestro.com/sdk/dynamic-import/) documentation.\n\n### Styling and Theming\n\nCustomize the appearance of the Ingestro importer to match your application's design. Modify themes, adjust display modes, and enable or disable specific features to create a seamless user experience.\n\nLearn more about styling options in the [Styling](https://docs.ingestro.com/sdk/styling/) section.\n\n### Multi-language Support\n\nThe `i18nOverrides` and `language` feature allow you to customize and localize the application's default language keys, ensuring the importer aligns with your users' language preferences.\n\nFor more information on localization, visit the [Multi-language Support](https://docs.ingestro.com/sdk/multi-language/) & [Language](https://docs.ingestro.com/sdk/settings#language) page.\n\n## Handling Results\n\nThe `onResults` callback function provides access to the cleaned data, allowing you to define how to process and store it.\n\nDetailed information on handling results can be found in the [Result (Output)](https://docs.ingestro.com/sdk/results/) documentation.\n\n## Release Notes\n\nStay updated with the latest features, improvements, and bug fixes by reviewing our [Release Notes](https://docs.ingestro.com/sdk/release-notes/).\n\n## Learn More\n\nExplore how to get the most out of Ingestro with real examples and detailed guides:\n\n- Try it live on [CodeSandbox](https://codesandbox.io/p/sandbox/importer-v4-vanilla-js-npm-827shg) – test and tweak the importer in action.\n- Visit our [Knowledge Base](https://dashboard.ingestro.com/knowledge-base) for deep dives into settings, data models, cleaning functions, and more.\n\n## Support\n\nIf you have any questions or need assistance, please refer to our [FAQ](https://docs.ingestro.com/sdk/faq) or contact our support team at [support@ingestro.com](mailto:support@ingestro.com).\n","readmeFilename":"README.md"}
![\"Ingestro](\"https://docs.ingestro.com/img/Ingestro-logo-dark.svg\"){kind=logo}
\n