> 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/docs.facephi-pt-br/produtos/landing/personalizacion.md).

# Personalização

A página inicial é facilmente personalizável por meio da página de Personalização de Landing. Essa personalização será realizada mediante solicitação à equipe da Facephi.

## Configuração de estilo simples

O tema pode ser configurado com os seguintes parâmetros:

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

<div align="left"><figure><img src="/files/789e57f56d115766155cb70a6bf4d962678a40b4" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}

{% column width="66.66666666666667%" %}

### Tipografia

* **Fonte**: Família de fontes aplicada à página.

### Cores

* **Primário**: Cor aplicada no cabeçalho.
* **Secundário**: Cor aplicada aos elementos primários dos widgets.
* **Terciário**: Cor aplicada aos elementos secundários dos widgets.
* **Fundo**: Cor de fundo do componente.

### Estilo personalizado

* **CSS personalizado**: Configuração CSS avançada adicional.
  {% endcolumn %}
  {% endcolumns %}

Esses parâmetros modificarão o `theme` e variáveis CSS dos componentes do SDK Web.

***

## Configuração de CSS avançada

Toda a página inicial pode ser personalizada usando as variáveis CSS fornecidas pela tag `facephi-sdk-provider` do SDK Provider, o que permite um nível de Personalização mais alto.

Basta adicionar as variáveis CSS desejadas na área de texto `CSS personalizado`.

Consulte a [lista completa de variáveis CSS](/docs.facephi-pt-br/sdks/sdk-web/personalizacion.md) para ver todas as variáveis CSS disponíveis fornecidas pelo SDK Provider e pelos widgets.

**Exemplo**:

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

> Aviso: Se você sobrescrever as variáveis CSS definidas pelo tema, deve usar a flag `!important` para que suas alterações tenham efeito.

#### Variáveis CSS afetadas pelo tema:

* **Fonte**: `--wrapper-primary-font`, `--wrapper-secondary-font`.
* **Secundário**: `--wrapper-color-primary`, `--wrapper-color-progress-bar`, `--wrapper-color-tutorial-background`.
* **Terciário**: `--wrapper-color-hover`, `--wrapper-color-tutorial-shirt`.
* **Fundo**: `--wrapper-color-background`.

**Exemplo**:

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

***

## Domínio personalizado

Como usar um subdomínio personalizado em vez do domínio da Landing.

### Opções de configuração de Domínio personalizado para Landing

{% columns %}
{% column %}

<figure><img src="/files/01809b56b8a6d10e22a1267bf4a27f34ec4b0c2a" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

#### Tipo de domínio:

* **Domínio Facephi:** Domínio padrão oferecido pela equipe da Facephi.
* **Domínio Personalizado**: Domínio personalizado a ser utilizado para a Landing oferecido pelo cliente.

#### Nome

Nome identificador para a Landing.

#### Domínio Personalizado

Domínio personalizado que o cliente deve fornecer para que seja usado para a Landing.

#### SDK API Key

SDK API Key gerada pela equipe da Facephi para esse domínio.
{% endcolumn %}
{% endcolumns %}

### Configuração do domínio por parte do cliente

Por parte do cliente, é disponibilizado o seguinte *CNAME* para que o associe ao respectivo subdomínio configurado: `landing.idv-suite-cd.com`

Esse subdomínio deverá ser configurado com o *CNAME* definido no registro de servidor de nomes ao qual o domínio fornecido esteja associado.