Flatfile can be embedded directly into your web application, allowing users to import data without leaving your interface. This creates a seamless experience where data import feels like a native part of your app.

​
When to Embed Flatfile

Embed Flatfile when you want to:

  • Seamless user experience - Keep users within your application flow
  • Custom branding - Maintain your application’s look and feel
  • Integrated workflows - Connect data import directly to your business logic
  • Control over timing - Trigger imports at the right moment in your user journey

​
How Embedding Works

Flatfile embedding uses an iframe-based approach that loads the Flatfile interface within your application. You provide:

  1. publishableKey - Authenticates your requests (from Platform Dashboard)
  2. spaceId - Points to a pre-configured Space with your data schema and workflows

The embedded experience handles file upload, data mapping, validation, and transformation automatically based on your Space configuration.

​
Available SDKs

Choose the SDK that matches your frontend framework:

JavaScript

Vanilla JavaScript for any web application

React

React components and hooks

Angular

Angular components and services

Vue

Vue.js components and composables

​
Getting Started

  1. Create a Space in the Platform Dashboard with your data schema
  2. Copy your publishableKey from Developer Settings
  3. Copy your spaceId from your Space URL
  4. Choose your SDK and follow the integration guide

​
Alternative: Dynamic Space Creation

By default, these guides show how to connect to existing Spaces (recommended for production). If you need to create new Spaces dynamically instead, see the modification instructions in each SDK guide.

For advanced configuration options like themes, custom workflows, and data transformations, configure these in your Space through the Platform Dashboard or see our API Reference.