Skip to main content
Version: v3

Getting started

This guide shows you how to set up an example application with Flatfile.

Overview:
  1. Sign up with your Github account
  2. Create a Data Template and Portal in code.
  3. Embed a Portal in your application.

3 steps

1. Sign up

Sign up with Github or login if already registered.

2. Create a Data Template and Portal

A Data Template defines the shape of data that leaves Flatfile after a user imports raw data. Often, an importer added to your product via Portal. Flatfile Portal is the embedded & brand customized import experiences for your application.

Configure in code: Up and Running to create a Data Template and a Portal.

3. Embed a Portal in your application

Copy and paste this code into your IDE of choice and give it a spin. Be sure to replace the DEVELOPER_MODE_EMBED_ID with your Portal embedId.

<html>
<head>
<script src="https://unpkg.com/@flatfile/sdk/dist/index.js"></script>
<script>
function importData() {
Flatfile.requestDataFromUser({
embedId: "DEVELOPER_MODE_EMBED_ID",
user: { id: 99, name: "John Doe", email: "john@doe.com" },
org: { id: 77, name: "Acme Inc." },
onData: (chunk, next) => {
chunk.records.forEach(console.log);
next();
},
});
}
</script>
</head>
<body>
<button id="flatfile-button" onclick="importData()">Import Data</button>
</body>
</html>

That's it!

You're now ready to try it out in your application. Have fun!

info

Make sure you are in Developer mode using the toggle in the bottom left of the dashboard. You will need your Embed ID for the next step. It is available from the Edit Portal page and should look something like this:

76aa0b10-d7f8-4dc7-a007-4a791736eed1

Up next

Next, learn more about the parts of embedding a Portal in your application.