> For the complete documentation index, see [llms.txt](https://docs.vida.id/identity-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vida.id/identity-stack/verify/kyc-web-sdk/integration/frontend-integration/installations.md).

# Installations

The Vida Web SDK offers two integration methods.

{% hint style="info" %}
**Note**: The library is Browser only, it does not support the Node Context.
{% endhint %}

### 1. Integration via Script Tag <a href="#id-1.-integration-via-script-tag" id="id-1.-integration-via-script-tag"></a>

The quickest and simplest way to integrate the Vida Web SDK is to use the package hosted via Vida as a script tag. You can include the SDK in your application by adding the script tag directly to your `index.html` file or dynamically using JavaScript.

{% tabs %}
{% tab title="Sandbox" %}
Add the following script tag for testing and POC purposes:

{% code expandable="true" %}

```shellscript
<script src="https://web-sdk.vida.id/<VERSION>/sandbox/vida-web-sdk.js"></script>
```

{% endcode %}
{% endtab %}

{% tab title="Production" %}
Use the following script tag for production applications:

{% code expandable="true" %}

```shellscript
<script src="https://web-sdk.vida.id/<VERSION>/vida-web-sdk.js"></script>
```

{% endcode %}
{% endtab %}
{% endtabs %}

Replace `<VERSION>` with the latest version provided to you (e.g., `1.1.0`).

#### About Versioning

Vida Web SDK follows **semantic versioning**, a widely used versioning convention that ensures clear communication about the compatibility and changes in the software. Semantic versioning uses a `MAJOR.MINOR.PATCH` format:

<table><thead><tr><th width="137.33984375">Format</th><th>Description</th></tr></thead><tbody><tr><td><strong>MAJOR</strong></td><td>Introduces significant changes that may not be backward compatible.</td></tr><tr><td><strong>MINOR</strong></td><td>Adds new features while maintaining backward compatibility.</td></tr><tr><td><strong>PATCH</strong></td><td>Includes bug fixes and minor updates without changing existing features or compatibility.</td></tr></tbody></table>

### 2. Integration via NPM Package <a href="#id-2.-integration-via-npm-package" id="id-2.-integration-via-npm-package"></a>

You can integrate the Vida Web SDK into your application as an npm package. This approach is ideal for modern web development workflows and allows better management of dependencies. TypeScript is officially supported in Vida web SDK npm package.

To install the SDK, use either of the following commands based on your package manager:

**For Yarn**

{% code expandable="true" %}

```shellscript
yarn add vida-web-sdk
```

{% endcode %}

**For NPM**

{% code expandable="true" %}

```shellscript
npm install vida-web-sdk
```

{% endcode %}

{% hint style="info" %}
**Starting from v1.2.0 -** A single package is published for all environments. Select your target environment at runtime by passing the env option to init():
{% endhint %}

**For earlier version in sandbox , use the version with suffix sandbox.**

{% code expandable="true" %}

```shellscript
yarn add vida-web-sdk@1.1.0-sandbox / npm install vida-web-sdk@1.1.0-sandbox
```

{% endcode %}

This method ensures that the SDK is included in your project's `node_modules` directory, making it easy to manage and update.

### Update Content Security Policy (CSP) Whitelist & Network Whitelist <a href="#update-content-security-policy-csp-whitelist" id="update-content-security-policy-csp-whitelist"></a>

To ensure seamless functionality of the Vida Web SDK, update your Content Security Policy (CSP) and network whitelist to allow the following resource:

**script-src**

{% code expandable="true" %}

```shellscript
Content-Security-Policy: script-src 'self' https://web-sdk.vida.id https://shield.vida.id; 'wasm-unsafe-eval';
```

{% endcode %}

'wasm-unsafe-eval' is required for face detection (WebAssembly).

**Additional CSP Directives** (Only required if you have these directives enforcement)

The SDK also makes API calls and loads additional resources based on the workflow configs. Add the following to your connect-src and img-src.

#### Production Env

{% code expandable="true" %}

```shellscript
connect-src 'self' https://sdk-api.prod.vida.id https://shield.vida.id https://faro-collector-prod-ap-southeast-1.grafana.net https://vida-prod-tijori-1.s3.ap-southeast-3.amazonaws.com;
img-src 'self' https://pixel-shield.vida.id;
```

{% endcode %}

{% hint style="info" %}
**Note:** `https://shield.vida.id` & `https://pixel-shield.vida.id` are **required** only if you have **ID Fraud shield enabled**

`https://vida-prod-tijori-1.s3.ap-southeast-3.amazonaws.com` is **required** only if you have **liveness color flash enabled**
{% endhint %}

#### Sandbox Env

{% code expandable="true" %}

```shellscript
script-src 'self' https://web-sdk.vida.id https://sandbox-shield.vida.id; 'wasm-unsafe-eval';
connect-src 'self' https://sandbox-sdk-api.np.vida.id https://sandbox-shield.vida.id https://faro-collector-prod-ap-southeast-2.grafana.net https://vida-sandbox-tijori-1.s3.ap-southeast-3.amazonaws.com;
img-src 'self' https://sandbox-pixel-shield.vida.id;
```

{% endcode %}

{% hint style="info" %}
**Note:**`https://sandbox-shield.vida.id` & `https://sandbox-pixel-shield.vida.id` are **required** only if you have **ID Fraud shield enabled**

`https://vida-sandbox-tijori-1.s3.ap-southeast-3.amazonaws.com` is **required** only if you have **liveness color flash enabled**<br>

**Tip**: You can use `https://*.vida.id` in place of individual subdomains if your policy allows wildcards. The Grafana collector ( used for error/crash logging ) and the S3 upload hosts ( used only for color flash ) must always be added explicitly.
{% endhint %}

### Network / Firewall Whitelist

Allow outbound HTTPS (port 443) to: (**only needed if SDK is used in an environment that enforces egress filtering or outbound firewall rules**)

{% tabs %}
{% tab title="Production" %}
{% code expandable="true" %}

```java
web-sdk.vida.id 
sdk-api.prod.vida.id 
shield.vida.id 
pixel-shield.vida.id 
faro-collector-prod-ap-southeast-1.grafana.net
vida-prod-tijori-1.s3.ap-southeast-3.amazonaws.com
```

{% endcode %}
{% endtab %}

{% tab title="Sandbox" %}
{% code expandable="true" %}

```java
web-sdk.vida.id 
sandbox-sdk-api.np.vida.id 
sandbox-shield.vida.id 
sandbox-pixel-shield.vida.id 
faro-collector-prod-ap-southeast-2.grafana.net
vida-sandbox-tijori-1.s3.ap-southeast-3.amazonaws.com
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Tip**: Use `*.vida.id` to cover all Vida-owned hosts with a single rule. The Grafana collector and the S3 upload host must still be whitelisted explicitly.

No inbound ports are required. If TLS inspection is enabled, exclude these hosts to avoid certificate failures.
{% endhint %}