> 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/sdks/sdks-es/integraciones-web/web-sdk-quick-guide/web-sdk-quick-guide-1.md).

# Integración basada en comprobaciones

## Descripción general

Esta guía te guía a través de la integración del Web SDK con ComplyCube usando el enfoque basado en checks, dándote control directo sobre cada paso de verificación.

{% hint style="info" %}
Para un ejemplo rápido de copiar y pegar, usa nuestro [asistente de integración](https://portal.complycube.com/developers).
{% endhint %}

{% hint style="warning" %}
Estás viendo la **basado en comprobaciones** guía del SDK: un enfoque que ofrece un control detallado, pero es más adecuado para **socios** o **casos de uso avanzados.**  Recomendamos usar **integración del flujo de trabajo** para la mayoría de las implementaciones.
{% endhint %}

## Flujo de integración

El SDK web se ejecuta como parte de tu frontend, pero depende de tu backend para crear **tokens seguros**. Así es como funciona:

{% stepper %}
{% step %}

#### **Crear un cliente**

Registrar un nuevo **cliente** (es decir, cliente) usando la API de ComplyCube
{% endstep %}

{% step %}

#### **Genera un token del SDK**

Tu backend solicita un **token JWT** vinculado a ese cliente.
{% endstep %}

{% step %}

#### **Importa y monta el SDK**

Añade los archivos JS y CSS, luego monta el SDK en tu aplicación web.
{% endstep %}

{% step %}

#### Captura documentos, vídeos y selfies

El SDK guía a tu cliente a través de los pasos requeridos.
{% endstep %}

{% step %}

#### Realizar comprobaciones de verificación

Los datos capturados se envían de forma segura a ComplyCube para las comprobaciones de verificación, y los resultados se entregan en tiempo real a través de la API o de webhooks.
{% endstep %}
{% endstepper %}

![Flujo de integración del Web SDK](/files/bf5f9b9101d8b95d90bc9d5eff9617aac4379149)

## Guía de integración

{% stepper %}
{% step %}

#### Crear un cliente

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

**Ejemplo de respuesta**

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

```json
{
    "id": "5eb04fcd0f3e360008035eb1",
    "type": "person",
    "email": "john.doe@example.com",
    "personDetails": {
        "firstName": "John",
        "lastName": "Doe"
    },
    "createdAt": "2020-01-04T17:24:29.146Z",
    "updatedAt": "2020-01-04T17:24:29.146Z"
}
```

{% hint style="info" %}
Consulta [Referencia de la API de clientes](/documentation/api-reference/core-resources/clients.md) para obtener más información.
{% endhint %}
{% endstep %}

{% step %}

#### Genera un token del SDK

Tu backend debe crear un **token del SDK** para cada nuevo flujo. Este token vincula la sesión del SDK con el cliente. Los tokens tienen una vida útil corta y no deben reutilizarse.

**Ejemplo de solicitud**

{% 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": "https://www.example.com/*"
        }'
```

{% 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: "https://www.example.com/*"
});
```

{% endtab %}

{% tab title="Python" %}

```python
from complycube import ComplyCubeClient

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

token = cc_api.tokens.create('CLIENT_ID','https://www.example.com/*')
```

{% endtab %}

{% tab title="PHP" %}

```php
 use ComplyCube\ComplyCubeClient;

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

$report = $ccapi->tokens()->generate('CLIENT_ID', 'https://www.example.com/*');
```

{% 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 = "https://www.example.com/*"
}

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

{% endtab %}
{% endtabs %}

**Ejemplo de respuesta**

```json
{
    "token": "<CLIENT_TOKEN>"
}
```

{% hint style="info" %}
Consulta [Referencia de la API de tokens del SDK](/documentation/api-reference/other-resources/tokens.md) para obtener más información.
{% endhint %}
{% endstep %}

{% step %}

#### Importar el SDK

Para importar nuestro Web SDK, debes incluirlo en el HTML de tu página de destino:

```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>
  <body>
     <!-- Aquí es donde se montará el Web SDK -->
    <div id="complycube-mount"></div>
  </body>
</html>

```

<details>

<summary><strong>Cargando el SDK con integridad</strong> <em>(Opcional)</em></summary>

Para mayor seguridad, puedes cargar opcionalmente el ComplyCube Web SDK usando **Subresource Integrity (SRI)**. Esto permite al navegador verificar que los archivos JavaScript y CSS no hayan sido modificados validándolos frente a sumas de comprobación criptográficas.

#### **Recupera los últimos valores de integridad del SDK**

Para asegurarte de usar siempre la última versión compatible del SDK y los hashes de integridad más recientes, recupera los metadatos del recurso desde el endpoint de información del Web SDK.

**Ejemplo de solicitud**

```bash
curl -X POST https://api.complycube.com/v1/webSdk/latest \\
     -H 'Authorization: <YOUR_API_KEY>'
```

**Ejemplo de respuesta**

La respuesta incluye las URL y los valores de integridad correspondientes tanto para los recursos de JavaScript como para los de CSS.

{% code overflow="wrap" %}

```json
{
  "js": {
    "url": "<JAVASCRIPT_ASSET_URL>/complycube.min.js",
    "integrity": "sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
  },
  "css": {
    "url": "<CSS_ASSET_URL>/style.css",
    "integrity": "sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
  }
}
```

{% endcode %}

#### **Importa el SDK usando atributos de integridad**

Usa los valores devueltos para cargar el SDK en tu HTML con `integridad` y `crossorigin` atributos:

```html
<!DOCTYPE html>
<html>
  ...
  <head>
    <!-- Importando la biblioteca JavaScript -->
    <script
      src="<JAVASCRIPT_ASSET_URL>/sdk.min.js"
      integrity="sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
      crossorigin="anonymous">
    </script>

    <!-- Importando el CSS predeterminado -->
    <link
      rel="stylesheet"
      href="<CSS_ASSET_URL>/style.css"
      integrity="sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
      crossorigin="anonymous">
  </link>
  </head>
  
  <!-- Aquí es donde se montará el Web SDK -->
  <body>
    <div id="complycube-mount"></div>
  </body>
</html>
```

{% hint style="info" %}

#### Notas

* Usar SRI es ***opcional***, pero se recomienda para entornos con requisitos de seguridad más estrictos.
* El atributo crossorigin="anonymous" es necesario cuando se usa SRI con recursos servidos desde un origen diferente.
* Los valores de integridad pueden cambiar cuando el SDK se actualiza. Recupera siempre los valores más recientes desde el endpoint.
  {% endhint %}

</details>

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

{% step %}

#### Montar el SDK

Con el token del SDK generado, el Web SDK puede inicializarse en tu frontend usando el siguiente código JavaScript:

```javascript
ComplyCube.mount({
  token: '<YOUR_WEB_SDK_TOKEN>',
  containerId: 'complycube-mount',
  stages: [
    'intro',
    'documentCapture',
    {
      name: 'faceCapture',
      options: {
        mode: 'video'
      }
    },
    'completion'
  ],
  onComplete: function(data) {
    // Usando los atributos de datos devueltos, solicita a tu
    // servidor backend que realice los checks necesarios de ComplyCube
    console.info('Captura completada');
  },
  onModalClose: function() {
    // Gestiona el intento de cierre del modal
  },
  onError: function ({ type, message }) {
    if (type === 'token_expired') {
      // Solicita un nuevo token del SDK
    } else {
      // Gestiona otros errores
      console.error(message);
    }
  }
});
```

{% hint style="info" %}
Los parámetros de montaje del SDK se describen en la [sección de configuración del SDK](#settings) a continuación.
{% endhint %}

{% hint style="info" %}

#### Política de referrer

Para permitir una comunicación correcta entre el SDK y nuestros servidores, el **encabezado de la política de referrer** de tu página web debe configurarse como `strict-origin-when-cross-origin`. Esto garantiza que la información del referrer se transmita de forma segura durante las solicitudes HTTP.

Puedes hacerlo programáticamente o añadirlo directamente a la página web de la siguiente manera:\
`<meta name="referrer" content="strict-origin-when-cross-origin">`
{% endhint %}
{% endstep %}

{% step %}

#### Realizar checks

Usando los `datos` devueltos por el SDK, a través de la `callback onComplete` ahora puedes indicar a tu servidor backend que ejecute los checks apropiados usando el [endpoint para crear un check](https://docs.complycube.com/api-reference/checks/create-a-check).

Por ejemplo, usa:

* `documentCapture.documentId` para ejecutar un [check de documento](https://docs.complycube.com/api-reference/check-types/document-check).
* `documentCapture.documentId` y `faceCapture.livePhotoId` para ejecutar un[ check de identidad](https://docs.complycube.com/api-reference/check-types/identity-check).
* `documentCapture.documentId` y `faceCapture.liveVideoId` para ejecutar un [check de identidad mejorado](https://docs.complycube.com/api-reference/check-types/enhanced-identity-check).
* `poaCapture.documentId` para ejecutar un [check de prueba de domicilio](https://docs.complycube.com/api-reference/check-types/proof-of-address-check).

Si has [configurado webhooks ](https://docs.complycube.com/api-reference/other-resources/webhooks/create-a-webhook)como se describe en nuestra [guía de webhooks](https://docs.complycube.com/documentation/guides/webhooks), se te notificará una vez que un check se complete.

Para recuperar los resultados del check, puedes realizar una solicitud GET de [check](/documentation/api-reference/core-resources/checks/create-a-check.md).

**Ejemplo de solicitud**

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

```javascript
curl -X GET https://api.complycube.com/v1/checks/{:checkId} \\
     -H 'Authorization: <YOUR_API_KEY>' 
```

{% endtab %}

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

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

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

const check = await complycube.check.get("CHECK_ID");
```

{% endtab %}

{% tab title="Python" %}

```python
from complycube import ComplyCubeClient

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

check = cc_api.checks.get('CHECK_ID')
```

{% endtab %}

{% tab title="PHP" %}

```php
use ComplyCube\ComplyCubeClient;

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

$check = $ccapi->checks()->get('CHECK_ID');
```

{% endtab %}

{% tab title=".NET" %}

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

var checkApi = new CheckApi(new ComplyCubeClient("<YOUR_API_KEY>"));

var check = await checkApi.GetAsync("CHECK_ID");
```

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

## Referencia del SDK

Esta sección describe todos los ajustes configurables, callbacks, métodos del ciclo de vida y opciones de marca disponibles en el Web SDK de ComplyCube.

### Configuración

<table><thead><tr><th width="218.09765625">Opción</th><th>Descripción</th></tr></thead><tbody><tr><td><code>token</code></td><td>El token del SDK generado por tu backend. Esto es <strong>obligatorio</strong>.<br><br><strong>Tipo</strong>: <code>string</code></td></tr><tr><td><code>containerId</code></td><td><p>El ID del elemento contenedor donde se monta el SDK. Debe ser un elemento vacío.</p><p><strong>Tipo:</strong> <code>string</code><br><strong>Valor predeterminado</strong>: <code>complycube-mount</code></p></td></tr><tr><td><code>useModal</code></td><td>Esto define si las pantallas de la interfaz se cargan en un modal en lugar de en línea.<br><br><strong>Tipo:</strong> <code>boolean</code><br><strong>Valor predeterminado</strong>: <code>true</code></td></tr><tr><td><code>useFullScreen</code></td><td>Esto define si el SDK se carga en modo de pantalla completa.<br><br><strong>Tipo:</strong> <code>boolean</code><br><strong>Valor predeterminado</strong>: <code>false</code></td></tr><tr><td><code>disableClientAnalytics</code></td><td><p>Esto define si rastreamos o no la analítica del cliente.<br></p><p><strong>Tipo:</strong> <code>boolean</code><br><strong>Valor predeterminado</strong>: <code>false</code></p></td></tr><tr><td><code>stages</code></td><td><p>Esta es la lista de etapas por las que pasarán tus clientes. Las etapas pueden proporcionarse como cadenas o como objetos. Consulta <a href="#stages">Etapas</a> a continuación para obtener más información.<br></p><p><strong>Tipo:</strong> <code>array[object]</code> o <code>array[string]</code></p><p><strong>Valores predeterminados</strong>: <code>['intro', 'faceCapture, 'documentCapture', 'completion']</code></p></td></tr><tr><td><code>language</code></td><td><p>El idioma de la interfaz. Los valores válidos incluyen:<br></p><p><code>en</code> , <code>ar</code>, <code>br</code>, <code>de</code>, <code>es</code>, <code>fr</code>, <code>hi</code>, <code>hk</code>, <code>id</code>, <code>it</code>, <code>ja</code>, <code>ko</code>, <code>nl</code>, <code>no</code>, <code>pl</code>, <code>pt</code>, <code>sv</code>, <code>th</code>, <code>vi</code>, <code>zh</code><br></p><p><strong>Tipo:</strong> <code>string</code><br><strong>Valor predeterminado</strong>: <code>en</code></p></td></tr></tbody></table>

### Devolución de llamada

Los callbacks te permiten responder a los eventos del ciclo de vida del SDK.

<table><thead><tr><th width="218.0234375">Opción</th><th>Descripción</th></tr></thead><tbody><tr><td><code>callback onComplete</code></td><td><p>Se activa después de que el cliente completa el flujo de verificación. Normalmente se usa para desencadenar un check en tu backend.<br></p><p>Según las etapas proporcionadas, <code>datos</code> puede incluir los siguientes atributos:<br></p><ul><li><p><code>documentCapture</code></p><ul><li><code>documentId</code>: ID del documento capturado.</li><li><code>documentType:</code> Tipo del documento cargado.</li></ul></li><li><p><code>faceCapture</code></p><ul><li><code>liveVideoId</code>: ID del video capturado. <strong>O</strong>;</li><li><code>livePhotoId</code>: ID de la foto capturada.</li></ul></li><li><p><code>poaCapture</code></p><ul><li><code>documentId</code>: ID del documento de comprobante de domicilio cargado.</li><li><code>documentType</code>: Tipo del documento de comprobante de domicilio cargado.</li></ul></li></ul></td></tr><tr><td><code>onError</code></td><td><p>Se activa cuando ocurre un error. El objeto de error tiene dos atributos:</p><ul><li><p><code>type</code>: Puede ser:</p><ul><li><code>exception</code></li><li><code>token_expired</code> : indica que el token ha expirado. Cuando esto ocurra, se debe proporcionar un nuevo <strong>token del SDK</strong>.</li></ul></li><li><code>message</code>: Descripción del error.</li></ul></td></tr><tr><td><code>onExit</code></td><td>Esta devolución de llamada se activa cuando el cliente sale antes de completar el flujo. Devolverá el motivo de salida, por ejemplo, <code>USER_CONSENT_NOT_GRANTED</code>.</td></tr><tr><td><code>onModalClose</code></td><td>Se activa cuando el cliente intenta cerrar el modal. Puedes permitir o impedir el cierre actualizando el atributo <code>isModalOpen</code> usando <a href="#updating-settings">updateSettings</a>.</td></tr></tbody></table>

### Actualización de la configuración

Varios ajustes pueden actualizarse en tiempo de ejecución de la siguiente manera:

```javascript
complycube = ComplyCube.mount({...});

// Reemplazar el token del SDK
complycube.updateSettings({ token: "NEW_SDK_TOKEN" });
...
// Abrir el modal
complycube.updateSettings({ isModalOpen: true });

//Cerrar el modal
complycube.updateSettings({ isModalOpen: false });

```

### Desmontando el SDK

Si está utilizando el SDK en una aplicación de una sola página (SPA), puede llamar a la función unmount para eliminar el SDK y restablecer su estado.

```javascript
complycube = ComplyCube.mount({...});
...
complycube.unmount()
```

## Etapas

La `stages` array define el flujo de verificación. Cada etapa puede pasarse como un **string** o como un **objeto** con opciones.

#### Nombres de etapas compatibles

* `intro`: Pantalla de bienvenida.
* `userConsentCapture`: Capturar el consentimiento del cliente.
* `documentCapture`: Capturar documentos de identificación.
* `faceCapture`: Capturar selfies o videos de prueba de vida.
* `poaCapture`: Capturar documento de comprobante de domicilio.
* `completion`: Fin del flujo.

{% hint style="info" %}
Cuando `userConsentCapture` está habilitado, gestiona siempre el `onExit` callback si el cliente rechaza el consentimiento.
{% endhint %}

{% hint style="info" %}
Asegúrate de pasar el [`clientConsent`](https://docs.complycube.com/api-reference/checks) parámetro cuando tu cliente otorgue el consentimiento.
{% endhint %}

Cuando una etapa se pasa como **objeto**, tendrá dos atributos, `name` y `options`.

### Nombre

Este es el [nombre de la etapa](#supported-stage-names)

### Opciones

Esto te permite personalizar cada etapa de la siguiente manera:

<table><thead><tr><th width="171.09765625">Nombre de la etapa</th><th>Opciones</th></tr></thead><tbody><tr><td><code>intro</code></td><td><ul><li><code>heading</code>: Cambia el encabezado de la pantalla de introducción.</li><li><code>message</code>: Una lista de mensajes para mostrar en la pantalla de introducción. Tamaño máximo <strong>3</strong>.</li><li><code>startButtonText</code>: Cambia el texto del botón de inicio en la pantalla de introducción.</li></ul></td></tr><tr><td><code>documentCapture</code></td><td><ul><li><code>crossDeviceOnly</code>: Un booleano que indica si se debe obligar a los usuarios a capturar su documento usando su teléfono. Esto elimina la opción de carga de documentos.</li><li><p><code>documentTypes</code>: La lista de tipos de documentos de identificación visibles para el usuario. Los tipos de documento válidos incluyen:</p><ul><li><code>passport</code></li><li><code>driving_license</code></li><li><code>national_identity_card</code></li><li><code>residence_permit</code></li></ul><p><br>Cada valor puede ser ya sea un <strong>boolean</strong> o un <strong>objeto de país</strong>. Un booleano alterna la visibilidad del tipo de documento, mientras que un objeto de país especifica el país emisor para documentos que no sean pasaporte, omitiendo la pantalla de selección de país. El valor del país es el <a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2">código ISO de país de dos letras</a>.</p></li></ul></td></tr><tr><td><code>faceCapture</code></td><td><ul><li><code>mode</code>: El modo de la captura facial. Los valores posibles son: <code>photo</code> o <code>video</code>.</li></ul></td></tr><tr><td><code>poaCapture</code></td><td><ul><li><p><code>documentTypes</code>: La lista de tipos de documentos de Comprobante de Domicilio (POA) visibles para el cliente. Los tipos de documento POA válidos incluyen:</p><ul><li><code>bank_statement</code></li><li><code>utility_bill</code></li></ul></li></ul><p>El valor de cada tipo de documento es un booleano que alterna la visibilidad del tipo de documento.</p></td></tr><tr><td><code>completion</code></td><td><ul><li><code>heading</code>: Cambia el encabezado de la pantalla de finalización.</li><li><code>message</code>: Un mensaje para mostrar en la pantalla de finalización. Tamaño máximo <strong>1</strong>.</li></ul></td></tr></tbody></table>

#### Objeto de opciones de ejemplo

```javascript
stages: [
  {
    name: "intro",
    options: {
      heading: "Necesitamos verificar tu identidad",
      message: [
        "Para abrir una cuenta, necesitamos comprobar algunas cosas.",
        "Esto solo tomará un momento",
      ],
      startButtonText: "Iniciar verificación"
    },
  },
  "userConsentCapture",
  {
    name: "documentCapture",
    options: {
      crossDeviceOnly: true,
      documentTypes: {
        passport: true,
        driving_license: false,
        national_identity_card: true,
        residence_permit: {
          country: "GB",
        },
      },
    },
  },
  {
    name: "faceCapture",
    options: {
      mode: "video"
    },
  },
  {
    name: "poaCapture",
    options: {
      documentTypes: {
        bank_statement: true,
        utility_bill: false,
      },
    },
  },
  {
    name: "completion",
    options: {
      heading: "Gracias por completar el proceso",
      message: ["nos pondremos en contacto contigo en breve"]
    },
  }
];

```

## Identidad de marca

Puedes personalizar la apariencia y el estilo del SDK con el `branding` objeto. Se compone de los atributos que se indican a continuación.

### Apariencia

La `apariencia` el objeto le permite personalizar el esquema de colores del SDK con valores CSS (p. ej., RGBA, Hex). Los atributos personalizables incluyen:

<table><thead><tr><th width="314.77779343108637">Atributo</th><th>Descripción</th></tr></thead><tbody><tr><td><code>infoPopupColor</code></td><td>Color de fondo del popup de advertencia.</td></tr><tr><td><code>infoPopupTextColor</code></td><td>Color de fondo del popup de advertencia.</td></tr><tr><td><code>infoPopupLinkHoverColor</code></td><td>Color de fondo al pasar el cursor del enlace alternativo del popup de advertencia.</td></tr><tr><td><code>infoPopupLinkActiveColor</code></td><td>Color de fondo activo del enlace alternativo del popup de advertencia.</td></tr><tr><td><code>errorPopupColor</code></td><td>Color de fondo del popup de error.</td></tr><tr><td><code>errorPopupTextColor</code></td><td>Color del texto del popup de error.</td></tr><tr><td><code>errorPopupLinkHoverColor</code></td><td>Color de fondo al pasar el cursor del enlace alternativo del popup de error.</td></tr><tr><td><code>errorPopupLinkActiveColor</code></td><td>Color de fondo activo del enlace alternativo del popup de error.</td></tr><tr><td><code>cameraButtonHoverColor</code></td><td>Color de fondo del botón de la cámara al pasar el cursor.</td></tr><tr><td><code>cameraButtonActiveColor</code></td><td>Color de fondo activo del botón de la cámara.</td></tr><tr><td><code>iconButtonActiveColor</code></td><td>Color de fondo activo del botón de icono.</td></tr><tr><td><code>iconButtonHoverColor</code></td><td>Color de fondo del botón de icono al pasar el cursor.</td></tr><tr><td><code>primaryButtonColor</code></td><td>Color de fondo del botón principal.</td></tr><tr><td><code>primaryButtonTextColor</code></td><td>Color del texto del botón principal.</td></tr><tr><td><code>primaryButtonActiveColor</code></td><td>Color de fondo activo del botón principal.</td></tr><tr><td><code>primaryButtonHoverColor</code></td><td>Color de fondo del botón principal al pasar el cursor.</td></tr><tr><td><code>primaryButtonBorderColor</code></td><td>Color del borde del botón principal.</td></tr><tr><td><code>secondaryButtonColor</code></td><td>Color de fondo del botón secundario.</td></tr><tr><td><code>secondaryButtonTextColor</code></td><td>Color del texto del botón secundario.</td></tr><tr><td><code>secondaryButtonActiveColor</code></td><td>Color de fondo activo del botón secundario.</td></tr><tr><td><code>secondaryButtonHoverColor</code></td><td>Color de fondo del botón secundario al pasar el cursor.</td></tr><tr><td><code>secondaryButtonBorderColor</code></td><td>Color del borde del botón secundario.</td></tr><tr><td><code>documentSelectorColor</code></td><td>Color de fondo del selector de documentos.</td></tr><tr><td><code>documentSelectorTextColor</code></td><td>Color del texto del selector de documentos.</td></tr><tr><td><code>documentSelectorActiveBorderColor</code></td><td>Color de fondo activo del selector de documentos.</td></tr><tr><td><code>documentSelectorHoverBorderColor</code></td><td>Color de fondo del selector de documentos al pasar el cursor.</td></tr><tr><td><code>linkHoverColor</code></td><td>Color de fondo del enlace al pasar el cursor.</td></tr><tr><td><code>linkActiveColor</code></td><td>Color de fondo activo del enlace.</td></tr><tr><td><code>linkUnderlineColor</code></td><td>Color del subrayado del enlace.</td></tr><tr><td><code>linkHoverTextColor</code></td><td>Color del texto del enlace al pasar el cursor.</td></tr><tr><td><code>bodyTextColor</code></td><td>Color del texto del contenido del SDK.</td></tr><tr><td><code>headingTextColor</code></td><td>Color del texto de los encabezados del SDK.</td></tr><tr><td><code>subheadingTextColor</code></td><td>Color del texto de los subencabezados del SDK.</td></tr></tbody></table>

### Logotipo

La `logo` el objeto tiene los siguientes atributos:

* `lightLogoUrl`: URL de la versión clara de tu logotipo.
* `darkLogoUrl`: URL de la versión oscura de tu logotipo.

#### Ejemplo de marca del logotipo

```javascript
branding: {
  appearance: {
    primaryButtonColor: '#FF0000',
  },
  logo: {
    lightLogoUrl: 'light_logo_url',
    darkLogoUrl: 'dark_logo_url',
  }
},
```

### Marca de texto

La `textBrand` el atributo representa el formato textual de tu marca.

#### Ejemplo de marca textual

```javascript
branding: {
  appearance: {
    primaryButtonColor: '#FF0000',
  },
  textBrand: 'Acme Bank'
}
```

{% hint style="info" %}
Si `logo` y `textBrand` los atributos se especifican al mismo tiempo, `logo` tiene prioridad.
{% endhint %}


---

# 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/sdks/sdks-es/integraciones-web/web-sdk-quick-guide/web-sdk-quick-guide-1.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.