Skip to main content

Initialization

Where to initialize

Initialize the SDK as early as possible — typically when the page or component containing the capture frame loads. See Best practices for details on why you should not initialize on the capture button click.

Embedding credentials

Implement the UnicoConfig class with the credentials provided by the Onboarding team:

import { UnicoConfig } from "unico-webframe"

const config = new UnicoConfig()
.setHostname("<YOUR_HOSTNAME>")
.setHostKey("<YOUR_HOST_KEY>");
Instantiate the builder

Create a new instance of UnicoCheckBuilder:

const unicoCameraBuilder = new UnicoCheckBuilder();
Configure resource paths

Specify the path of the additional files (if added to your project):

unicoCameraBuilder.setResourceDirectory("/resources");

Specify the path of the AI model files (only required for the Smart camera mode):

unicoCameraBuilder.setModelsPath("https://meusite.com.br/models");
Auto-fetch since 3.18.0

Starting from version 3.18.0, the SDK can automatically fetch the additional resources — simply do not implement setResourceDirectory and ensure that the CSP configuration is applied correctly.

Configure CSS Reset (optional)

By default, the SDK applies a CSS Reset to ensure visual consistency across components. To preserve your application's CSS styles, disable this feature:

unicoCameraBuilder.disableCssReset();
Environment selection

The choice between sandbox and production is made during initialization. Use the SDKEnvironmentTypes enum:

  • SDKEnvironmentTypes.PROD — production environment
  • SDKEnvironmentTypes.UAT — staging environment
import {
UnicoCheckBuilder,
SDKEnvironmentTypes
} from "unico-webframe"

unicoCameraBuilder.setEnvironment(SDKEnvironmentTypes.UAT);
info

If not configured, the Web SDK uses the production environment by default.

For the full list of available environment types, refer to API Reference > Initialization API.

Lifecycle

SDK authentication with the backend takes a few seconds. Initialize early, not when the user clicks the capture button — otherwise the user experiences lag between the click and the camera opening.