Skip to main content
Version: v3

How to embed Flatfile in your product

This guide expands on the Getting Started guide to get a Portal up and running in development mode.


Prerequisites

Please complete the following before you begin.

  1. Login or register a Flatfile account
  2. Create a Data Template and Portal
  3. Embed a Portal in Developer mode

See Getting Started to complete.

Breaking down the embed code

There are four parts to consider when integrating this code into your application. The specific implementation syntax may vary depending on your programming language.

  1. Include @flatfile/sdk through npm or unpkg
  2. Pass along session information for the user (Production requires an authentication token)
  3. Implement code to trigger an import and do something with the data
  4. Provide a way for the user to initiate a Flatfile Portal

Please review the inline comments of this embed code snippet

import { Flatfile } from "@flatfile/sdk";

// find this in your Flatfile dashboard after creating a new Embed
const EMBED_ID = "";

// use this wherever you need to trigger an import
export function importData() {
// Development mode to pass up a user. Production will require authentication (Securing Data guide)
Flatfile.requestDataFromUser({
embedId: EMBED_ID,
user: { id: 99, name: "John Doe", email: "john@doe.com" },
org: { id: 77, name: "Acme Inc." },
onData(chunk, next) {
/* handle submitted data here */
},
onComplete() {
// do something
},
onError(error) {
// do something
},
});
}

// change this to whatever DOM trigger you want to ue
document.getElementById("button").addEventListener("click", importData);

Up next

Get your Portal working in production by following these next guides:

  1. Accepting data
  2. Securing data
  3. Using Data Hooks®