JavaScript Embedding
Embed Flatfile using vanilla JavaScript
Embed Flatfile directly into any web application using our JavaScript SDK. This approach works with any framework or vanilla JavaScript setup.
Quick Links
- Advanced Configuration - Complete configuration options reference
- Server Setup - Server-side setup for space reuse
Installation
Add the Flatfile JavaScript SDK to your page:
Or install via npm:
Basic Implementation
1. HTML Structure
Create a button to trigger the Flatfile embed:
2. Initialize Flatfile
3. Get Your Credentials
publishableKey: Get from Platform Dashboard → Developer Settings
For detailed authentication and security guidance, see Advanced Configuration.
Complete Example
The example below will open an empty space. To create the sheet your users should land on, you’ll want to create a workbook as shown further down this page.
Creating New Spaces
To create a new Space each time:
- Add a
workbook
configuration object. Read more about workbooks here. - Optionally deploy a
listener
for custom data processing. Your listener will contain your validations and transformations
You can also deploy and create your workbook via a server-side listener as shown in the above link, rather than passing it in as a client-side property.
For detailed workbook configuration, see the Workbook API Reference.
Configuration Options
For complete configuration options including user identity, theming, and advanced features, see Advanced Configuration.
Reusing Existing Spaces
To reuse an existing space, you need to set up a server-side component that retrieves the space access token. The basic client-side approach shown above only works for initial space creation.
For space reuse, you’ll need:
- Server-side setup: Use your secret key to retrieve the space and its access token
- Client-side update: Use the access token instead of just the publishable key
For complete server-side implementation, see Server Setup.
Next Steps
- Advanced Configuration: See Advanced Configuration for complete options reference
- Server Setup: Set up Server Setup for space reuse functionality
- Styling: Customize the embedded experience in your Platform Dashboard Space settings
- Data Processing: Set up Listeners in your Space for custom data transformations
- API Integration: Use Flatfile API to retrieve processed data