@airbyte-embedded/airbyte-embedded-modal v0.0.3

Airbyte Embedded

Embed Airbyte's UI components directly in your application. This library provides a modal interface to seamlessly integrate Airbyte flows into your existing UI.

Installation

npm install @airbyte-embedded/airbyte-embedded-modal

Installation Options

# Using npm
npm install @airbyte-embedded/airbyte-embedded-modal

# Using pnpm
pnpm add @airbyte-embedded/airbyte-embedded-modal

# Using yarn
yarn add @airbyte-embedded/airbyte-embedded-modal

Usage

You need to create a flow_id on your backend with tour Airbyte Embedded API key. Then you can open the modal with the flow_id:

// import the library
import { AirbyteEmbeddedModal } from "@airbyte-embedded/airbyte-embedded-modal";

// Initialize the modal
const modal = new AirbyteEmbeddedModal({
  onFlowComplete: (flowId) => {
    console.log("Flow completed:", flowId);
  },
});

// Open the modal with a flow ID
await modal.open("your-flow-id");

When the flow is completed, you should call your backend again to use the flow_id to create a new data source for your customer.

Editing is the same, except when you create the flow_id, you should pass an edit_source_id to the API.

Backend APIs

TODO: create and apply from the OpenAPI spec.

React Example

TODO: paste from app.

Modal Options

The most important is onFlowComplete which is called when the flow is completed. If the flow has an error or the user cancels the modal, the callback is not called. The didClose callback is called when the modal is closed in either case.

onFlowComplete?: (flowId: string) => void;

There are default stylings but you can set new classes and do whatever you like:

airbyteClass?: {
  iframe?: string; // set the class of the iframe that holds the flow
};
customClass?: {
 popup?: string; // set the class of the popup
 container?: string; // set the class of the container
 htmlContainer?: string; // set the class of the html container
 // and other ones from the SweetAlert2 options
};

There are many other options for colors, behavior and callbacks. See the SweetAlert2 options for more.

Development

# Install dependencies
pnpm install

# Build the package
pnpm run build

# Run tests
pnpm test

Publishing

This repository is configured to publish to npmjs.org whenever:

1. There is an update to the main branch.
2. A new version is created in the package.json.

To create a new version, you can use the following command:

cd widget && npm version <major|minor|patch>

... and then push those changes to the main branch.

License

UNLICENSED - Learn more @ www.airbyte.com/ai