Ingestro Launch Guide

Ben Hartig
Ben Hartig
Co-Founder & CTO
Last updated on
August 21, 2025
Ingestro Launch Guide

Welcome to our launch guide for implementing the Ingestro frontend library in your project

As a software engineer, you understand the importance of streamlining your development process and providing dynamic functionality to your applications. Ingestro is a powerful JavaScript-based importer library that can help you achieve this goal. By integrating Ingestro, you can easily onboard and import customer data, allowing you to offer a self-service importer to your users. This guide will show you how to easily integrate Ingestro into your project in just four simple steps.

Step 1: Import the Library

The first step in implementing Ingestro React is to import the library into your project. You can do this by using either NPM or Yarn. If you are using NPM, you can run the following command:

npm install Ingestro-react

If you are using Yarn, you can run the following command:

yarn add Ingestro-react

As a software engineer, you understand the importance of a structured data model for your application. To streamline this process, Ingestro React offers a no-code data model generator, which lets you easily customize the model for your project. You can manually create the schema using the provided documentation if preferred. (Note: This step is optional but highly recommended).

Step 2: Choose the License Key

Once the library is imported, you will need to choose a license key. If you are still in the testing phase of your project, you can choose the dev key. However, you can choose a live key if you are already a customer. This will give you access to all of the features and functionality of the library.

Step 3: Choose Your Target Data Model

As a software engineer, you understand the importance of a structured data model for your application. To streamline this process, Ingestro React offers a no-code data model generator, which lets you easily customize the model for your project. You can manually create the schema using the provided documentation if preferred. (Note: This step is optional but highly recommended).

Step 4: Implement the Component

To complete the setup, you need to integrate the component into your front-end application.

Ingestro React generates a code snippet for you based on the inputs and selections from steps 1 to 3. Simply copy and paste the code into your app to add Ingestro React’s dynamic functionality.

The entire setup process, including steps 1 to 3, can be found in the “Setup” tab on Ingestro’s user platform.

This covers the basics of setting up Ingestro and using its functionality. You can refer to the links and functionality in the Ingestro Importer documentation for a more advanced setup, including all its features.

  • Cleaning Functions: For advanced validation, external server calls, or data modifications, you can use cleaning functions such as onEntryInit, onEntryChange, or columnHooks.
  • White-labeling: To tailor the importer’s style to fit your company’s brand, you can use the style property to customize every aspect of it. This includes adjusting the primary and secondary colours, adding border-radius, hover animation, font types, etc. Find here more info about styling.
  • Multiple Language Support: To serve customers in different countries, you can add multi-language support to the UI using the i18nOverrides property in the importer. You can adjust the UI texts for each language and even modify the default English texts if needed. Find here more info about multi-language.

Book a first exploratory call with our team and get to know how to set up a data import process that works in less than 60 minutes.

book a 30-minute call

Let's talk about your data onboarding needs

white visualwhite visual

Keep exploring

icon