Initialization
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.
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>");
Create a new instance of UnicoCheckBuilder:
const unicoCameraBuilder = new UnicoCheckBuilder();
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");
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.
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();
The choice between sandbox and production is made during initialization. Use the SDKEnvironmentTypes enum:
SDKEnvironmentTypes.PROD— production environmentSDKEnvironmentTypes.UAT— staging environment
import {
UnicoCheckBuilder,
SDKEnvironmentTypes
} from "unico-webframe"
unicoCameraBuilder.setEnvironment(SDKEnvironmentTypes.UAT);
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.
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.