<!DOCTYPE html>
<html>
  <head>
    <script
      type="text/javascript"
      src="https://unpkg.com/fuse-importer@latest"
    ></script>
    <script type="text/javascript">
      const importer = new FuseImporter();
      importer.getSessionToken = ... // see https://fuse-docs.flatirons.com/getting-started/sessions
      // 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: {} };
      };
      importer.onSubmit = async (records) => {
        // submit to your backend here
        // return backend errors
        // each record passed to this function has a
        // records[index]._meta.id which represents the rowId.
        // If your backend has an error in a row,
        // you can pass this ID back with a custom error message for a field.
        return {
          message:
            "Most rows were imported. We found a few errors. Please fix them and re-submit",
          errors: {
            [records[0]._meta.id]: {
              email: "Email is already taken. Emails must be unique.",
            },
          },
        };
      };
      window.showFuseImporter = () => {
        importer.show();
      };
    </script>
  </head>
  <body>
    <button onclick="javascript:showFuseImporter()">Show Importer</button>
  </body>
</html>