Skip to main content

🤝 Data Importer Integration

Before you begin

Get your API key

You can find your API key by going to "Settings" and copying the 44 character key found next to "API Key:".

settings

You can find the link to "Settings" on the right of the Navigation bar

Get your Pipeline ID

You can copy your Pipeline ID from either:

  • The Pipeline home page and clicking the ID of the pipeline you want to use

    pipeline-id
  • The Pipeline dashboard page and clicking the ID at the top of the top of the page

    pipeline-id

Your Pipeline ID will be automatically copied to your clipboard.

1. Install

Segna has an SDK with both our UI components as well as our APIs. Install the package:

// yarn
yarn add @segna/segna-sdk

// npm
npm i @segna/segna-sdk

If you want to call our API's directly see our API documentation.


2. Import the SDK and add your API key

Use the API key you copied from Get your API key to initialize Segna.

import segna from '@segna/segna-sdk';

segna.initialize({apiKey: '<YOUR_API_KEY>'});

3. Render the Data Importer in your app

Add an import at the top of your file:

import { DataImporter } from '@segna/segna-sdk';

And simply render the component where you want your Import button to show:

<DataImporter pipelineId={"<YOUR_PIPELINE_ID>"} />

Make sure you replace "<YOUR_PIPELINE_ID>" with the Pipeline ID you copied from Get your Pipeline ID.

info

Learn more about the Data Importer here.


4. Get importing!

Here is an example of what the data importer looks like:

data_importer_select

Your users will now be able to upload their data through your Data Importer, and the cleaned data will show up at your output destination!

tip

Check out the Data Importer docs to learn more about how the component can be customized and configured to fit your FE and use-case.



You can also unlock more functionality outside of the Data Importer: