Skip to main content

Getting Started

Let's integrate the UseCSV Importer plugin with your app.

Make sure you configured your importer before starting.

Using UseCSV

useCsvPlugin can be used as a function to trigger the import modal when called.

Additional metadata can be passed in the user prop, and this will be passed back to your app in the JSON webhook when data is imported. It's a good idea to include a userId or similar identifying data, so you can correctly identfiy and import the data into your app. Check more details about Options.

  • importerKey: string Which can be found in the admin panel.

  • user: json object Contains details of the importing user, so that they can be identified easily.

1. Install

Using NPM

npm install @usecsv/js

Using YARN

yarn add @usecsv/js
Code example

Check codesandbox example.

index.html

<html>
  <head>
    <title>UseCSV</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>
      <h1>Start importing your data</h1>
      <button type="button" id="import-data-button" onclick="importData()">
        Import Data
      </button>
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js

import useCsvPlugin from "@usecsv/js";

function importData() {
  useCsvPlugin({
    importerKey: "your-importer-key",
    user: { userId: "12345" },
    metadata: { anotherId: "1" },
  });
}

2. Reference the CDN

<script src="https://unpkg.com/@usecsv/js/build/index.umd.js"></script>

Code example

Check codesandbox example.

index.html

<html>
  <head>
    <title>UseCSV</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>
      <h1>Start importing your data</h1>
      <button type="button" id="import-data-button">Import Data</button>
    </div>
    <script src="https://unpkg.com/@usecsv/js/build/index.umd.js"></script>
    <script type="text/javascript">
      var importButton = document.getElementById("import-data-button");
      importButton.onclick = function () {
        useCsvPlugin({
          importerKey: "your-importer-key",
          user: { userId: "12345" },
          metadata: { anotherId: "1" },
        });
      };
    </script>
  </body>
</html>

Code example ui is shown below

Usage Exmaple

Now your users can import data from within your app, the final step is to setup a webhook in your backend to receive imports. Let's goto the Webhook docs.