Embedding Fuse

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

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

Adding the NPM Package

To add Fuse, do:

yarn add fuse-importer

To import it for use:

import FuseImporter from "fuse-importer";

To add Fuse, do:

yarn add fuse-importer

To import it for use:

import FuseImporter from "fuse-importer";

To add Fuse, do:

npm install fuse-importer --save

To import it for use:

import FuseImporter from "fuse-importer";

Fuse is also hosted on the unpkg.com CDN. Make sure to place the script tag before you initialize the importer.

<script type="text/javascript" src="https://unpkg.com/fuse-importer@latest"></script>

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:

import FuseImporter, { getFuseClientSideToken } from 'fuse-importer';

// Initialize the importer
const importer = new FuseImporter();

// See https://fuse-docs.flatirons.com/getting-started/sessions
importer.getSessionToken = getFuseClientSideToken({
  importer_slug: 'YOUR_IMPORTER_SLUG',
  api_key: 'YOUR_API_KEY'
});

importer.show();

import FuseImporter, { getFuseClientSideToken } from 'fuse-importer';

// Initialize the importer
const importer = new FuseImporter();

// See https://fuse-docs.flatirons.com/getting-started/sessions
importer.getSessionToken = getFuseClientSideToken({
  importer_slug: 'YOUR_IMPORTER_SLUG',
  api_key: 'YOUR_API_KEY'
});

importer.show();

<!DOCTYPE html>
<html>
  <head>
    <script
      type="text/javascript"
      src="https://unpkg.com/fuse-importer@latest"
    ></script>
    <script type="text/javascript">
      const importer = new FuseImporter();

      // See https://fuse-docs.flatirons.com/getting-started/sessions
      importer.getSessionToken = getFuseClientSideToken({
        importer_slug: 'YOUR_IMPORTER_SLUG',
        api_key: 'YOUR_API_KEY'
      });

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

        // Validate that the email includes "gmail"
        if (!record.email?.includes("gmail")) {
          errors["email"] = "Email must be from Gmail";
        }

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

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

        // Capitalize the first letter of the 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>

import React from 'react';
import FuseImporter, { getFuseClientSideToken } from 'fuse-importer';

const App = () => {
  const importer = new FuseImporter();

  // See https://fuse-docs.flatirons.com/getting-started/sessions
  importer.getSessionToken = getFuseClientSideToken({
    importer_slug: 'YOUR_IMPORTER_SLUG',
    api_key: 'YOUR_API_KEY'
  });

  const showImporter = () => {
    importer.show();
  };

  return (
    <button onClick={showImporter}>Show Importer</button>
  );
};

export default App;

import { Component } from '@angular/core';
import FuseImporter, { getFuseClientSideToken } from 'fuse-importer';

@Component({
  selector: 'app-root',
  template: `<button (click)="showImporter()">Show Importer</button>`,
})
export class AppComponent {
  showImporter() {
    const importer = new FuseImporter();

    // See https://fuse-docs.flatirons.com/getting-started/sessions
    importer.getSessionToken = getFuseClientSideToken({
      importer_slug: 'YOUR_IMPORTER_SLUG',
      api_key: 'YOUR_API_KEY'
    });

    importer.show();
  }
}

<template>
  <button @click="showImporter">Show Importer</button>
</template>

<script>
import FuseImporter, { getFuseClientSideToken } from 'fuse-importer';

export default {
  methods: {
    showImporter() {
      const importer = new FuseImporter();

      // See https://fuse-docs.flatirons.com/getting-started/sessions
      importer.getSessionToken = getFuseClientSideToken({
        importer_slug: 'YOUR_IMPORTER_SLUG',
        api_key: 'YOUR_API_KEY'
      });

      importer.show();
    }
  }
};
</script>

Importer Setup

Accessing Data

Use Cases

Using Columns

Appearance

Extending Functionality

JS Implementations

More to Love

Adding the NPM Package

Launching an Importer

Importer Setup

Accessing Data

Use Cases

Using Columns

Appearance

Extending Functionality

JS Implementations

More to Love

​Adding the NPM Package

​Launching an Importer

Adding the NPM Package

Launching an Importer