> For the complete documentation index, see [llms.txt](https://docs.facephi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.facephi.com/productos/landing/personalizacion.md).

# Personalización

Personalización de Landing.

La página de inicio es fácilmente personalizable a través de la página de personalización de Landing. Esta personalización se llevará a cabo bajo petición al equipo de Facephi.

## Configuración de Estilo Sencilla

El tema se puede configurar con los siguientes parámetros:

{% columns %}
{% column width="33.33333333333333%" %}

<div align="left"><figure><img src="https://2359030012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUo71Qbj6jZQDavjc0U5X%2Fuploads%2Fgit-blob-d19665712489704548d68fe6f94e7ad1fa0d7441%2Flanding_customization-d9020efee76c6813520a1235e721e21f.png?alt=media" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}

{% column width="66.66666666666667%" %}

### Tipografía

* **Font**: Familia de fuentes aplicada a la página.

### Colores

* **Primary**: Color aplicado en el encabezado.
* **Secondary**: Color aplicado a los elementos primarios de los widgets.
* **Tertiary**: Color aplicado a los elementos secundarios de los widgets.
* **Background**: Color de fondo del componente.

### Estilo personalizado

* **Custom CSS**: Configuración CSS avanzada adicional.
  {% endcolumn %}
  {% endcolumns %}

Estos parámetros modificarán el `theme` y variables CSS de los componentes del SDK Web.

***

## Configuración de CSS Avanzada

Toda la página de inicio se puede personalizar usando las variables CSS proporcionadas por la etiqueta `facephi-sdk-provider` del SDK Provider, lo que permite un nivel de personalización más alto.

Simplemente añade las variables CSS deseadas en el área de texto `Custom CSS`.

Consulta la [lista completa de variables CSS](/sdks/sdk-web/personalizacion.md) para ver todas las variables CSS disponibles proporcionadas por el SDK Provider y los widgets.

**Ejemplo**:

```css
facephi-sdk-provider {
  --wrapper-color-capture-fail: red;
  --wrapper-color-primary: green !important;
}
```

> Advertencia: Si sobrescribes las variables CSS establecidas por el tema, debes usar la bandera `!important` para que tus cambios surtan efecto.

#### Variables CSS afectadas por el tema:

* **Font**: `--wrapper-primary-font`, `--wrapper-secondary-font`.
* **Secondary**: `--wrapper-color-primary`, `--wrapper-color-progress-bar`, `--wrapper-color-tutorial-background`.
* **Tertiary**: `--wrapper-color-hover`, `--wrapper-color-tutorial-shirt`.
* **Background**: `--wrapper-color-background`.

**Ejemplo**:

```css
facephi-sdk-provider {
  --wrapper-color-background: #000000 !important;
}
```

***

## Dominio personalizado

Cómo utilizar un subdominio personalizado en lugar de el dominio de la Landing.

### Opciones de configuración de Dominio personalizado para Landing

{% columns %}
{% column %}

<figure><img src="https://2359030012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUo71Qbj6jZQDavjc0U5X%2Fuploads%2Fgit-blob-4cebf842e69dfeef34fb0c1cd9e5c500d8ea69b3%2FCaptura%20de%20pantalla%202025-11-13%20a%20las%2012.29.56.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

#### Tipo de dominio:

* **Dominio Facephi:** Dominio por defecto ofrecido por el equipo de Facephi.
* **Dominio Personalizado**: Dominio personalizado a utilizar para la Landing ofrecido por el cliente.

#### Nombre

Nombre identificador para la Landing.

#### Dominio Personalizado

Dominio personalizado que el cliente ha de facilitar para que sea utilizado para la Landing.

#### SDK API Key

SDK Api Key generada por el equipo de Facephi para dicho dominio.
{% endcolumn %}
{% endcolumns %}

### Configuración del dominio por parte del cliente

Por parte del cliente se le disponibiliza el siguiente *CNAME* para que lo asocie al respectivo subdominio configurado: `landing.idv-suite-cd.com`

Dicho subdominio deberá ser configurado con el *CNAME* definido en el registro de servidor de nombres que esté asociado el dominio proporcionado.