Skip to main content
Are you looking for a framework-specific SDK? Check the Getting Started guides in the sidebar.

​
Step By Step Guide

This guide will walk you through the essential steps to integrate the Dromo Uploader into your JavaScript application.
1

Installation

There are two ways to add the Dromo JavaScript SDK to your codebase:

​
Using CDN

You can source the SDK directly from our CDN:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dromo-uploader-js/dist/DromoUploader.js"></script>

​
Using NPM package

Alternatively, you can install the NPM package into your application:
npm install dromo-uploader-js
Then import it into your project:
import DromoUploader from "dromo-uploader-js";
2

Initialize the Uploader

Create an instance of DromoUploader. You’ll need your Dromo front-end license key, and to define your fields, settings, and user metadata.
const licenseKey = "YOUR_FRONTEND_LICENSE_KEY"; // Get this from the Dromo dashboard
const fields = [
  { label: "Name", key: "name" },
  { label: "Email", key: "email_address" }
  // Define other fields as needed
];
const settings = {
  importIdentifier: "MyContactsImport", // A descriptive name for this import type
  developmentMode: true // Set to false in production
};
const user = {
  id: "unique_user_id_123",
  name: "Jane Doe",
  email: "jane@example.com"
  // Add other user metadata as needed
};

const dromo = new DromoUploader(licenseKey, fields, settings, user);
For full details on constructor parameters, see the DromoUploader SDK Reference.
3

Register Callbacks (Optional)

You can register callbacks to handle events like data processing or when results are ready.
dromo.onResults((data, metadata) => {
  console.log("Imported Data:", data);
  console.log("Import Metadata:", metadata);
  // Process the data here
  return "Import successful! Thanks!"; // Optional message to show to the user
});

// For other available callbacks like row hooks, column hooks, etc.,
// refer to the [DromoUploader SDK Reference](/reference/dromo-uploader-sdk) and [Hooks documentation](/hooks).
4

Open the Uploader

Call dromo.open() to launch the Dromo import interface.
dromo.open();

​
Basic Example

To use the example below, replace "FRONTEND_API_KEY" with your frontend license key from the Dromo dashboard. 
<script type="text/javascript">
  const license = "FRONTEND_API_KEY";
  const fields = [
    {
      label: "Name",
      key: "name"
    },
    {
      label: "Email",
      key: "email_address"
    }
  ];
  const settings = {
    importIdentifier: "Contacts",
    developmentMode: true
  };
  const user = {
    id: "1",
    name: "Jane Doe",
    email: "jane@dromo.io",
    companyId: "Dromo",
    companyName: "12345"
  };
  const dromo = new DromoUploader(license, fields, settings, user);
  dromo.onResults(function (response, metadata) {
    // Do something with the data here
    return "Done!";
  });
</script>
<div id="root">
  <button onclick="dromo.open()">Open Dromo</button>
</div>