Implementation

New in version 4.0.0

Starting from version 4.0.0, the WebOCR constructor no longer receives htmlComponent — the SDK creates and manages its own DOM node internally.

The Web OCR SDK initialization is performed through the call of the .initialize() method, which belongs to the WebOCR class. 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.

Complete example

<script>
    var webOCR = new QiTechWebOCR.WebOCR(
        "<WEB_TOKEN>",
        "<SESSION_ID>"
    )
    .setThemeConfiguration({
        "companyLogo": "<PATH_OR_URL_TO_YOUR_COMPANY_LOGO>",
        "primaryColor": "<PRIMARY_COLOR_HEX>",
        "fontFamily": "<FONT_FAMILY>"
    })
    .setShowInstructionScreen(true)
    .setShowSuccessScreen(true)
    .setShowAllowedTemplatesScreen(false)
    .setSandboxEnvironment()
    .build()

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

    initOCR(['cnh', 'rg', 'rg_digital'])
</script>

Configuration and Instantiation

To get started, create a new instance of the WebOCR class. The constructor requires two mandatory parameters, in the order specified below:

• webToken (String): Your authentication token for API usage.
• sessionId (String): A unique identifier for the user session.

Customization (Optional)

After creating the instance, use the following chained methods to customize the experience:

• setThemeConfiguration (object): Customizes the SDK appearance. Accepted fields:

  • primaryColor (String): Primary color in hexadecimal format — used in buttons, icons, and highlights (e.g.: '#0000FF').
  • companyLogo (String): URL or path to your company logo.
  • fontFamily (String): Font family (e.g.: 'Arial').

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

• setShowAllowedTemplatesScreen (boolean): Defines whether the screen informing accepted documents will be displayed. We recommend enabling it so the user knows which documents they can submit.

• 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.

Build

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

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 the user will be able to submit.

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 CIN (pdf) issued by an official application
rg_digital	String	Submission of digital RG (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: The Promise is resolved with an array of objects, where each object represents a captured document side. See the Collecting Returns page for details on the format.
• Error: The Promise is rejected. You can catch these errors using the .catch() method.