> ## Documentation Index
> Fetch the complete documentation index at: https://docs.verisoul.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Browser

> Integrating Verisoul in Web Applications

Integrating Verisoul in web browsers is straightforward and requires minimal code changes. This guide covers everything you need to implement Verisoul's fraud prevention in your web application.

## Installation

<Info>
  For production web integrations, we strongly recommend setting up a [custom hostname](/integration/custom-hostname) and loading the SDK from your own subdomain. Without a custom hostname, 4-6% of traffic may be blocked by ad blockers or privacy extensions.
</Info>

### Script Tag Installation

There are two options for installing the Verisoul script in your HTML. You should place the script tag in the `<head>` as early as possible to ensure the Verisoul object is available on the window before calling Verisoul functions.

Use your custom hostname for production traffic:

```html theme={null}
<script async src="https://{custom_hostname}/bundle.js" verisoul-project-id="{project_id}"></script>
```

If you have not set up a custom hostname yet, you can use the Verisoul-hosted SDK URL for sandbox, pilots, or initial testing:

```html theme={null}
<script async src="https://js.verisoul.ai/{env}/bundle.js" verisoul-project-id="{project_id}"></script>
```

#### Async Installation (Recommended)

The async installation provides better page load performance by loading the script asynchronously, preventing it from blocking the page render.

This option includes a helper script that ensures the Verisoul object is always available on the window, eliminating the need to await the script load before calling Verisoul functions. The helper script is not required but will generally make the integration easier.

```html theme={null}
<script async src="https://{custom_hostname}/bundle.js" verisoul-project-id="{project_id}"></script>
<script>!function(e){if(e.Verisoul)return;const r=[],t={},o=new Proxy(t,{get:(e,o)=>o in t?t[o]:(...e)=>new Promise(((t,n)=>r.push([o,e,t,n]))),set:(e,r,o)=>(t[r]=o,!0)});e.Verisoul=o;const n=()=>{Object.keys(t).length&&r.splice(0).forEach((([e,r,o,n])=>{try{Promise.resolve(t[e](...r)).then(o,n)}catch(e){n(e)}}))},c=document.querySelector("script[verisoul-project-id]"),s=()=>r.splice(0).forEach((([,,,e])=>e(new Error("Failed to load Verisoul SDK"))));if(!c)return void s();c.addEventListener("load",n,{once:!0}),c.addEventListener("error",(()=>{clearInterval(i),s()}),{once:!0});const i=setInterval((()=>{Object.keys(t).length&&(clearInterval(i),n())}),40)}(window);</script>
```

#### Synchronous Installation

If you prefer a slightly simpler integration, you can use the basic script tag. Note that this will block page rendering until the script is loaded. The Verisoul object will be available on the window immediately after the script is loaded.

```html theme={null}
<script src="https://{custom_hostname}/bundle.js" verisoul-project-id="{project_id}"></script>
```

#### Script Tag Parameters

Replace the following parameters in either installation method:

* `{custom_hostname}`: Your configured custom hostname, such as `js.example.com`. Follow the [Custom Hostname](/integration/custom-hostname) guide to set this up.
* `{env}`: Use either `prod` or `sandbox` when loading from the Verisoul-hosted URL, `https://js.verisoul.ai/{env}/bundle.js`
* `{project_id}`: Your project ID, which must match the environment

### Content Security Policy (CSP)

If your application has a Content Security Policy, update it to include the following Verisoul domains:

```html theme={null}
<meta http-equiv="Content-Security-Policy" content="
  script-src 'self' https://{custom_hostname} 'sha256-djmJ48CjCfXomE4x2us2ah26HMfPp94fry65gUtGBSY=';
  worker-src 'self' blob: data:;
  connect-src 'self' https://*.verisoul.ai wss://*.verisoul.ai;
">
```

If you are using the Verisoul-hosted SDK URL before your custom hostname is active, allow `https://js.verisoul.ai` in `script-src` instead.

## Usage

Once installed, you can use the SDK to get the current `session_id` when you need to make a prediction.

### session()

<Tip>If you are looking to get started quickly or to Pilot Verisoul, see [account()](#account) for a simplified integration.</Tip>

Verisoul generates a `session_id` to uniquely identify each user session. The `session_id` is required when you need to get a risk prediction from the backend API and must be passed from your client to the server.

You can get the current `session_id` at any time by calling `Verisoul.session()`. The function returns a promise that resolves once Verisoul collects a minimum amount of session information to make a prediction.

**Important**: Each `session_id` expires after 24 hours and cannot be used to call the backend API after expiration. It is recommended to only get a `session_id` right before you need to make a server-side request.

**Example usage:**

```javascript theme={null}
const login = async () => {
    try {
        const {session_id} = await window.Verisoul.session();

        // pass session_id to backend
    } catch (e) {
        console.log("Verisoul failed get session_id", e);
    }
}
```

### account()

<Warning>
  This function is intended **only** for customers piloting Verisoul. Do not use for long term production use or real-time fraud prevention.
</Warning>

The `account()` function provides a simplified way to send user account information to Verisoul directly from the client side. While easy to integrate, this method has important limitations:

* **Offline analysis only**: Data sent via `account()` is only visible in the Verisoul dashboard
* **No real-time decisions**: Unlike the server-side API, this method doesn't allow your application to receive and act on Verisoul's risk scores in real-time
* **Limited use case**: Designed specifically for initial pilots and evaluation purposes

The function accepts the [Account Object](/api-reference/types/account) which is the same object used in the [authenticate API](/api-reference/session/authenticate), making it easy to transition to the server-side integration later.

Only the `id` field is required.

**Example usage:**

```javascript theme={null}
const login = async () => {
    // Send account information to Verisoul for dashboard analysis
    await window.Verisoul.account({
        id: "example-account-id",
        email: "example@example.com",
        lists: ["beta-users", "allow"],
        metadata: {
            "paid": true,
        }
    });
}
```

For production environments, we strongly recommend implementing the full server-side integration to leverage Verisoul's real-time fraud prevention capabilities.

## Next Steps

* Learn about [Backend Integration](/integration/backend/authenticated) for API implementation
* See Integration [Best Practices](/integration/best-practices)
* Explore [Mobile Integration](/integration/frontend/android) for native apps
* See the [Web Sample App](/examples/web-sample-app) for a complete implementation
