Software teams rely on customer data to activate users and deliver value from day one. Ingestro gives you the infrastructure to import that data at scale—quickly and securely. This guide walks through the core steps to get Ingestro Data Import SDK running in your environment, along with best practices from real-world implementations.
The Importer is the entry point. It's where you enter your license key, basic settings, and how users interact with it.
import { NuvoImporter } from "@getnuvo/importer-react";
export default function CustomerImporter() {
const settings = {
identifier: "customer-import",
title: "Import Customers",
columns: [ // Your TDM columns
{ key: "name", label: "Name" },
{ key: "email", label: "Email" },
],
};
return (
<NuvoImporter
licenseKey="YOUR_LICENSE_KEY"
settings={settings}
onResults={(data) => console.log("Imported:", data)}
columnHooks={}
/>
);
}That's it! You've got your importer up and running.
From here, it's all about defining how your data should look and behave.
The TDM defines your output structure—the columns, data types, and validations that ensure you always get clean and consistent data.
label → Friendly name for userskey → The field name your backend expectscolumnType → Data type (string, int, float, category, date, email, etc.)example → A sample value (visually helps the user)description → A short description on what kind of data the column holdsalternativeMatches → Synonyms to make mapping easier (such as alternate names that you expect to receive in the files)validations → Rules like required, regex, or uniqueHere’s an example:
[
{
label: "Customer Email",
key: "customer_email",
columnType: "email",
example: "jane.doe@example.com",
description: "The customer's primary email address used for contact.",
alternativeMatches: ["Email Address", "Mail"],
validations: [{ validate: "required" }],
},
];📘 Tip: Use our AI TDM generator to speed up the process of setting it up direcly from a file or prompting it with natural language.
.png)
.png)
Cleaning Functions let you automatically fix or enrich data during the import process.
You can use them to standardize formats, clean data, or block invalid rows before users even hit “Complete import.”
Here’s an example:
columnHooks={{
customer_email: (values) => {
return values.map(([item, index]) => {
const cleanedEmail = item?.toLowerCase().trim();
return [
{
value: cleanedEmail,
info: [
{
message: "Email addresses automatically converted to lowercase.",
level: "info",
},
],
},
index,
];
});
},
}}You can also use the Step Handler to hook into each step (upload, mapping, review, etc.) and apply logic like:
With ImporterSession, you can preload data and start the importer at a specific step (for example, at the Review Entries step, including preloaded rows).
await ImporterSession.upload({
step: "review",
data: [
{ name: "John Doe", email: "john@example.com" },
{ name: "Jane Smith", email: "jane@example.com" },
],
});
This option is perfect for custom workflows or when you already have partially processed data.
Ingestro Data Importer SDK can fully match your brand and audience through white-label customization.
<NuvoImporter
licenseKey="YOUR_LICENSE_KEY"
settings={{
identifier: "product_data",
language: "de", // you can set the language for the UI
columns: [
{ label: "Produkt-ID", key: "product_id" },
{ label: "Artikelname", key: "article_name" },
],
style: { // directly change the styling of the Importer
globals: {
primaryColor: "#4CAF50",
backgroundColor: "#f9f9f9",
fontFamily: "Arial",
},
},
}}
/>Looks native, feels native.
Give your users superpowers. With Prompts, they can transform or clean data more quickly and more efficiently using natural language commands—right inside the importer.
Examples:
identifier and columns in your settings (both are required).