Direct Embedding

TableFlow now natively supports embedding the Importer UI directly in your app. This is supported with the new "isModal" property. When "isModal" is set to true (default), the importer will function as it did previously -- it will be displayed as an iFrame on top of your UI. When "isModal" is set to false, the Importer UI will be displayed directly within your UI.

This added flexibility gives developers the opportunity to provide the best UX for their customers. In some cases, developers prefer to keep the context (headers, footers, sidebars, etc.) of their app displayed for their users. In other cases, developers prefer to focus users' attention directly on the task at hand using the modal configuration.

React SDK Example (docs):

<TableFlowImporter
  importerId={"b0fadb1d-9888-4fcb-b185-21b984bcb227"} // Use your importer ID from https://app.tableflow.com/importers
  isModal={false}
  onComplete={(data, error) => console.log(data)}
/>

JavaScript SDK Example (docs):

const importer = createTableFlowImporter({
  importerId: "6de452a2-bd1f-4cb3-b29b-0f8a2e3d9353", // Use your importer ID from https://app.tableflow.com/importers
  isModal: false,
  onComplete: (data, error) => console.log(data),
});

New to TableFlow?

Sign up for TableFlow cloud and check out our getting started guide to start importing CSV and Excel files from your customers.

What's Next?

We're always looking for ways for TableFlow to make your CSV and Excel imports as seamless as possible. If you have any feedback, suggestions, or if you'd like to contribute to the project, reach out through our GitHub repository or community Slack.