Integration Overview

How SmartExtract integration works under the hood

Introduction

SmartExtract works as a smart widget that sits with in your own application. The SmartExtract component interacts with the Clik-ai API to perform all the hard work of document extraction and presents your users with the extracted financial data as a spread sheet.

SmartExtract component loads in an iframe thus giving you a full freedom of how to layout the component within your application. It could run in a popup dialog or an independent page of its own. The choice is yours.

Overview

The illustration below shows a detailed component diagram explaining how your application can integrate with Smart Extract:

Figure 1: SmartExtract Integration OvervieFollowing is the explanation of what each block in the diagram represents:

1. Host Application Environment – This represents the complete host application (front-end UI and back-end API) that intends to embed the Smart Extract iframe

2. Host Application UI – This represents the front-end UI of the host application

3. Smart Extract Iframe – This represents the Smart Extract component loaded inside an iframe with in the host application UI

4. ClikAi Environment – The ClikAi applications environment

5. Smart Extract API – The Smart Extract API

6. Clik Extraction Engine – ClikAi’s document extraction engine API

Integration Workflow

This section explains the complete workflow of how the SmartExtract integration works.

1. Authentication - Before the host application can load the Smart Extract iframe, it first needs to authenticate itself. The host application needs to send its credentials to the Smart Extract API which would respond with an authentication token on successful authentication. It is highly recommended that the authentication API is triggered as a server-to-server API call to avoid exposing your API keys on the front-end. In Figure 1 this is represented by steps 1 and 2.

2. Load Smart Extract Iframe - Once the host application has the authentication token, it can load the Smart Extract component in an iframe. While loading the iframe the authentication token needs to be provided as a URL query parameter. Once Smart Extract is loaded in the iframe, it performs a validation of the token provided. On successful validation of the token, it sends a ‘ready’ message to the parent window (i.e. the host application UI) using the JavaScript PostMessage API. In Figure 1 this is represented by steps 3 and 4.

3. Document Extraction - Once the host application UI receives the ‘ready’ message from the Smart Extract iframe it can send the document extraction request to the Smart Extract iframe. This is achieved by sending an ‘extractDocument’ message via the PostMessage API. The request message is posted with base64 encoded file and any meta data required for the document extraction. The Smart Extract iframe may show a form to ask for any missing information required for document extraction that was not provided as part of the extraction request message. Once the missing information is provided, Smart Extract component will communicate with the ClikAi’s extraction engine to extract information from the document. In Figure 1 this is represented by steps 5, 6 and 7.

4. Review, Edit and Save data - Once the Smart Extract component receives the extracted data from the extraction engine, it displays a spreadsheet view to review and edit extracted data. When the user clicks the ‘Save’ button on the spreadsheet view, Smart Extract iframe sends a ‘data’ message to the parent window. The message includes the extracted data in JSON format. The host application is responsible to persist this data into its database since Smart Extract doesn’t store any document data. In Figure 1 this is represented by steps 8 and 9

5. Editing Previously Extracted Data - Once a document is extracted and user clicks `Save` on spreadsheet view, the host application is responsible to store the extracted data (sent by the Smart Extract iframe) in its database. The host application may load the Smart Extract iframe to re-edit this extracted data. This is handled by sending an `editData` message to the iframe instead of the `extractData` message. The `editData` message must include the previously extracted data, in this case Smart Extract iframe will directly show the data in spreadsheet view (without any extraction behind the scene). Once user clicks save, the iframe will again send a `data` message with the updated JSON data.