> 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.

**Sandbox Environment:**\
Add the following script tag for testing and POC purposes:

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

**Production Environment:**\
Use the following script tag for production applications:

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

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:

1. **MAJOR**: Introduces significant changes that may not be backward compatible.
2. **MINOR**: Adds new features while maintaining backward compatibility.
3. **PATCH**: Includes bug fixes and minor updates without changing existing features or compatibility.

***

#### 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**:

  `yarn add vida-web-sdk`
* For **NPM**:

  `npm install vida-web-sdk`

  **Note: For sandbox , use the version with suffix sandbox.**

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

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 <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) whitelist to allow the following resource:

1. `https://web-sdk.vida.id`
   * **Purpose**: Used for downloading the vida SDK code itself.

#### Example CSP Update <a href="#example-csp-update" id="example-csp-update"></a>

Ensure these domains are added to the appropriate CSP directives, such as `script-src` and `connect-src`:

`Content-Security-Policy: script-src 'self' https://web-sdk.vida.id;`

By adding these URLs to your CSP configuration, you ensure that the SDK and its dependencies load and function correctly.