> 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

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="/files/fvXakevEHPNoEPFfwHvQ" 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="/files/5RvuRPBaq7Nss6Hf36CA" 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.