Common
See the commonly used shared properties across embedded Flatfile.
All wrapper SDKs take the following shared properties. It’s recommended to start with the defaults in the Guides, then come back here to make customizations.
Authenticate
publishableKey
Publishable key accessed via Flatfile dashboard > Developer settings.
const flatfileOptions = {
publishableKey,
//additional props
};
Identify
While setting up embedded Flatfile, you have the option to either establish a fresh Space during each initialization or reuse an existing Space. These properties specifically apply when creating a new Space.
userInfo
Additional metadata to be passed to the space as it’s created
const flatfileOptions = {
publishableKey,
userInfo: {
userId: "string",
name: "string",
companyId: "string",
companyName: "string",
},
};
Look & Feel
name
Name of the space
const flatfileOptions = {
name: "MySpace",
//additional props
};
themeConfig
Theme values for the Space, sidebar and data table.
Theme your Space to create a custom look and feel to match your brand using the actual CSS variables referenced in the app. See all options in our Theming Reference.
const theme = {
root: {
primaryColor: "red",
},
// see theming reference
};
const flatfileOptions = {
publishableKey,
themeConfig: theme,
//additional props
};
spaceBody
Pass in space options to configure a new Space. Find all available parameters for spaceBody in the API Reference.
const flatfileOptions = {
publishableKey,
//additional props, see Create Space endpoint for all the full list of properties (https://reference.flatfile.com/api-reference/spaces/create-a-space)
spaceBody: {
name: "New Space",
namespace: "Red",
},
};
sidebarConfig
Sidebar config values to toggle UI elements
Within the sidebar, you can set the default page, hide or show the sidebar, and hide or show the data checklist.
If multiple values are provided for defaultPage, it with prioritize in the following order: Sheet, Workbook, Document, Checklist.
const mySidebarConfig = {
showSidebar: false,
showDataChecklist: false,
defaultPage: {
workbook: {
workbookId: "123",
sheetId: "123",
},
},
};
const flatfileOptions = {
sidebarConfig: mySidebarConfig,
publishableKey,
workbook,
};
Property | Type | Description |
---|---|---|
defaultPage | { documentId?: string, workbook?: { workbookId: string, sheetId?: string }, checklist?: boolean } | Landing page upon loading a Space. Defaults to primary Workbook. |
showDataChecklist | boolean | Toggle data config for Space. Defaults to false. |
showSidebar | boolean | Determines if a guest can see the sidebar. If the sidebar is hidden and there are multiple Workbooks in your Space, please specify the desired Workbook ID as your defaultPage. |
document
Document to pass to space
Documents, written in Markdown, provide extra clarification and instructions to users of a Space. Each Document will appear in the sidebar of a Space. Standard syntax is supported.
Client-Side Server
These options are available when configuring your Space client-side.
environmentId
Identifier for environment. This is optional with creating a Workbook client-side. The key includes environment-specific configurations.
const flatfileOptions = {
publishableKey,
environmentId,
//additional props
};
workbook
Config of the workbook to be created
const myWorkbook = {
// see Blueprint
};
const flatfileOptions = {
publishableKey,
workbook: myWorkbook,
//additional props
};
listener
Event listener for responding to Events.
const myListener = {
// listener code
};
const flatfileOptions = {
publishableKey,
listener: myListener,
//additional props
};
Configuration
These properties allow you to configure how the importer is mounted, displayed, and closed.
closeSpace
Options for when to close the iframe and a callback function when the session is complete.
const flatfileOptions = {
publishableKey,
//additional props
closeSpace: {
operation: "contacts:submit",
onClose: () => {},
},
};
This onClose
callback function is called when the Action defined in operation
is complete and closes the iframe. It can also be used to perform cleanup actions, such as resetting the state of the parent application or updating the UI.
displayAsModal
Display Flatfile as a full screen modal or inline on the page.
Toggling off this property will update the wrapper css to make the iframe fully inline thereby hiding the close button. All of the child divs will no longer include: .flatfile_displayAsModal
which removes all the dialog styling.
The default width and height of the container can be overriden in style.css
.