# Installation Guide

## Compatible Browsers

The capture frame provided through the SDK is compatible with the following combinations of browsers and operating systems:

<table><thead><tr><th width="149">Operational System</th><th>Chrome</th><th>Firefox</th><th>Safari</th><th>Samsung Internet</th><th>Opera</th><th>Edge</th></tr></thead><tbody><tr><td>Windows (desktop)</td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJjaGVjayIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjNGNhNzQ2Ij4KPC9jaXJjbGU+PHBhdGggZD0iTTE4IDcuNWwtOC4yNSA4LjI1TDYgMTIiIHN0cm9rZT0iI2ZmZmZmZiIgCnN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4=" alt="Supported"></td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJjaGVjayIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjNGNhNzQ2Ij4KPC9jaXJjbGU+PHBhdGggZD0iTTE4IDcuNWwtOC4yNSA4LjI1TDYgMTIiIHN0cm9rZT0iI2ZmZmZmZiIgCnN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4=" alt="Supported"></td><td>N/A</td><td>N/A</td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJ4IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjZDczYTNhIj48L2NpcmNsZT4KICAgIDxwYXRoIGQ9Ik0xNi41IDcuNWwtOSA5TTcuNSA3LjVsOSA5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPC9wYXRoPgo8L3N2Zz4KCgo=" alt="Not supported"></td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJ4IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjZDczYTNhIj48L2NpcmNsZT4KICAgIDxwYXRoIGQ9Ik0xNi41IDcuNWwtOSA5TTcuNSA3LjVsOSA5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPC9wYXRoPgo8L3N2Zz4KCgo=" alt="Not supported"></td></tr><tr><td>Android</td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJjaGVjayIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjNGNhNzQ2Ij4KPC9jaXJjbGU+PHBhdGggZD0iTTE4IDcuNWwtOC4yNSA4LjI1TDYgMTIiIHN0cm9rZT0iI2ZmZmZmZiIgCnN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4=" alt="Supported"></td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJ4IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjZDczYTNhIj48L2NpcmNsZT4KICAgIDxwYXRoIGQ9Ik0xNi41IDcuNWwtOSA5TTcuNSA3LjVsOSA5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPC9wYXRoPgo8L3N2Zz4KCgo=" alt="Not supported"></td><td>N/A</td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJjaGVjayIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjNGNhNzQ2Ij4KPC9jaXJjbGU+PHBhdGggZD0iTTE4IDcuNWwtOC4yNSA4LjI1TDYgMTIiIHN0cm9rZT0iI2ZmZmZmZiIgCnN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4=" alt="Supported"></td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJ4IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjZDczYTNhIj48L2NpcmNsZT4KICAgIDxwYXRoIGQ9Ik0xNi41IDcuNWwtOSA5TTcuNSA3LjVsOSA5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPC9wYXRoPgo8L3N2Zz4KCgo=" alt="Not supported"></td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJ4IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjZDczYTNhIj48L2NpcmNsZT4KICAgIDxwYXRoIGQ9Ik0xNi41IDcuNWwtOSA5TTcuNSA3LjVsOSA5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPC9wYXRoPgo8L3N2Zz4KCgo=" alt="Not supported"></td></tr><tr><td>iOS</td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJjaGVjayIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjNGNhNzQ2Ij4KPC9jaXJjbGU+PHBhdGggZD0iTTE4IDcuNWwtOC4yNSA4LjI1TDYgMTIiIHN0cm9rZT0iI2ZmZmZmZiIgCnN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4=" alt="Supported"></td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJjaGVjayIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjNGNhNzQ2Ij4KPC9jaXJjbGU+PHBhdGggZD0iTTE4IDcuNWwtOC4yNSA4LjI1TDYgMTIiIHN0cm9rZT0iI2ZmZmZmZiIgCnN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4=" alt="Supported"></td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJjaGVjayIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjNGNhNzQ2Ij4KPC9jaXJjbGU+PHBhdGggZD0iTTE4IDcuNWwtOC4yNSA4LjI1TDYgMTIiIHN0cm9rZT0iI2ZmZmZmZiIgCnN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4=" alt="Supported"></td><td>N/A</td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJ4IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjZDczYTNhIj48L2NpcmNsZT4KICAgIDxwYXRoIGQ9Ik0xNi41IDcuNWwtOSA5TTcuNSA3LjVsOSA5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPC9wYXRoPgo8L3N2Zz4KCgo=" alt="Not supported"></td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJ4IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjZDczYTNhIj48L2NpcmNsZT4KICAgIDxwYXRoIGQ9Ik0xNi41IDcuNWwtOSA5TTcuNSA3LjVsOSA5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPC9wYXRoPgo8L3N2Zz4KCgo=" alt="Not supported"></td></tr><tr><td>MacOS (desktop)</td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJjaGVjayIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjNGNhNzQ2Ij4KPC9jaXJjbGU+PHBhdGggZD0iTTE4IDcuNWwtOC4yNSA4LjI1TDYgMTIiIHN0cm9rZT0iI2ZmZmZmZiIgCnN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4=" alt="Supported"></td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJjaGVjayIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjNGNhNzQ2Ij4KPC9jaXJjbGU+PHBhdGggZD0iTTE4IDcuNWwtOC4yNSA4LjI1TDYgMTIiIHN0cm9rZT0iI2ZmZmZmZiIgCnN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4=" alt="Supported"></td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJjaGVjayIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjNGNhNzQ2Ij4KPC9jaXJjbGU+PHBhdGggZD0iTTE4IDcuNWwtOC4yNSA4LjI1TDYgMTIiIHN0cm9rZT0iI2ZmZmZmZiIgCnN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4=" alt="Supported"></td><td>N/A</td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJ4IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjZDczYTNhIj48L2NpcmNsZT4KICAgIDxwYXRoIGQ9Ik0xNi41IDcuNWwtOSA5TTcuNSA3LjVsOSA5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPC9wYXRoPgo8L3N2Zz4KCgo=" alt="Not supported"></td><td><img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJ4IiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEyIiBmaWxsPSIjZDczYTNhIj48L2NpcmNsZT4KICAgIDxwYXRoIGQ9Ik0xNi41IDcuNWwtOSA5TTcuNSA3LjVsOSA5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPC9wYXRoPgo8L3N2Zz4KCgo=" alt="Not supported"></td></tr></tbody></table>

In general, the SDK supports WebRTC and the more recent versions of the browsers listed above. For compatibility and security reasons, functionality on very old versions of these browsers is not guaranteed.

{% hint style="info" %}
The capture component provided through the Flutter SDK supports versions equal to or higher for the following technologies:

* **Android:** 5.0 (API 21);
* **iOS:** 11.
  {% endhint %}

## Webview Operation

It is a system component that allows Android or iOS applications to display web content directly within the app, based on the same code project. It is responsible for navigation on websites and web content within the apps.

### **Preconditions**

* It is necessary to have implemented the Web SDK in an application that contains a secure domain with the https protocol.

### Compatibility with Operating Systems

### Android:

The Web SDK is compatible with webviews running on Android 8 (API 26) or higher.

For the SDK to work correctly, it is necessary to add some permissions and configurations to the **AndroidManifest** file, which are as follows:

{% code title="AndroidManifest.xml" %}

```java
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.webkit.PermissionRequest" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-feature android:name="android.hardware.camera2.full" />
<uses-feature android:name="android.hardware.camera2.autofocus" />
```

{% endcode %}

It is recommended to use Chromium-based webviews with some customizations for better JavaScript performance. You can find an implementation example through our [PoCs here](https://devcenter.unico.io/idcloud-v2/by-client-integration/sdk/additional-resources/pocs).

### iOS

The Web SDK is compatible with webviews running on **iOS 13 or higher.**

For the SDK to function correctly, it is necessary to add some permissions and configurations to the `info.plist` file, which are as follows:

{% code title="info.plist" %}

```objectivec
<key>NSCameraUsageDescription</key>
<string>Camera usage description</string>

<key>NSLocationWhenInUseUsageDescription</key>
<string>Mensagem da cliente</string>
```

{% endcode %}

iOS provides two ways to use webviews in applications: WKWebView and SFSafariViewController. We recommend using SFSafariViewController for better compatibility with DOM resources. You can find an implementation example through our [PoCs here](https://devcenter.unico.io/idcloud-v2/by-client-integration/sdk/additional-resources/pocs).

### **C**ompatibility with Hybrid Frameworks

The component has been approved only for native layers. To be used in hybrid frameworks (Flutter or React Native), it is necessary to implement it in the native layer of Android and/or iOS.

{% hint style="info" %}
When running, the SDK will request permission to open the camera for the webview, which in turn will request the same permission from the native application. **It is mandatory that your native application has the necessary permissions set in the configuration files.**
{% endhint %}

{% hint style="danger" %}
Our support is limited to applications developed directly on native Android and iOS platforms, using their respective native modules. Currently, we do not offer support for applications developed in **hybrid frameworks** such as React Native, Ionic, or other cross-platform development technologies.
{% endhint %}

## Compatibility with social media webviews

The component has been approved on the Instagram and Facebook social media platforms in Liveness mode without interaction. The Liveness mode with interaction is not compatible with webviews in social media apps.

## Installing the Web SDK

To implement the Unico IDCloud Android SDK into your Android application, follow the step-by-step guide below:

{% stepper %}
{% step %}

### Content Security Policy (CSP) Setting

The Web SDK uses Web Workers to enhance security and performance. Therefore, it is necessary to add the following configurations to your Content Security Policy (CSP):

```html
<meta
  http-equiv="Content-Security-Policy"
  content="
      script-src 'self' 'unsafe-eval' *.googleapis.com *.acesso.io *.unico.run *.unico.io *.unico.app *.sentry.io; 
      worker-src 'self' blob:; 
      child-src 'self' blob:;
      style-src 'self' 'unsafe-inline' *.googleapis.com *.acesso.io *.unico.run *.unico.io *.unico.app;
      font-src 'self' https://fonts.gstatic.com *.acesso.io *.unico.run *.unico.io *.unico.app;
      img-src 'self' data: blob: *.acesso.io *.unico.run *.unico.io *.unico.app;
      media-src 'self' data: *.acesso.io *.unico.run *.unico.io *.unico.app;
      script-src-elem 'self' 'unsafe-inline' blob: *.googleapis.com *.acesso.io *.unico.run *.unico.io *.unico.app;
      connect-src *.googleapis.com *.acesso.io *.unico.run *.unico.io *.unico.app *.sentry.io"
/>
```

{% hint style="warning" %}
If your application has a CSP, this configuration is mandatory to ensure the correct functioning of the SDK.
{% endhint %}

{% endstep %}

{% step %}

### Obtaining Credentials

* Contact the CSs and/or Onboarding team.
* Request the SDK Key by providing the identifiers of your applications: **Hostname** for WEB.
* The identifiers of your applications will be linked to the SDK Key by the Unico team.
* You will receive your SDK Key to implement the **UnicoConfig.**

{% endstep %}

{% step %}

### Embedding the Credentials in Your Project

* Implement the `UnicoConfig` class in your class:

{% code overflow="wrap" %}

```javascript
import { UnicoConfig } from "unico-webframe"

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

{% endcode %}

{% hint style="warning" %}
Depracated Method:

```javascript
import { UnicoConfig } from "unico-webframe"

const config = new UnicoConfig();
  .setProjectNumber("<YOUR_PROJECT_NUMBER>");
  .setProjectId("<YOUR_PROJECT_ID>");
  .setMobileSdkAppId("<YOUR_MOBILE_SDK_APP_ID>");
  .setHostname("<YOUR_HOSTNAME>");
  .setHostInfo("<YOUR_HOST_INFO>");
  .setHostKey("<YOUR_HOST_KEY>");
```

{% endhint %}

{% endstep %}

{% step %}

### Embedding Other Files in Your Project

The table below lists additional resource files available for inclusion in your project. You should download them and include them in your project to perform Liveness capture:

| Release do SDK    | Release from FaceTec                                                                |
| ----------------- | ----------------------------------------------------------------------------------- |
| 3.23.7            | [9.7.114](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.114/resources.zip) |
| 3.23.3 -> 3.23.6  | [9.7.107](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.107/resources.zip) |
| 3.23.0 -> 3.23.1  | [9.7.102](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.102/resources.zip) |
| 3.22.6 -> 3.22.7  | [9.7.100](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.100/resources.zip) |
| 3.22.5            | [9.7.99](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.99/resources.zip)   |
| 3.22.3 -> 3.22.4  | [9.7.98](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.98/resources.zip)   |
| 3.22.2            | [9.7.96](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.96/resources.zip)   |
| 3.22.1            | [9.7.93](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.93/resources.zip)   |
| 3.22.0            | [9.7.90](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.90/resources.zip)   |
| 3.21.3 -> 3.21.4  | [9.7.85](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.85/resources.zip)   |
| 3.21.2            | [9.7.82](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.82/resources.zip)   |
| 3.21.1            | [9.7.80](https://cdn.unico.io/sdk/check/facetec/v2-browser-v9.7.80/resources.zip)   |
| 3.20.10 -> 3.21.0 | [9.7.76](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.76/resources.zip)      |
| 3.20.9            | [9.7.75](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.75/resources.zip)      |
| 3.20.8            | [9.7.73](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.73/resources.zip)      |
| 3.20.7            | [9.7.68](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.68/resources.zip)      |
| 3.20.5 -> 3.20.6  | [9.7.65](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.65/resources.zip)      |
| 3.20.3 -> 3.20.4  | [9.7.64](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.64/resources.zip)      |
| 3.20.2            | [9.7.63](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.63/resources.zip)      |
| 3.20.1            | [9.7.61](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.61/resources.zip)      |
| 3.20.0            | [9.7.55](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.55/resources.zip)      |
| 3.19.3            | [9.7.51](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.51/resources.zip)      |
| 3.19.2            | [9.7.47](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.47/resources.zip)      |
| 3.19.0 -> 3.19.1  | [9.7.45](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.45/resources.zip)      |
| 3.18.11           | [9.7.41](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.41/resources.zip)      |
| 3.18.10           | [9.7.39](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.39/resources.zip)      |
| 3.18.9            | [9.7.36](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.36/resources.zip)      |
| 3.18.8            | [9.7.33](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.33/resources.zip)      |
| 3.18.7            | [9.7.31](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.31/resources.zip)      |
| 3.18.6            | [9.7.29](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.29/resources.zip)      |
| 3.18.5            | [9.7.27](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.27/resources.zip)      |
| 3.18.4            | [9.7.25](https://cdn.unico.io/sdk/check/facetec/browser-v9.7.25/resources.zip)      |
| 3.18.0 -> 3.18.3  | [9.6.92](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.92/resources.zip)      |
| 3.16.4 -> 3.17.0  | [9.6.89](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.89/resources.zip)      |
| 3.16.3            | [9.6.85](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.85/resources.zip)      |
| 3.16.2            | [9.6.84](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.84/resources.zip)      |
| 3.14.1 -> 3.16.1  | [9.6.73](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.73/resources.zip)      |
| 3.11.1 -> 3.14.0  | [9.6.65](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.65/resources.zip)      |
| 3.10.2 -> 3.11.0  | [9.6.56](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.56/resources.zip)      |
| 3.10.1            | [9.6.53](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.53/resources.zip)      |
| 3.9.1 -> 3.10.0   | [9.6.40](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.40/resources.zip)      |
| 3.9.0             | [9.6.38](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.38/resources.zip)      |
| 3.8.3             | [9.6.33](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.33/resources.zip)      |
| 3.8.2             | [9.6.30](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.30/resources.zip)      |
| 3.8.0 -> 3.8.1    | [9.6.26](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.26/resources.zip)      |
| 3.7.1 -> 3.7.2    | [9.6.24](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.24/resources.zip)      |
| 3.6.5 -> 3.7.0    | [9.6.16](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.16/resources.zip)      |
| 3.6.3 -> 3.6.4    | [9.6.11](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.11/resources.zip)      |
| 3.6.1 -> 3.6.2    | [9.6.4](https://cdn.unico.io/sdk/check/facetec/browser-v9.6.4/resources.zip)        |
| 3.5.4 -> 3.6.0    | [9.4.18](https://cdn.unico.io/sdk/check/facetec/browser-v9.4.18/resources.zip)      |
| 3.5.3             | [9.4.14](https://cdn.unico.io/sdk/check/facetec/browser-v9.4.14/resources.zip)      |
| 3.5.0 -> 3.5.2    | [9.4.11](https://cdn.unico.io/sdk/check/facetec/browser-v9.4.11/resources.zip)      |

{% endstep %}

{% step %}

### Download the AI files for the SDK

To download the AI file for the Unico Check SDK Web, click [here](https://cdn.unico.io/sdk/check/bio/models.zip).

{% hint style="warning" %}
All additional files must be in a public location and visible to the Web within your project.
{% endhint %}

{% endstep %}

{% step %}

### **Installation**

The Web SDK is provided through an npm package or CDN. To install it, follow the steps below according to your preference:

Installation via **NPM** package

To install the SDK in your project via [npm](https://www.npmjs.com/package/unico-webframe), simply run the following command:

```javascript
npm install unico-webframe
```

Or via **yarn**, with the command below:

```
yarn add unico-webframe
```

**Installation via CDN**

To install the SDK in your project through the CDN, simply download the file below and import it into your project.

* [Download ](https://cdn.unico.io/sdk/check/bio/unico-webframe-3.23.7.zip)version `3.23.7`.

{% endstep %}

{% step %}

### Importing

After installing the SDK, simply import it correctly into your project.

If you installed the package via npm:

```javascript
import { UnicoCheckBuilder, SelfieCameraTypes, UnicoThemeBuilder, DocumentCameraTypes, UnicoConfig, LocaleTypes } from 'unico-webframe'
```

If you installed the package via cdn:

```javascript
import { UnicoCheckBuilder, SelfieCameraTypes, UnicoThemeBuilder, DocumentCameraTypes, UnicoConfig, LocaleTypes } from 'UnicoCheckBuilder.min.js'
```

{% endstep %}
{% endstepper %}

Done. After completing the SDK installation, proceed to the implementation by reading the following material:

{% embed url="<https://devcenter.unico.io/idcloud-v2/by-client-integration/sdk/available-sdks/web-sdk/usage-and-integration-guide>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://devcenter.unico.io/unico-idcloud/by-client-integration/sdk/available-sdks/web-sdk/installation-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.