Advanced
See the less commonly used shared properties for embedded Flatfile.
Reusing Spaces
During the configuration of embedded Flatfile, you have the flexibility to either reuse an existing Space or generate a new one. These properties come into play when you’re working with an already established Space.
space
Using your secret key, you’ll make a request to a server endpoint to retrieve
an accessToken.
const flatfileOptions = {
publishableKey,
space: { id: string, accessToken: string },
//additional props
};
Overrides
mountElement
The element Flatfile will mount to. (Will create if it doesn’t already exist.)
const flatfileOptions = {
publishableKey,
mountElement: "flatfile_hello",
//additional props
};
loading
A default loading state when the Space is loading. Optionally, you can override the default Loading component.
const LoadingComponent = () => <label>Loading data...</label>;
const flatfileOptions = {
//additional props
loading: <LoadingComponent />,
};
exitTitle
The title on the dialog that appears when exiting out of Flatfile.
const flatfileOptions = {
publishableKey,
exitTitle: "",
//additional props
};
exitText
The text on the dialog that appears when exiting out of Flatfile.
Default: “Are you sure you would like to close this window? This will end your current data import session.”
const flatfileOptions = {
publishableKey,
exitText: "",
//additional props
};
exitPrimaryButtonText
The text on the dialog primary button that appears when exiting out of Flatfile.
const flatfileOptions = {
publishableKey,
exitPrimaryButtonText: "",
//additional props
};
exitSecondaryButtonText
The text on the dialog secondary button that appears when exiting out of Flatfile.
const flatfileOptions = {
publishableKey,
exitSecondaryButtonText: "",
//additional props
};
errorTitle
The title on the dialog that appears when an unexpected error occurs when loading Flatfile. Note: the error dialog will also include error details regarding the error that occurred.
const flatfileOptions = {
publishableKey,
errorTitle: "",
//additional props
};
iframe styles
Theming within the Flatfile application is done in an event listener.
The CSS here is for styling how you want things to look outside of the Flatfile iframe, like the exit dialog, the error container, and the dialog wrapper. This css can go in your style.css in your public folder. Remember to use !important to override values.
:root {
--ff-primary-color: #4c48ef !important;
--ff-secondary-color: #616a7d !important;
--ff-text-color: #090b2b !important;
--ff-dialog-border-radius: 4px !important;
--ff-border-radius: 5px !important;
--ff-bg-fade: rgba(0, 0, 0, 0.2) !important;
}
/* The default mount element */
/* #flatfile_iFrameContainer {
} */
/* A div around the iframe that contains Flatfile */
/* .flatfile_iframe-wrapper {
} */
/* The actual iframe that contains Flatfile */
/* #flatfile_iframe {
} */
/* Begin style overrides for when Flatfile is displayed as a modal */
/* This class gets appended to the flatfile_iframe-wrapper div */
.flatfile_displayAsModal {
padding: 50px !important;
width: calc(100% - 100px) !important;
height: calc(100vh - 100px) !important;
}
.flatfile_iframe-wrapper.flatfile_displayAsModal {
background: var(--ff-bg-fade);
}
/* The close button in top right to close modal */
/* .flatfile_displayAsModal .flatfile-close-button {
} */
/* The icon for the close button in top right to close modal */
.flatfile_displayAsModal .flatfile-close-button svg {
fill: var(--ff-secondary-color);
}
/* The actual iframe that contains Flatfile */
.flatfile_displayAsModal #flatfile_iframe {
border-radius: var(--ff-border-radius);
}
/* Begin style overrides for when you cancel out of the Flatfile modal */
/* The outer container of the modal that opens when you cancel out of Flatfile */
.flatfile_outer-shell {
background-color: var(--ff-bg-fade);
border-radius: var(--ff-border-radius);
}
/* The inner container of the modal that opens when you cancel out of Flatfile */
/* .flatfile_inner-shell {
} */
/* The white box inside the modal that opens when you cancel out of Flatfile */
.flatfile_modal {
border-radius: var(--ff-dialog-border-radius);
}
/* The container for the buttons you see in the close modal */
/* .flatfile_button-group {
} */
/* Style the buttons you see in the close modal */
/* .flatfile_button {
} */
/* The "yes, cancel" button you see in the close modal */
.flatfile_primary {
border: 1px solid var(--ff-primary-color);
background-color: var(--ff-primary-color);
color: #fff;
}
/* The "no, stay" button you see in the close modal */
.flatfile_secondary {
color: var(--ff-secondary-color);
}
/* The heading text you see in the close modal */
.flatfile_modal-heading {
color: var(--ff-text-color);
}
/* The description text you see in the close modal */
.flatfile_modal-text {
color: var(--ff-secondary-color);
}
/* End style overrides for when you cancel out of the Flatfile modal */
/* End style overrides for when Flatfile is displayed as a modal */
/* The container of the error component */
/* .ff_error_container {
}*/
/* The heading text you see in the error component */
/* .ff_error_heading {
}*/
/* The description text you see in the error component */
/* .ff_error_text {
}*/
On Premises
For customers hosting on-premises, the following variables apply.
apiUrl
The endpoint used to interact with the Flatfile API
const flatfileOptions = {
publishableKey,
apiUrl: "",
//additional props
};
spaceUrl
The URL for accessing the Flatfile Spaces API.
const flatfileOptions = {
publishableKey,
spaceUrl: "",
//additional props
};