Implementation

The Web OCR SDK initialization is performed through the call of the .initialize() function, which belongs to the WebOCR class and is contained in our QiTechWebOCR library. The process is divided into two main steps:

1. Configuration and Instantiation: Prepare and configure the SDK instance.

2. Capture Initialization: Start the document capture flow for the end user.

Below is a complete example of how to instantiate and initialize the SDK, followed by a detailed explanation of each step.

Complete example:

<script>
    var htmlComponent = document.getElementById('webOCR')
    var webOCR = new QiTechWebOCR.WebOCR(
        htmlComponent,
        "<WEB_TOKEN>",
        "<SESSION_ID>"
    )
    .setThemeConfiguration(
        {
            "companyLogo": "<PATH_OR_URL_TO_YOUR_COMPANY_LOGO>",
            "backgroundColor": "<BACKGROUND_COLOR_HEX>",
            "fontColor": "<FONT_COLOR_HEX>",
            "buttonColor": "<BUTTON_COLOR_HEX>",
            "fontFamily": "<FONT_FAMILY>"
        }
    )
    .setShowInstructionScreen(true)
    .setShowSuccessScreen(true)
    .setShowAllowedTemplatesScreen(false)
    .setSandboxEnvironment()
    .build()

    function initOCR(document_types) {
        webOCR.initialize(document_types)
        .then((ocr_key) => {
            console.log(ocr_key)
        })
        .catch((error) => {
            console.log(error)
        })
    }

    initOCR(['cnh', 'rg', 'cnh_digital'])

</script>

Configuration and Instantiation:

To get started, create a new instance of the WebOCR class. The constructor requires three mandatory parameters, which must be passed in the exact order specified below:

• htmlComponent (String): The id of the HTML element in your DOM where the SDK will be rendered.

• webToken (String): Your authentication token for API usage.

• sessionId (String): A unique identifier for the user session.

Customization (Optional)

After creating the instance, you can use the following chained methods to customize the user experience and make the SDK appearance compatible with your application. The setShow... methods allow you to decide between using our SDK's default screens or implementing your own interfaces and instruction flows.

• setThemeConfiguration (object): Allows customization of the SDK appearance. This method receives an object with the following keys:

  • companyLogo (String): URL or path to your company logo.

  • backgroundColor (String): Background color in hexadecimal format (e.g.: '#FFFFFF').

  • fontColor (String): Font color in hexadecimal format (e.g.: '#000000').

  • buttonColor (String): Button color in hexadecimal format (e.g.: '#0000FF').

  • fontFamily (String): Font family to be used (e.g.: 'Arial').

• setShowInstructionScreen (boolean): Defines whether the initial instruction screen will be displayed.

• setShowAllowedTemplateScreen (boolean): Defines whether the screen that informs the accepted documents will be displayed. We recommend enabling it or implementing a version of this screen so that the user knows which documents they can send.

• setShowSuccessScreen (boolean): Defines whether the success screen, at the end of the capture, will be displayed.

• setSandboxEnvironment: Configures the SDK to point to the sandbox environment. Use this method during your tests.

Build

Finally, you must call the build() function to instantiate the WebOCR class with the passed configurations. For more information and details about the constructor, see the page about the constructor.

Initializing Document Capture

With the WebOCR instance properly configured, call the initialize() method to start the capture flow. This method receives as a parameter a list (array) of strings, where each string represents a document type that the user will be able to send. If the user tries to send a document that is not in the list, an error message will be displayed, instructing them to try again with a valid document. To allow sending other documents not listed, include the string 'others' in your list.

Table with accepted templates:

Name	Type	Description
cnh	String	Capture of physical CNH (closed), in two steps, FRONT and BACK
rg	String	Capture of physical RG (closed), in two steps, FRONT and BACK
cin_digital	String	Submission of digital RG or National Identity Card (CIN) digital (pdf) issued by an official application
rne	String	Capture of physical RNE, in two steps, FRONT and BACK
crnm	String	Capture of physical CRNM, in two steps, FRONT and BACK
others	String	Should be used to allow sending other documents besides those listed above

Attention

Adding the others type to the allowed templates causes every document sent to be accepted. Thus, even non-official documents will be accepted.

Return Handling

The initialize() method returns a Promise:

• Success: At the end of the flow, the Promise will be resolved, returning an object that contains the ocr_keys property. This property is a list with the keys (ocr_key) of the captured images.

• Error: If any error occurs during the process, the Promise will be rejected. You can catch these errors using the .catch() method.

For more details, consult the page about the initialize() function.

function.