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 = () => {
  importer.show();
}

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>
<html>
  <head>
    <script
      type="text/javascript"
      src="https://unpkg.com/fuse-importer@latest"
    ></script>
    <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() +
            newRecord.first_name.slice(1);
        }

        return newRecord;
      };

      window.showFuseImporter = () => {
        importer.show();
      };
    </script>
  </head>

  <body>
    <button onclick="javascript:showFuseImporter()">Show Importer</button>
  </body>
</html>
Adding TransformationsOverview