> ## Documentation Index
> Fetch the complete documentation index at: https://flatfileinc-docs-update-8de3b114-e6aa-4417-a753-2ecef733a0d.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Embed Flatfile
> create a new Space every time Flatfile is opened
For synchronous data import/exchange completed in one session, create a new
Space each time Flatfile is opened. This suits situations where a clean slate
for every interaction is preferred.
## Before you begin
## Prepare your project
### Install packages
Make a new directory.
```bash
mkdir example-flatfile-js-embed
```
Go into that directory.
```bash
cd example-flatfile-js-embed
```
Follow prompts from the `init` command.
```bash
npm init
```
Install packages. (We'll use `parcel` for bundling.)
```bash
npm i @flatfile/javascript @flatfile/listener @flatfile/plugin-record-hook @flatfile/api flatfile
```
Install dev packages.
```bash
npm i parcel --save-dev
```
### Create your file structure
Setup your app to look something like this:
```
├── public/
└── index.html
└── styles.css
├── src/
└── client.js
└── workbook.js
└── listener.js
├── package.json <--- already created
└── package-lock.json <--- already created
```
In this file structure, your app should have two main directories, `public` and
`src.`
The `public` directory contains the `index.html` file, which is the entry point
of the application's front-end, and the `styles.css` file for styling the
iframe.
The `src` directory contains the main components and logic of the application,
including the `client.js` file, which initializes Flatfile and passes in
available options.
## Build your importer
### 1. Add a Flatfile button
Add a button to your application to open Flatfile in a modal. Pass in your
`publishableKey` and a new Space will be created on each page load. Also, add
the content here to your `styles.css`.
```html public/index.html (snippet)
```
```html public/index.html (full page)
Hello, world!
<Flatfile />
Embed Flatfile in just a few lines of code.
```
### 2. Initialize Flatfile
In your `client.js`, at minimum, you'll need to receive the `publishableKey` set
from when you called `openFlatfile`.
```js src/client.js
import { initializeFlatfile } from "@flatfile/javascript";
//create a new space in modal
window.openFlatfile = ({ publishableKey }) => {
if (!publishableKey) {
throw new Error(
"You must provide a publishable key - pass through in index.html",
);
}
const flatfileOptions = {
name: "Embedded Space",
publishableKey,
externalActorId: 'test-1',
sidebarConfig: {
showSidebar: false,
},
closeSpace: {
operation: "submitActionFg",
onClose: () => {
//custom code if needed
},
},
// Additional props...
};
initializeFlatfile(flatfileOptions);
};
```
### 3. Start your client
Now, start your front end by heading to terminal and running the following
command. To see that it’s running, visit: [https://localhost:1234](https://localhost:1234) (or the port it
is running on) and you should see your page and a button. Click the button and
see that an empty Space gets created.
```bash
npx parcel public/index.html
```
### 8. Customize
You can stop here or you can [view our full reference](../reference/common) to
see all the ways you can customize your importer.
## Example Project
Find this Javascript example project in the Flatfile GitHub repository.
Clone the Flatfile Javascript tutorial here.