> 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/selphid-documentos/personalizacion.md).

# Personalização

O Widget SelphID é facilmente personalizável por meio de variáveis CSS e algumas propriedades.

***

### Personalização de estilos

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

***

### Configuração de textos

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 Widget SelphID podem ser substituídas pelo 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
// Exemplo em JSX
<facephi-selphid-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-selphid-widget>
```

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

{% hint style="info" %}
Observação: O valor de `tutorialAnimations` deve estar em formato de array de strings (`string[]`). Use JSX, variáveis do seu framework ou lógica de JavaScript para implementar seu valor.
{% endhint %}

***