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