# Check-Driven Integration

## Overview

This guide walks you through integrating the Web SDK with ComplyCube using the check-driven approach, giving you direct control over individual verification steps.

{% hint style="info" %}
For a quick copy-paste example, use our [integration assistant](https://portal.complycube.com/developers).
{% endhint %}

{% hint style="warning" %}
You’re viewing the **check-driven** SDK guide - an approach that provides detailed control but is best suited for **partners** or **advanced use cases.**  We recommend using **workflow integration** for most implementations.
{% endhint %}

## Integration flow

The Web SDK runs as part of your frontend but relies on your backend to create **secure tokens**. Here’s how it works:

{% stepper %}
{% step %}

#### **Create a client**

Register a new **client** (i.e. customer) using the ComplyCube API
{% endstep %}

{% step %}

#### **Generate an SDK token**

Your backend requests a **JWT token** tied to that client.
{% endstep %}

{% step %}

#### **Import and mount the SDK**

Add the JS and CSS files, then mount the SDK in your web app.
{% endstep %}

{% step %}

#### Capture documents, videos, and selfies

The SDK guides your customer through the required steps.
{% endstep %}

{% step %}

#### Perform verification checks

Captured data is securely sent to ComplyCube for verification checks, and results are delivered in real time through the API or webhooks.
{% endstep %}
{% endstepper %}

![Web SDK Integration Flow](/files/-M_1rrWcXBID12ktWYA6)

## Integration guide

{% stepper %}
{% step %}

#### Create a client

Every verification flow starts with a **client** (i.e. customer). Use the API to [create the client](/documentation/api-reference/core-resources/clients/create-a-client.md).

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

{% endtab %}
{% endtabs %}

**Example response**

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

```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" %}
See [Clients API Reference](/documentation/api-reference/core-resources/clients.md) to learn more.
{% endhint %}
{% endstep %}

{% step %}

#### Generate an SDK token

Your backend must create an **SDK token** for each new flow. This token links the SDK session to the client. Tokens are short-lived and must not be reused.

**Example request**

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

**Example response**

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

{% hint style="info" %}
See [SDK Token API Reference](/documentation/api-reference/other-resources/tokens.md) to learn more.
{% endhint %}
{% endstep %}

{% step %}

#### Import the SDK

To import our Web SDK, you need to include it in your target page HTML:

```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>
  <body>
     <!-- This is where the Web SDK will be mounted -->
    <div id="complycube-mount"></div>
  </body>
</html>

```

<details>

<summary><strong>Loading the SDK with Integrity</strong> <em>(Optional)</em></summary>

For additional security, you can optionally load the ComplyCube Web SDK using **Subresource Integrity (SRI)**. This allows the browser to verify that the JavaScript and CSS files have not been modified by validating them against cryptographic checksums.

#### **Retrieve the latest SDK integrity values**

To ensure you always use the latest supported SDK version and integrity hashes, retrieve the asset metadata from the Web SDK info endpoint.

**Example request**

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

**Example response**

The response includes the URLs and corresponding integrity values for both the JavaScript and CSS assets.

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

#### **Import the SDK using integrity attributes**

Use the returned values to load the SDK in your HTML with `integrity` and `crossorigin` attributes:

```html
<!DOCTYPE html>
<html>
  ...
  <head>
    <!-- Importing the Javascript library -->
    <script
      src="<JAVASCRIPT_ASSET_URL>/sdk.min.js"
      integrity="sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
      crossorigin="anonymous">
    </script>

    <!-- Importing the default CSS -->
    <link
      rel="stylesheet"
      href="<CSS_ASSET_URL>/style.css"
      integrity="sha384-<INTEGRITY_HASH_1> sha384-<INTEGRITY_HASH_2>"
      crossorigin="anonymous">
  </link>
  </head>
  
  <!-- This is where the Web SDK will be mounted -->
  <body>
    <div id="complycube-mount"></div>
  </body>
</html>
```

{% hint style="info" %}

#### Notes

* Using SRI is ***optional***, but recommended for environments with stricter security requirements.
* The crossorigin="anonymous" attribute is required when using SRI with assets served from a different origin.
* Integrity values may change when the SDK is updated. Always retrieve the latest values from the endpoint.
  {% endhint %}

</details>

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

{% step %}

#### Mount the SDK

With the generated SDK token, the Web SDK can be initialized in your frontend using the following JavaScript code:

```javascript
ComplyCube.mount({
  token: '<YOUR_WEB_SDK_TOKEN>',
  containerId: 'complycube-mount',
  stages: [
    'intro',
    'documentCapture',
    {
      name: 'faceCapture',
      options: {
        mode: 'video'
      }
    },
    'completion'
  ],
  onComplete: function(data) {
    // Using the data attributes returned, request your
    // backend server to perform the necessary ComplyCube checks
    console.info('Capture complete');
  },
  onModalClose: function() {
    // Handle the modal closure attempt
  },
  onError: function ({ type, message }) {
    if (type === 'token_expired') {
      // Request a new SDK token
    } else {
      // Handle other errors
      console.error(message);
    }
  }
});
```

{% hint style="info" %}
The SDK mount parameters are described in the [SDK settings](#settings) section below.
{% endhint %}

{% hint style="info" %}

#### Referrer policy

To enable successful communication between the SDK and our servers, your web page's **Referrer Policy** header should be set to `strict-origin-when-cross-origin`. This ensures that the referrer information is securely transmitted during HTTP requests.

You can either do it programmatically or add it directly to the web page as follows:\
`<meta name="referrer" content="strict-origin-when-cross-origin">`
{% endhint %}
{% endstep %}

{% step %}

#### Perform checks

Using the `data` returned by the SDK, via the `onComplete` callback, you can now instruct your backend server to run the appropriate checks using the [create a check endpoint](https://docs.complycube.com/api-reference/checks/create-a-check).

For instance, use:

* `documentCapture.documentId` to run a [document check](https://docs.complycube.com/api-reference/check-types/document-check).
* `documentCapture.documentId` and `faceCapture.livePhotoId` to run an[ identity check](https://docs.complycube.com/api-reference/check-types/identity-check).
* `documentCapture.documentId` and `faceCapture.liveVideoId` to run an [enhanced identity check](https://docs.complycube.com/api-reference/check-types/enhanced-identity-check).
* `poaCapture.documentId` to run a [proof of address check](https://docs.complycube.com/api-reference/check-types/proof-of-address-check).

If you have [set up webhooks ](https://docs.complycube.com/api-reference/other-resources/webhooks/create-a-webhook)as described in our [webhooks guide](https://docs.complycube.com/documentation/guides/webhooks), you will be notified once a check completes.

To retrieve the check results, you can perform a get [check request](/documentation/api-reference/core-resources/checks/create-a-check.md).

**Example request**

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

## SDK reference

This section describes all configurable settings, callbacks, lifecycle methods, and branding options available in the ComplyCube Web SDK.

### Settings

<table><thead><tr><th width="218.09765625">Option</th><th>Description</th></tr></thead><tbody><tr><td><code>token</code></td><td>The SDK token generated by your backend. This is <strong>required</strong>.<br><br><strong>Type</strong>: <code>string</code></td></tr><tr><td><code>containerId</code></td><td><p>The ID of the container element where the SDK mounts. This must be an empty element.</p><p><strong>Type:</strong> <code>string</code><br><strong>Default value</strong>: <code>complycube-mount</code></p></td></tr><tr><td><code>useModal</code></td><td>This defines whether the UI screens load into a modal instead of inline.<br><br><strong>Type:</strong> <code>boolean</code><br><strong>Default value</strong>: <code>true</code></td></tr><tr><td><code>disableClientAnalytics</code></td><td><p>This defines whether we track client analytics or not.<br></p><p><strong>Type:</strong> <code>boolean</code><br><strong>Default value</strong>: <code>false</code></p></td></tr><tr><td><code>stages</code></td><td><p>This is the list of stages your clients will go through. Stages can be provided as strings or as objects. See <a href="#stages">Stages</a> below to learn more.<br></p><p><strong>Type:</strong> <code>array[object]</code> or <code>array[string]</code></p><p><strong>Default values</strong>: <code>['intro', 'faceCapture, 'documentCapture', 'completion']</code></p></td></tr><tr><td><code>language</code></td><td><p>The UI language. Valid values include:<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>Type:</strong> <code>string</code><br><strong>Default value</strong>: <code>en</code></p></td></tr></tbody></table>

### Callback

Callbacks let you respond to SDK lifecycle events.

<table><thead><tr><th width="218.0234375">Option</th><th>Description</th></tr></thead><tbody><tr><td><code>onComplete</code></td><td><p>Triggered after the client completes the verification flow. Typically used to trigger a check on your backend.<br></p><p>Depending on the stages provided, <code>data</code> may include the following attributes:<br></p><ul><li><p><code>documentCapture</code></p><ul><li><code>documentId</code>: ID of the captured document.</li><li><code>documentType:</code> Type of document uploaded.</li></ul></li><li><p><code>faceCapture</code></p><ul><li><code>liveVideoId</code>: ID of the captured video. <strong>OR</strong>;</li><li><code>livePhotoId</code>: ID of the captired photo.</li></ul></li><li><p><code>poaCapture</code></p><ul><li><code>documentId</code>: ID of the uploaded proof of address document.</li><li><code>documentType</code>: Type of the uploaded proof of address document.</li></ul></li></ul></td></tr><tr><td><code>onError</code></td><td><p>Triggered when an error occurs. The error object has two attributes:</p><ul><li><p><code>type</code>: This can be:</p><ul><li><code>exception</code></li><li><code>token_expired</code> : indicates the token has expired. When this occurs, a new <strong>SDK token must be provided</strong>.</li></ul></li><li><code>message</code>: Description of the error.</li></ul></td></tr><tr><td><code>onExit</code></td><td>This callback is triggered when your client exits before completing the flow. It will return the exit reason, e.g., <code>USER_CONSENT_NOT_GRANTED</code>.</td></tr><tr><td><code>onModalClose</code></td><td>Triggered when the client tries to close the modal. You can allow or prevent closure by updating the <code>isModalOpen</code> attribute using <a href="#updating-settings">updateSettings</a>.</td></tr></tbody></table>

### Updating settings

A number of settings can be updated at runtime as follows:

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

// Replace the SDK token
complycube.updateSettings({ token: "NEW_SDK_TOKEN" });
...
// Open the modal
complycube.updateSettings({ isModalOpen: true });

//Close the modal
complycube.updateSettings({ isModalOpen: false });

```

### Unmounting the SDK

If you are using the SDK in a Single Page Application (SPA), you can call the unmount function to remove the SDK and reset its state.

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

## Stages

The `stages` array defines the verification flow. Each stage can be passed as a **string** or as an **object** with options.

#### Supported stage names

* `intro`: Welcome screen.
* `userConsentCapture`: Capture customer consent.
* `documentCapture`: Capture ID documents.
* `faceCapture`: Capture selfies or liveness videos.
* `poaCapture`: Capture proof of address document.
* `completion`: End of flow.

{% hint style="info" %}
When `userConsentCapture` is enabled, always handle the `onExit` callback if the client declines consent.
{% endhint %}

{% hint style="info" %}
Please make sure you pass the [`clientConsent`](https://docs.complycube.com/api-reference/checks) parameter when consent is granted by your client.
{% endhint %}

When a stage is passed as **object**, it will have two attributes, `name` and `options`.

### Name

This is the [stage name](#supported-stage-names)

### Options

This allows you to customize each stage as follows:

<table><thead><tr><th width="171.09765625">Stage Name</th><th>Options</th></tr></thead><tbody><tr><td><code>intro</code></td><td><ul><li><code>heading</code>: Change the intro screen heading.</li><li><code>message</code>: A list of messages to display on the intro screen. Max size <strong>3</strong>.</li><li><code>startButtonText</code>: Change the text of the start button on the intro screen.</li></ul></td></tr><tr><td><code>documentCapture</code></td><td><ul><li><code>crossDeviceOnly</code>: A boolean that indicates whether to force users to capture their document using their phone. This removes the document upload option.</li><li><p><code>documentTypes</code>: The list of ID document types visible to the user. Valid document types include:</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>Each value can be either a <strong>boolean</strong> or a <strong>country object</strong>. A boolean toggles the visibility of the document type, while a country object specifies the issuing country for non-passport documents, bypassing the country selection screen. The country value is the <a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2">two-letter country ISO code</a>.</p></li></ul></td></tr><tr><td><code>faceCapture</code></td><td><ul><li><code>mode</code>: The mode of the facial capture. Possible values are: <code>photo</code> or <code>video</code>.</li></ul></td></tr><tr><td><code>poaCapture</code></td><td><ul><li><p><code>documentTypes</code>: The list of Proof of Address (POA) document types visible to the client. Valid POA document types include:</p><ul><li><code>bank_statement</code></li><li><code>utility_bill</code></li></ul></li></ul><p>The value of each document type is a boolean that toggles the visibility of the document type.</p></td></tr><tr><td><code>completion</code></td><td><ul><li><code>heading</code>: Change the completion screen heading.</li><li><code>message</code>: A message to display on the completion screen. Max size <strong>1</strong>.</li></ul></td></tr></tbody></table>

#### Example options object

```javascript
stages: [
  {
    name: "intro",
    options: {
      heading: "We need to verify your identity",
      message: [
        "In order to open an account, we need to check a few things.",
        "This will take only a moment",
      ],
      startButtonText: "Start Verification"
    },
  },
  "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: "Thank you for completing the process",
      message: ["we will get in touch shortly"]
    },
  }
];

```

## Branding

You can customize the SDK’s look and feel with the `branding` object. It comprises the attributes outlined below.

### Appearance

The `appearance` object allows you to customize the color scheme of the SDK with CSS values (e.g. RGBA, Hex). Customizable attributes include:

<table><thead><tr><th width="314.77779343108637">Attribute</th><th>Description</th></tr></thead><tbody><tr><td><code>infoPopupColor</code></td><td>Warning popup background color.</td></tr><tr><td><code>infoPopupTextColor</code></td><td>Warning popup background color.</td></tr><tr><td><code>infoPopupLinkHoverColor</code></td><td>Warning popup fallback Link on hover background color.</td></tr><tr><td><code>infoPopupLinkActiveColor</code></td><td>Warning popup fallback Link active background color.</td></tr><tr><td><code>errorPopupColor</code></td><td>Error popup background color.</td></tr><tr><td><code>errorPopupTextColor</code></td><td>Error popup text color.</td></tr><tr><td><code>errorPopupLinkHoverColor</code></td><td>Error popup fallback Link on hover background color.</td></tr><tr><td><code>errorPopupLinkActiveColor</code></td><td>Error popup fallback Link active background color.</td></tr><tr><td><code>cameraButtonHoverColor</code></td><td>Camera button on hover background color.</td></tr><tr><td><code>cameraButtonActiveColor</code></td><td>Camera button active background color.</td></tr><tr><td><code>iconButtonActiveColor</code></td><td>Icon button active background color.</td></tr><tr><td><code>iconButtonHoverColor</code></td><td>Icon button on hover background color.</td></tr><tr><td><code>primaryButtonColor</code></td><td>Primary button background color.</td></tr><tr><td><code>primaryButtonTextColor</code></td><td>Primary button text color.</td></tr><tr><td><code>primaryButtonActiveColor</code></td><td>Primary button active background color.</td></tr><tr><td><code>primaryButtonHoverColor</code></td><td>Primary button on hover background color.</td></tr><tr><td><code>primaryButtonBorderColor</code></td><td>Primary button border color.</td></tr><tr><td><code>secondaryButtonColor</code></td><td>Secondary button background color.</td></tr><tr><td><code>secondaryButtonTextColor</code></td><td>Secondary button text color.</td></tr><tr><td><code>secondaryButtonActiveColor</code></td><td>Secondary button active background color.</td></tr><tr><td><code>secondaryButtonHoverColor</code></td><td>Secondary button on hover background color.</td></tr><tr><td><code>secondaryButtonBorderColor</code></td><td>Secondary button border color.</td></tr><tr><td><code>documentSelectorColor</code></td><td>Document selector background color.</td></tr><tr><td><code>documentSelectorTextColor</code></td><td>Document selector text color.</td></tr><tr><td><code>documentSelectorActiveBorderColor</code></td><td>Document selector active background color.</td></tr><tr><td><code>documentSelectorHoverBorderColor</code></td><td>Document selector on the hover background color.</td></tr><tr><td><code>linkHoverColor</code></td><td>Link on the hover background color.</td></tr><tr><td><code>linkActiveColor</code></td><td>Link active background color.</td></tr><tr><td><code>linkUnderlineColor</code></td><td>Link underline color.</td></tr><tr><td><code>linkHoverTextColor</code></td><td>Link on the hover text color.</td></tr><tr><td><code>bodyTextColor</code></td><td>SDK content text color.</td></tr><tr><td><code>headingTextColor</code></td><td>SDK heading text color.</td></tr><tr><td><code>subheadingTextColor</code></td><td>SDK subheading text color.</td></tr></tbody></table>

### Logo

The `logo` object has the following attributes:

* `lightLogoUrl`: URL for your logo's light version.
* `darkLogoUrl`:  URL for your logo's dark version.

#### Example of logo branding

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

### Text Brand

The `textBrand` attribute represents the textual format of your brand.

#### Example of text branding

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

{% hint style="info" %}
If `logo` and `textBrand` attributes are specified at the same time, `logo` takes precedence.
{% endhint %}


---

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