Skip to main content
Version: v3


This guide expands on options to customize and embedded the Flatfile importer.

Custom Mounting

You can provide a custom mounting if you want the importer to be attached as a child of the given container. Or you can even provide a Flatfile theme if you want to have a more custom experience.

<script src="^2.0.0/dist/index.js"></script>
function importData() {
// ...
// You can use here any CSS selector.
mountOn: '#custom-container'
theme: {
// By default, we display a confetti animation when data submission
// is completed. We understand that not all brand voices include
// confetti so you can disable this by setting hideConfetti as true.
hideConfetti: false,
loadingText: 'Custom loading text ...',
submitCompleteText: 'Custom submit text ...',
displayName: 'Display Name',
}).then(function(embed) {
// You can close the flatfile importer iframe by calling close()
var closeButton = document.getElementById('flatfile-close-button')
closeButton.addEventListener('click', embed.close)
<button id="flatfile-button" onclick="importData()">Import Data</button>
<button id="flatfile-close-button">Close Importer</button>
<div id="custom-container"></div>