Personalização

Personalização do componente SelphID Widget.

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.

---

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).

<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.

---

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.

<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>

Configure --wrapper-display-logo a "block" para mostrar o logo na seção superior do widget.

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.

---