# Web SDK Guide

## Overview <a href="#overview" id="overview"></a>

The **ComplyCube Web SDK** is a lightweight JavaScript library that lets you embed identity verification and KYC flows directly into your web applications. It provides a ready-made, user-friendly widget for capturing documents, selfies, and proof of address, while handling quality detection and fraud signals under the hood.

## Interactive demo

{% @arcade/embed flowId="kjtci521jMvvMXDZIr7o" url="<https://app.arcade.software/share/kjtci521jMvvMXDZIr7o>" fullWidth="false" %}

## Integration steps

The Web SDK can be integrated in two ways: through [workflows](https://app.gitbook.com/s/KyFKMqftsmT6qln9zo5y/compliance-studio/workflows) for complete verification journeys, or with **check-driven integration** for fine-grained control.&#x20;

The steps below demonstrate how to add the Web SDK to your web application.

{% stepper %}
{% step %}

#### **Create a client**

Every verification flow starts with a **client** (i.e. customer). Use the API to [create the client](https://app.gitbook.com/s/kAhgmUKSf8CFUFVL3GEe/core-resources/clients/create-a-client).

**Example request**

{% tabs %}
{% tab title="cURL" %}

```bash
curl -X POST https://api.complycube.com/v1/clients \
     -H 'Authorization: <YOUR_API_KEY>' \
     -H 'Content-Type: application/json' \
     -d '{
          "type": "person",
          "email": "john.doe@example.com",
          "personDetails":{
               "firstName": "John",
               "lastName" :"Doe"
          }
        }'
```

{% endtab %}

{% tab title="Node.js" %}

```javascript
const { ComplyCube } = require("@complycube/api");

const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });

const client = await complycube.client.create({
  type: "person",
  email: "john.doe@example.com",
  personDetails: {
    firstName: "John",
    lastName: "Doe"
  }
});
```

{% endtab %}

{% tab title="Python" %}

```python
from complycube import ComplyCubeClient
cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')

new_client = {
    'type':'person',
    'email':'john.doe@example.com',
    'personDetails': {
        'firstName':'John',
        'lastName':'Doe'
    }
}

client = cc_api.clients.create(**new_client)
```

{% endtab %}

{% tab title="PHP" %}

```php
use ComplyCube\ComplyCubeClient;

$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');

$result = $ccapi->clients()->create([
    'type' => 'person',
    'email' => 'john@doe.com',
    'personDetails' => [
        'firstName' => 'John',
        'lastName' => 'Doe'
    ]
]);
```

{% endtab %}

{% tab title=".NET" %}

```csharp
using ComplyCube.Net;
using ComplyCube.Net.Resources.Clients;

var clientApi = new ClientApi(new ComplyCubeClient("<YOUR_API_KEY>"));
var newClient = new ClientRequest {
  type = "person",
  email = "john@doe.com",
  personDetails = new PersonDetails {
    firstName = "John",
    lastName = "Doe"
  }
}

var client = await clientApi.CreateAsync(newclientRequest);
```

{% endtab %}
{% endtabs %}

The response will contain an `id` (the Client ID). It is required for the next step.
{% endstep %}

{% step %}

#### Generate an SDK Token

**Tokens** enable clients to send personal data to ComplyCube via our SDKs securely.  Use the [generate token endpoint](https://app.gitbook.com/s/kAhgmUKSf8CFUFVL3GEe/other-resources/tokens) to obtain an SDK token and initialize the Web SDK next.

{% tabs %}
{% tab title="cURL" %}

```bash
curl -X POST https://api.complycube.com/v1/tokens \
     -H 'Authorization: <YOUR_API_KEY>' \
     -H 'Content-Type: application/json' \
     -d '{
          "clientId":"CLIENT_ID",
          "referrer": "*://*/*"
        }'
```

{% endtab %}

{% tab title="Node.js" %}

```javascript
const { ComplyCube } = require("@complycube/api");

const complycube = new ComplyCube({ apiKey: "<YOUR_API_KEY>" });

const token = await complycube.token.generate("CLIENT_ID", {
    referrer: "*://*/*"
});
```

{% endtab %}

{% tab title="Python" %}

```python
from complycube import ComplyCubeClient

cc_api = ComplyCubeClient(api_key='<YOUR_API_KEY>')

token = cc_api.tokens.create('CLIENT_ID','*://*/*')
```

{% endtab %}

{% tab title="PHP" %}

```php
 use ComplyCube\ComplyCubeClient;

$ccapi = new ComplyCubeClient('<YOUR_API_KEY>');

$report = $ccapi->tokens()->generate('CLIENT_ID', '*://*/*');
```

{% endtab %}

{% tab title=".NET" %}

```csharp
using ComplyCube.Net;
using ComplyCube.Net.Resources.SDKTokens;

var sdkTokenApi = new SDKTokenApi(new ComplyCubeClient("<YOUR_API_KEY>"));

var sdkTokenRequest  =  { clientId = "CLIENT_ID" , 
                        referrer = "*://*/*" }

var sdkToken = await sdkTokenApi.GenerateToken(sdkTokenRequest);
```

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### Mount the SDK

To mount our Web SDK,  you need to include it on your target page, as shown below.&#x20;

```html
<!DOCTYPE html>
<html>

  <head>
    <!-- Importing the Javascript library -->
    <script src="complycube.min.js"></script>
    
    <!-- Importing the default CSS -->
    <link rel="stylesheet" href="style.css" />
  </head>
  
  <script>
    var complycube = {};
    function startVerification() {
      complycube = ComplyCube.mount({
        token: "<YOUR_WEB_SDK_TOKEN>",
        onComplete: function(data) {
          console.log("Capture complete", data)
        },
      });
    }
  </script>
  
  <body>
    <!-- This is where the Web SDK will be mounted -->
    <div id="complycube-mount"></div>

    <!-- Clicking the button will start the ComplyCube verification UI -->
    <button onClick="startVerification()">Start verification</button>
  </body>
  
</html>

```

{% hint style="info" %}
The links to `complycube.min.js` and `style.css` can be found in your [developers portal](https://portal.complycube.com/developers/webSdk).
{% endhint %}
{% endstep %}
{% endstepper %}

## Next steps

Follow the full [Web SDK integration](https://app.gitbook.com/s/lv7UhJvTbxeq4s3KwQpn/web-integrations/web-sdk-quick-guide) guide to explore its features and **customization** options.


---

# 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://docs.complycube.com/documentation/quick-guides/web-sdk-quick-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.