Embedding Fuse in your website is simple. There are two steps:

  1. Add the fuse-importer NPM package to your application.
  2. Add a small JavaScript snippet to open your Fuse importer.

Adding the NPM Package

If you are installing Fuse Importer in a React-based project, do:

yarn add fuse-importer

If your project does not have

yarn add fuse-importer react react-dom

To import the data importer, use:

import FuseImporter from "fuse-importer";

Launching an Importer

The show function does exactly what it sounds like; it displays the importer. Ensure you have initialized the importer properly beforehand. Use this function like so:

Setup the importer in JavaScript:

// set these from your Fuse account
const organizationApiKey = "YOUR ORGANIZATIONS API KEY";
const importerId = "YOUR IMPORTER ID";

const importerOptions = {
  modal: false // whether or not to show the importer in a modal

const importer = new FuseImporter(organizationApiKey, importerId, importerOptions);

window.showFuseImporter = () => {

To open the importer:

<button onclick="javascript:showFuseImporter()">Show Importer</button>

Full HTML Example Code

The example below illustrates both frontend and backend validations.

<!DOCTYPE html>
    <script type="text/javascript">
      const organizationApiKey = "YOUR ORGANIZATIONS API KEY";
      const importerId = "YOUR IMPORTER ID";
      const importer = new FuseImporter(organizationApiKey, importerId);

      // frontend validations
      importer.onValidateRecord = async (record) => {
        const errors = {};

        // force emails to include Gmail
        if (!record.email?.includes("gmail")) {
          errors["email"] = "Email must from gmail";

        return { errors: errors, warnings: {} };

      // data transformations
      importer.formatRecord = (record) => {
        const newRecord = { ...record };

        // capitalize the first letter in first_name
        if (typeof newRecord.first_name === "string") {
          newRecord.first_name =
            newRecord.first_name.charAt(0).toUpperCase() +

        return newRecord;

      window.showFuseImporter = () => {

    <button onclick="javascript:showFuseImporter()">Show Importer</button>