Integrating Manual Review

If you are using ABBYY Vantage within your own system, you will probably also want to make use of manual review capabilities. This section will guide you through integrating manual review. After you send some documents to processing via the Vantage API, monitor the transaction status as described in How to Process Documents Using the Vantage API. If a document needs to be reviewed by a human operator, the transaction status response will contain a manualReviewLink key with a secure link, which will allow the reviewer to access only the data of that particular transaction. Embed an iframe with the contents of that link into the web page of your service:

<iframe src="manual-review-link"></iframe>

Note that the link will expire 168 hours after its creation. If you need to continue the review, request a new link by sending a GET request to the transactions resource as before.

Iframe appearance

You may want to streamline the appearance of the service by removing the Vantage logo or hiding some of the panes in the Manual Review client interface. To remove the Vantage logo, add a displayMode query parameter with the iframe value to the link as follows:

<iframe src="manual-review-link&displayMode=iframe"></iframe>

Use the following options to set up the Manual Review client interface:

Key	Description
features
`batchEditor`	Set to `false` to hide the page thumbnails pane.
`batchEditor.toolbar`	Set to `false` to show the page thumbnails pane but hide the toolbar pane.
`batchEditor.autoCollapse`	Set to `true` to show the page thumbnails pane but collapse it when the Manual Review client interface is opened.
`docEditor`	Set to `false` to hide the page image pane.
`docEditor.toolbar`	Set to `false` to show the page image pane but hide its toolbar.
`formEditor`	Set to `false` to hide the list of extracted fields pane.
`rulesReport`	Set to `false` to hide the list of rule errors pane.
`sendToStageAvailable`	Set to `true` to show the Send to Stage… button.

These options are organized in a single JSON object. The following sample code will display an iframe with the rule errors pane hidden and the page thumbnails pane collapsed:

"features": {
   "batchEditor": {
      "autocollapse": true,
   },
   "rulesReport": false,
}

Add a settings query parameter with the contents of this JSON object to your link for manual review:

<iframe src="manual-review-link&settings=%7B%22features%22%3A%7B%22batchEditor%22%3A%7B%22autoCollapse%22%3Atrue%7D%2C%22rulesReport%22%3Afalse%7D%7D"></iframe>

Iframe events

The iframe object will send messages to the parent window to notify you of the reviewer’s actions in the Manual Review client interface, so that you could move on to the next step at the appropriate time. Events are sent with the targetOrigin=parent parameter. The following is a list of events to look for:

ManualReviewWasPaused. Sent when the reviewer clicks the Reject button.
ManualReviewWasCompleted. Sent when the reviewer clicks the Complete button.
ManualReviewWithdrawn. Sent when the reviewer has been inactive for some time, and the Manual Review client task was withdrawn back to the general task queue.

The sample code below shows how to display an iframe for manual review and hide it once any of the above events have been triggered. Sample code for listening to iframe events:

<html style="min-height: 100%; height: 100%;">
<head>
  <script>
    var manualReviewLink; // the link from the transaction status response
    window.addEventListener("DOMContentLoaded", init, false);
    function init() {
      var iframe = document.createElement("iframe");
      iframe.src = getUrl();
      iframe.style.width = "100%";
      iframe.style.height = "95%";
      try {
        document.getElementById("main").removeChild(document.querySelector("iframe"));
      } catch (e) { }
      document.getElementById("main").appendChild(iframe);
      window.addEventListener("message", receiveMessage, false);
    }
    function getUrl() {
      return manualReviewLink + "&displayMode=iframe";
    }
    function receiveMessage(event) {
      console.log(event.data);
      if (event.data.target === "parent") {
        if (event.data.eventName === "ManualReviewWithdrawn" || 
            event.data.eventName === "ManualReviewWasPaused" || 
            event.data.eventName === "ManualReviewWasCompleted" ) {
          document.getElementById("iframe").style.display = "none";
        }
      }
    }
  </script>
</head>
<body
  style="background-color: #999999; min-height: 100%; height: 100%; position: relative; margin: 0; padding: 0; background: linear-gradient(to bottom right, #4380bc, #5ba484);">
  <div id="main"
    style="height: 100%; position: relative; padding:20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
  </div>
</body>
</html>

Overview

Developer Guide

Iframe appearance

Iframe events

​Iframe appearance

​Iframe events

Iframe appearance

Iframe events