Guides
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.
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
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 transformers11 * Check https://importok.io/docs/transformers for more details12 */13 const customTransformers = {};14 15 /**16 * Custom validators17 * Check https://importok.io/docs/validators for more details18 */19 const customValidators = {};20 21 /**22 * Custom providers23 * Check https://importok.io/docs/data-providers for more details24 */25 const customProviders = {};26 27 /**28 * Push the provided record to the API29 * Check https://importok.io/docs/webhooks for more details30 */31 const saveRecord = async function (record, meta) {};32 33 /**34 * Initialize the wizard and append it to the provided element35 */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: saveRecord47 }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.