Javascript

importOK is a reusable custom web component that embeds an import wizard into your app. You can follow this installation guide to set it up with vanilla Javascript.

#Installation

The tester version of the importOK JavaScript and React components are available on NPM, while the full (paid) versions are hosted in a private repository. Both versions are fully compatible and no code changes are required when upgrading to the full (paid) versions.

1npm install @importok/javascript

#Usage

To embed the importOK wizard in your Javascript project, simply add the following snippet to your component or page. The wizard will be added as a child element to the first argument provided, so make sure to adjust that accordingly. For a complete list of configuration options, including available props and event handlers, refer to the Props & Events section of the documentation.

To help you get started, we’ve also prepared a live StackBlitz example you can use as a reference for setting up your configuration.

To embed the wizard, add the following into your page.

 1import ImportOK from './node_modules/@importok/javascript/importok.js';
 2window.onload = function () {
 3  /**
 4  * Import fields to be mapped
 5  * Check https://importok.io/docs/fields for more details
 6  */
 7  const importFields = {};
 8 
 9  /**
10    * Custom transformers
11    * Check https://importok.io/docs/transformers for more details
12    */
13  const customTransformers = {};
14 
15  /**
16    * Custom validators
17    * Check https://importok.io/docs/validators for more details
18    */
19  const customValidators = {};
20 
21  /**
22    * Custom providers
23    * Check https://importok.io/docs/data-providers for more details
24    */
25  const customProviders = {};
26 
27  /**
28    * Push the provided record to the API
29    * Check https://importok.io/docs/webhooks for more details
30    */
31  const saveRecord = async function (record, meta) {};
32 
33  /**
34    * Initialize the wizard and append it to the provided element
35    */
36  ImportOK.add(
37    document.getElementById('import-wizard'),
38    {
39      fields: importFields,
40      meta: {
41        user_id: 1,
42      },
43        transformers: customTransformers,
44        validators: customValidators,
45        providers: customProviders,
46        onRecordReady: saveRecord
47      }
48    );
49  }

Note: There is a limit of 20 records for each import with the trial version. Additionally, access to custom validators, transformers, and data providers is restricted. Once you upgrade to a paid plan, you’ll gain access to the private packages and unlock full functionality with no limitations.