---
description: 'Version: 4.0.3'
---

# smart-extract.js

The smart-extract.js library provides a simple API to integrate the SmartExtract widget in your application. It is a simple wrapper around the [PostMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) utilised by the SmartExtract component. You can use this library by installing it as an npm package or directly adding it to your page via the CDN url.

## Installation

#### Using NPM

```bash
npm install --save @clik-ai/smart-extract 
```

And then in your code

```javascript
import { SmartExtract } from '@clik-ai/smart-extract';
// or
const { SmartExtract } = require('@clik-ai/smart-extract');

// You can now use SmartExtract constructor
```

#### Using CDN URL

```markup
<script type="module">
    import { SmartExtract } from 'https://unpkg.com/@clik-ai/smart-extract@4.1.1/dist/es2015/index.es2015.js';
    
    // You can now use SmartExtract constructor
</script>
```

## Usage

The smart-extract.js library provides two APIs to perform document data extraction:

#### SmartExtract

This class provides more fine grained control on the document data extraction process, but it requires a little more work on your part to integrate the SmartExtract component.

You can check the detailed documentation for [SmartExtract API here](smart-extract.js/smartextract-api)

#### SmartExtractSimple

This class provides a much simpler API to perform the data extraction. Under most of the scenarios you should be good working with this API.

You can check the detailed documentation for [SmartExtractSimple API here](smart-extract.js/smartextractsimple-api)

## Which API to use?

Most likely you should be good using the [SmartExtractSimple API](smart-extract.js/smartextractsimple-api). It provides a simple Promise based API that requires you to make just one API call to trigger the data extraction flow and get the extracted result. The [SmartExtract API](smart-extract.js/smartextract-api) works by triggering various events to notify if data was extracted or user cancelled data extraction or there was an error. This requires a little bit of more efforts on your part to set up various event handlers.&#x20;

The key difference here is that with [SmartExtractSimple API ](smart-extract.js/smartextractsimple-api)once the returned promise is resolved or rejected the only sensible action next is to end the SmartExtract session since you can not receive any more data from the SmartExtract component (i.e. if user edits data in the still open session and clicks `Save`). That's so because the returned promise has already resolved or rejected, it can't be resolved or rejected again!\
The [SmartExtract API](smart-extract.js/smartextract-api) works with events, thus it is possible to leave the SmartExtract session open after user clicks the `Save` button. If they further edit the data and click `Save` again, the `data` event will be triggered once more allowing you to save the updated data.
