Skip to main content
Version: v3

Customizations

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.

<html>
<head>
<script src="https://unpkg.com/@flatfile/sdk@^2.0.0/dist/index.js"></script>
<script>
function importData() {
Flatfile.requestDataFromUser({
// ...
// You can use here any CSS selector.
mountOn: '#custom-container'
theme: {
logo: 'URL_TO_YOUR_CUSTOM_LOGO',
// 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',
},
embedId: 'DEVELOPER_MODE_EMBED_ID',
}).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)
})
}
</script>
</head>
<body>
<button id="flatfile-button" onclick="importData()">Import Data</button>
<button id="flatfile-close-button">Close Importer</button>
<div id="custom-container"></div>
</body>
</html>