Skip to main content

CreateConnector Embeddable Guide

The CreateConnector embeddable makes it easy to create input and output connectors for your pipelines—whether for internal teams or customers. Like all Ingestro pipeline components, it seamlessly integrates into your existing application with minimal effort.

This guide will help you implement the CreateConnector component and show how to configure it based on your specific requirements:

  1. Install the Ingestro package
  2. Get your Ingestro license key
  3. Get the access token
  4. Implement the embeddable component in your application
  5. Configure the component based on your specific use case

Let's get started​

Step 1: Install the Ingestro package​

Installing the Ingestro package is super easy.

Install with NPM:

React
Angular
Vue
VanillaJS
npm install @ingestro/pipelines-react

Install with Yarn:

React
Angular
Vue
VanillaJS
yarn add @ingestro/pipelines-react

Install via CDN:

VanillaJS
https://unpkg.com/@ingestro/pipelines-vanilla-js

Step 2: Get your Ingestro license key​

You can get your Ingestro license key from the Ingestro User Platform.

If you don’t have an account yet, you can sign up here.

Step 3: Get the access token​

In order to authorise yourself or rather the component you have to first get the access token via our authentication API.

You can get access tokens for two different cases:

  1. You want your internal users to create connectors
  2. You want your customers to create connectors

You want your internal users to create connectors

  1. To get the access token for an internal user, you need to first create a user in the Ingestro User Platform or use the user API
  2. Use the user’s email address and your license key to request the access token. Here is the cURL or JavaScript request you can use to get the access token:
cURL
Javascript
curl -X 'POST' 'https://api-gateway.ingestro.com/dp/api/v1/access/token' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
  "license_key": LICENSE_KEY,
  "auth": {
    "identifier": E-MAIL,
    "type": "USER"
  }
}' # Replace LICENSE_KEY with your license key & E-MAIL with a user`s email

You want your customers to create connectors

  1. To get the access token for your customer, you need to first create a sub-organization (sub-org) via the sub-organization API
  2. Use the sub-orgs’s identifier and your license key to retrieve the access token. Here is the cURL or JavaScript request you can use to retrieve the access token:
cURL
Javascript
curl -X 'POST' 'https://api-gateway.ingestro.com/dp/api/v1/access/token' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
  "license_key": LICENSE_KEY,
  "auth": {
    "identifier": SUB_ORG_IDENTIFIER,
    "type": "SUB_ORG"
  }
}'  # Replace LICENSE_KEY with your license key & SUB_ORG_IDENTIFIER with a sub-org identifier

Step 4: Implement the embeddable component in your application​

With the package installed, you can add the CreateConnector component to your application.

First, import the component in the file where you want to use the CreateConnector component:

React
Angular
Vue
VanillaJS
import { CreateConnector } from "@ingestro/pipelines-react";
import "@ingestro/pipelines-react/index.css";

Step 5: Configure the component based on your specific use case​

Add the code snippet below and insert the component on the page where you want it to appear:

React
Angular
Vue
VanillaJS
<CreateConnector
  accessToken="ACCESS_TOKEN"
  configuration={{
    name: null,
    type: null,
  }}
  settings={{
    i18nOverrides: {},
    language: "en",
    modal: false,
    allowedInputConnectors: ["HTTP", "FTP", "EMAIL", "S3", "AZURE", "GCS"],
    allowedOutputConnectors: ["HTTP", "FTP", "EMAIL", "S3", "AZURE", "GCS"],
  }}
  onConnectorCreate={({ data }) => {}}
  onClose={() => {}}
  onSuccessContinue={({ data }) => {
    // runs when the user clicks the "Continue" button on the success screen
    // data: object of the created connector
  }}
/>

accessToken

Add here the access token you’ve got in Step 3

configuration

The configuration determines if certain settings, such as name or the type of connector users can create, are already set.

name

Add here the name for the new connector

type

Define the types of connectors users can create. If null users can create input and output connectors. If set to "input" users can only create input connectors. If set to "output" users can only create output connectors.

settings

i18nOverrides

Allows you to override each text element in the interface

language

Defines the language of the embeddable (so far we only support English ("en"))

modal

Defines whether the component is shown inline (false) or within a modal view (true)

allowedInputConnectors

Defines which input connectors users can create. If the array is empty all types of connectors can be created. Add the following options to the array to restrict the types of connectors users can create:

  • "HTTPS"
  • "FTP"
  • "EMAIL"
  • "S3"
  • "AZURE"
  • "GCS"

allowedOutputConnectors

Defines which output connectors users can create. If the array is empty all types of connectors can be created. Add the following options to the array to restrict the types of connectors users can create:

  • "HTTPS"
  • "FTP"
  • "EMAIL"
  • "S3"
  • "AZURE"
  • "GCS"

onConnectorCreate

Runs after the user has confirmed the final step of the flow to create a connector

onClose

Runs when the user trys to close the modal by using the "X" button or clicking outside the modal

onSuccessContinue

Runs when the user clicks the "Continue" button on the success screen after successfully creating a connector.