---
title: Initialization
canonical: https://developer.unico.io/dual-api/developers/sdks-and-tools/web/web-sdk/initialization
locale: en
generated_by: markdown-export
---

## Where to initialize

Initialize the SDK as early as possible — typically when the page or component containing the capture frame loads. See [Best practices](/dual-api/developers/sdks-and-tools/web/web-sdk/resources) 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:

```javascript
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`:

```javascript
const unicoCameraBuilder = new UnicoCheckBuilder();
```

## Configure resource paths

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

```javascript
unicoCameraBuilder.setResourceDirectory("/resources");
```

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

```javascript
unicoCameraBuilder.setModelsPath("https://yoursite.com/models");
```

:::info[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](/dual-api/developers/sdks-and-tools/web/web-sdk/installation) 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:

```javascript
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

```javascript
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](/dual-api/developers/sdks-and-tools/web/web-sdk/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.