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 credentials and configuration to load a pre-configured Space or create a new 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. Get your credentials from Developer Settings
  3. Choose your SDK and follow the integration guide

​
Configuration & Setup

Advanced Configuration

Complete configuration options reference

Server Setup

Server-side setup for space reuse

​
Two Approaches: Existing vs Dynamic Spaces

These guides show both approaches:
  • Existing Spaces: Connect to a pre-existing Space
  • Dynamic Spaces: Create a new Space programmatically
Choose the approach that best fits your workflow. See the implementation instructions for both patterns in each SDK guide. For advanced configuration options like themes, custom workflows, and data transformations, see Advanced Configuration or configure these in your Space through the Platform Dashboard.