Implementing an Embed

This guide aims to provide the instructions you need to get you up and running with Flatfile Embed. Flatfile Embed is a server-based, fully secure data import tool that allows you and your customers to collaborate on cleaning data like never before. With Flatfile Embed, you can drop an import button directly into your application so users can easily upload, review, and submit data.

Before you can implement an Embed, you will need to create both a data template and an Embed in your Flatfile Workspace. You can find more information on how to do that in our Getting Started guide. 

After creating an Embed, there are only two steps left for implementation: generating a secure token on your server and creating an import button on your front end using our SDK. 

Generate a Secure Token

Flatfile uses JSON Web Tokens (JWTs) to authenticate uploads and allow users to resume where they've left off in case of an interruption. To maintain the security of your implementation, the token should be generated on your back end. The JWT is a per session, per user token used to authenticate uploads when using the Embed SDK on your front end. The code examples we provide on the Edit embed page show one way to generate JWTs on your server. 

There are a few important things to remember when generating a JWT on your back end. First, you will need your Private Key. If you do not have the Private Key, you will need to generate a new one by clicking Reset Private Key. 

Let’s take a look at one example of generating a JWT using Node.js. 

If you’re using Node.js, you will need to run "npm install ejs express jsonwebtoken" to install the proper dependencies.

Though you may be using a different language or framework, the principles displayed in the code above remain the same. First, we store the values of the Embed ID and Private Key. Next, a JWT is created and passed to your front end. That’s it! 

Embed the Embed

The front end is where the hard work of creating a JWT pays off. Previous iterations of Flatfile required front-end adapters for the various frameworks we supported, but now all you need is the Flatfile SDK. There's no complicated configuration, adapters, or head-scratching front-end code to write. All the hard work is done on the server, so all you need to do is:

  1. Load the SDK

  2. Create an import button

  3. Pass your importer the secure token you generated

And that's it! The code snippet in the Edit embed page shows a basic outline of how it works, but since all you need from us is the SDK, you can code your front end in just about any framework you like. If you would like to learn more about about our SDK, you can see our SDK documentation here.