> ## Documentation Index
> Fetch the complete documentation index at: https://developer.sandbox.co.in/llms.txt
> Use this file to discover all available pages before exploring further.

# Web

> Integrate EntityLocker SDK into your web application using JavaScript

Integrate EntityLocker business document retrieval into your web application using the JavaScript SDK. The SDK provides a pre-built interface that handles the complete EntityLocker flow.

## 1. Create a session

Before initializing the SDK, you must create a **unique session**.
Each SDK instance requires its own session to ensure secure and independent interactions.

Use the [Create Session](https://developer.sandbox.co.in/api-reference/kyc/entitylocker-sdk/endpoints/create_session.md) endpoint to generate this session.
This is a **server-side API call** that uses [Sandbox Authentication](https://developer.sandbox.co.in/api-reference/authenticate.md) to validate your credentials.

Once created, you'll receive a `session_id`, which you'll need when initializing the SDK on the client side.

## 2. Add the SDK script

Include the EntityLocker SDK script in your HTML page.

```html theme={null}
<script src="https://sdk.sandbox.co.in/kyc/entitylocker/sdk.js"></script>
```

The SDK is loaded globally and available as `EntitylockerSDK`.

## 3. Initialize the SDK

Configure and launch the EntityLocker SDK when the user initiates document retrieval.

> **3.1 Basic implementation**
>
> ```html theme={null}
> <button onclick="launch()">Fetch with EntityLocker</button>
>
> <script>
>   function launch() {
>     // Set your API key
>     EntitylockerSDK.setAPIKey("YOUR_API_KEY");
>
>     // Configure the SDK options
>     const options = {
>       session_id: "a7fac865-61a9-4589-b80c....", // Replace with your session ID from Step 1
>       brand: {
>         name: "MoneyApp", // Your business or app name
>         logo_url: "https://example.com/your_logo", // Publicly accessible URL of your logo
>       },
>       theme: {
>         mode: "light", // Options: "light" or "dark"
>         seed: "#3D6838", // Primary color for theme customization
>       },
>     };
>
>     // Launch the EntityLocker SDK
>     EntitylockerSDK.open(options);
>   }
> </script>
> ```

> **3.2 SDK options reference**
>
> ```json theme={null}
> {
>   "session_id": "a7fac865-61a9-4589-b80c....",
>   "brand": {
>     "name": "MoneyApp",
>     "logo_url": "https://example.com/your_logo"
>   },
>   "theme": {
>     "mode": "light",
>     "seed": "#3D6838"
>   }
> }
> ```
>
> **session\_id** `string` *required*
>
> Unique session ID generated when Create Session API is called.
>
> **brand** `object` *required*
>
> Configuration for branding displayed in the EntityLocker interface.
>
> **child attributes**
>
> **name** `string` *required*
>
> Display name of your business or app shown during the EntityLocker flow.
>
> **logo\_url** `string` *required*
>
> Publicly accessible HTTPS URL of your logo displayed within the SDK.
>
> **theme** `object` *required*
>
> Appearance configuration for the SDK.
>
> **child attributes**
>
> **mode** `string` *required*
>
> Sets the overall appearance of the SDK. Accepts `"light"` or `"dark"`.
>
> **seed** `string` *required*
>
> Primary brand color used in the SDK interface. Accepts a hex code.

## 4. Handle SDK events

Set up an event listener to handle SDK events indicating session completion, cancellation, or errors.

```javascript theme={null}
// Define a custom event listener to handle SDK events
class EventListener extends EntitylockerSDK.EventListener {
  constructor(callback) {
    super();
    this.callback = callback;
  }
  onEvent(event) {
    if (this.callback) {
      this.callback(event);
    }
  }
}

// Define a callback function to process events from the SDK
const handleEvent = (event) => {
  console.log("Received event:", event);
  
  switch (event.type) {
    case "in.co.sandbox.kyc.entitylocker_sdk.session.completed":
      // Documents were fetched successfully
      // Proceed with your application flow
      fetchDocumentsFromBackend(sessionId);
      break;

    case "in.co.sandbox.kyc.entitylocker_sdk.session.closed":
      // User closed or exited the SDK
      showMessage("Document retrieval cancelled");
      break;

    default:
      console.log("Unhandled event:", event);
  }
};

// Initialize the event listener with your callback
const eventListener = new EventListener(handleEvent);
EntitylockerSDK.setEventListener(eventListener);
```

To programmatically verify the final status of a session, call the [Session Status](https://developer.sandbox.co.in/api-reference/kyc/entitylocker-sdk/endpoints/get_session_status.md) endpoint from your backend.

## Event types

The SDK emits the following event types:

| Event Type | Description |
| - | - |
| `in.co.sandbox.kyc.entitylocker_sdk.session.completed` | User successfully completed the EntityLocker flow and documents were retrieved |
| `in.co.sandbox.kyc.entitylocker_sdk.session.closed` | User closed the SDK without completing the flow |

## Next steps

> **[Create Session API](https://developer.sandbox.co.in/api-reference/kyc/entitylocker-sdk/endpoints/create_session.md)**
>
> Learn how to create sessions for the SDK

> **[Session Status API](https://developer.sandbox.co.in/api-reference/kyc/entitylocker-sdk/endpoints/get_session_status.md)**
>
> Monitor session progress and status

> **[Fetch Document API](https://developer.sandbox.co.in/api-reference/kyc/entitylocker-sdk/endpoints/fetch_document.md)**
>
> Retrieve document data after completion


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.