> 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/sdks/sdk-web/componentes/selphi-biometria-facial/personalizacion.md).

# Personalização

## Personalização do Selphi Widget

O Selphi Widget pode ser facilmente personalizado por meio de variáveis CSS e algumas propriedades.

***

### Personalização de estilos

Os Widgets de Selphi e SelphID podem ser personalizados com as seguintes variáveis CSS aplicadas à tag `facephi-sdk-provider`. Confira a lista completa de variáveis CSS na página [Personalização de CSS do Provedor SDK](/docs.facephi-pt-br/sdks/sdk-web/personalizacion.md).

***

### Configuração de texto

Os textos padrão do componente podem ser substituídos com o uso de um arquivo `JSON` de idioma personalizado referenciado na propriedade `language` no elemento SDK Provider (`facephi-sdk-provider`).

```jsx
<facephi-sdk-provider
  language={'/i18n/custom-strings.json'}
  ...
></facephi-sdk-provider>
```

Se faltar alguma string, o widget não carregará nenhum texto nesse lugar.

Consulte as informações referentes à configuração de literais, incluindo os modelos de tradução padrão, na seção de [personalização do SDK Web](/docs.facephi-pt-br/sdks/sdk-web/personalizacion.md#plantillas-de-literales).

***

### Personalização de recursos gráficos

As animações utilizadas no Selphi Widget podem ser substituídas com o uso das propriedades `logo`, `loadingAnimation` e `tutorialAnimations`.

Para as animações, é recomendável utilizar a propriedade [`customAnimations` do sdk provider](/docs.facephi-pt-br/sdks/sdk-web/componentes/sdk-provider/propiedades/customanimations.md).

```jsx
<facephi-selphi-widget
  logo={'/assets/images/logo.png'}
  loadingAnimation={'/assets/images/loading.gif'}
  tutorialAnimations={ ["/assets/images/tutorial1.gif", "/assets/images/tutorial2.gif", "/assets/images/tutorial3.gif"] }
  ...
></facephi-selphi-widget>
```

{% hint style="info" %}
Configure `--wrapper-display-logo` a `"block"` para mostrar o logo na seção superior do widget.
{% endhint %}

{% hint style="info" %}
O valor de `tutorialAnimations` deve estar no formato de array de strings (`string[]`). Use JSX, variáveis de frameworks ou lógica de JavaScript para implementar seu valor.
{% endhint %}

***