> For the complete documentation index, see [llms.txt](https://docs.complycube.com/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.complycube.com/documentation/documentation/documentation-es/guias-rapidas/web-sdk-quick-guide.md).

# Guía del SDK web

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

El **ComplyCube Web SDK** es una biblioteca JavaScript ligera que te permite integrar flujos de verificación de identidad y KYC directamente en tus aplicaciones web. Proporciona un widget listo para usar y fácil de usar para capturar documentos, selfies y comprobante de domicilio, mientras gestiona la detección de calidad y las señales de fraude en segundo plano.

### Demo interactiva

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

### Pasos de integración

El Web SDK puede integrarse de dos maneras: mediante [flujos de trabajo](/documentation/product-guides/product-guide-es/compliance-studio/workflows.md) para recorridos de verificación completos, o con **integración basada en comprobaciones** para un control detallado.

Los pasos siguientes muestran cómo añadir el Web SDK a tu aplicación web.

{% stepper %}
{% step %}

#### **Crear un cliente**

Todo flujo de verificación comienza con un **cliente** (es decir, cliente). Usa la API para [crear el cliente](/documentation/api-reference/core-resources/clients/create-a-client.md).

**Ejemplo de solicitud**

{% 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(newClient);
```

{% endtab %}
{% endtabs %}

La respuesta contendrá un `id` (el ID del cliente). Es necesario para el siguiente paso.
{% endstep %}

{% step %}

#### Generar un token de SDK

**Los tokens** permiten a los clientes enviar datos personales a ComplyCube de forma segura a través de nuestros SDK. Usa el [punto de conexión para generar tokens](/documentation/api-reference/other-resources/tokens.md) para obtener un token de SDK e inicializar después el Web SDK.

{% 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 %}

#### Montar el SDK

Para montar nuestro Web SDK, necesitas incluirlo en tu página de destino, como se muestra a continuación.

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

  <head>
    <!-- Importando la biblioteca JavaScript -->
    <script src="complycube.min.js"></script>
    
    <!-- Importando el CSS predeterminado -->
    <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("Captura completada", data)
        },
      });
    }
  </script>
  
  <body>
    <!-- Aquí es donde se montará el Web SDK -->
    <div id="complycube-mount"></div>

    <!-- Al hacer clic en el botón se iniciará la interfaz de verificación de ComplyCube -->
    <button onClick="startVerification()">Iniciar verificación</button>
  </body>
  
</html>

```

{% hint style="info" %}
Los enlaces a `complycube.min.js` y `style.css` se pueden encontrar en tu [portal para desarrolladores](https://portal.complycube.com/developers/webSdk).
{% endhint %}
{% endstep %}
{% endstepper %}

### Siguientes pasos

Sigue la guía completa de [integración del Web SDK](/documentation/sdks/sdks-es/integraciones-web/web-sdk-quick-guide.md) para explorar sus funciones y **personalización** opciones.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.complycube.com/documentation/documentation/documentation-es/guias-rapidas/web-sdk-quick-guide.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.