- Add the fuse-importer NPM package to your application.
- Add a small JavaScript snippet to open your Fuse importer.
Adding the NPM Package
- YARN
- NPM
- CDN
To add Fuse, do:To import it for use:
yarn add fuse-importer
import FuseImporter from "fuse-importer";
To add Fuse, do:To import it for use:
npm install fuse-importer --save
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
Theshow function does exactly what it sounds like; it displays the importer. Ensure you have initialized the importer properly beforehand. Use this function like so:
- JavaScript (Simple)
- HTML + JS (Full)
- React
- Angular
- Vue
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>