Personalização
Guia de Personalização do SDK Web
Personalização de assets visuais
As animações do SDK Web podem ser configuradas com a propriedade customAnimations na <facephi-sdk-provider>.
Com essa propriedade, é possível substituir uma ou várias animações dos componentes oferecidos pelo SDK Web:
SDK Provider
SelphID
Selphi
FileUploader
QRWidget
Para mais informações, consulte a documentação da propriedade customAnimations.
Exemplo:
// Ejemplo de configuración
const customAnimations = {
sdkProvider: {
loading: "/assets/anim/custom-loading.gif",
},
selphi: {
loading: "/assets/anim/custom-loading.gif",
},
selphid: {
loading: "/assets/anim/custom-loading.gif",
}
};
// HTML
<facephi-sdk-provider
customAnimations={customAnimations}
>
(...)
</facephi-sdk-provider>Nota: Caso uma animação seja configurada por meio desta propriedade e da prop direta (Por exemplo: customAnimations.sdkProvider.loading e loadingAnimation), prevalecerá o valor configurado em customAnimations.
Personalização de estilos
Os componentes SDK Provider e os oferecidos por ele, como Selphi e SelphID, podem ser personalizados com as seguintes variáveis CSS aplicadas à tag facephi-sdk-provider:
Exemplo:
A configuração CSS deve estar definida com a encapsulação correta (global, scoped, ...). Em caso de integrações de componentes, recomenda-se adicionar a configuração CSS de facephi-sdk-provider e sua configuração dentro da tag do componente :host. Além disso, uma configuração CSS global do componente também funcionará da mesma forma.
Variáveis de cor
--backgroundColor
File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget
Cor de fundo principal do contêiner
transparent
--color-state-loading
Loading Ellipsis
Cor da animação de carregamento do Provider
#243760
--color-background-primary
File Uploader, Choose Document, QR Widget
Cor de fundo dos elementos principais (área de soltar, menus suspensos, áreas de conteúdo)
#ffffff
--color-background-hover
File Uploader, Choose Document
Cor de fundo ao passar o mouse sobre elementos interativos
#cedafc
--color-background-disabled
File Uploader, Choose Document, QR Widget
Cor de fundo dos elementos desabilitados
#eaeef6
--color-text-primary
File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget
Cor do texto principal
#1d2c4d
--color-text-secondary
File Uploader, Choose Document
Cor do texto secundário e de placeholders
#526080
--color-text-disabled
File Uploader, Choose Document, QR Widget
Cor do texto de elementos desabilitados
#afb8cc
--color-text-on-primary
File Uploader, Choose Document, QR Widget, Tip Widget
Cor do texto sobre fundos de cor primária
#ffffff
--color-border-primary
File Uploader, Choose Document
Cor da borda dos elementos
#ccd4e5
--color-state-error
File Uploader
Cor para estados de erro
#dd3631
--color-state-success
File Uploader
Cor para estados de sucesso
#0f8837
--color-icon-primary
File Uploader, Error View
Cor primária para ícones
#243760
--color-icon-secondary
File Uploader
Cor secundária para ícones
#7d879c
--primaryColor
Choose Document
Cor de fundo dos elementos selecionados
transparent
--secondaryColor
File Uploader, Choose Document, QR Widget, Tip Widget
Cor primária de botões e elementos ativos
#3167fc
--tertiaryColor
File Uploader, Choose Document, QR Widget, Tip Widget
Cor de hover e foco dos botões
#2b50b6
Cores de animação do tutorial
--color-tutorial-computer-bg
Lottie Widget (tutoriais Selphi, SelphID)
Cor de fundo da tela do computador nas animações do tutorial
#4c7cfc
--color-tutorial-shirt
Lottie Widget (tutoriais QR, Selphi, SelphID)
Cor da roupa do avatar nas animações do tutorial
#1d2c4d
--color-tutorial-avatar-bg
Lottie Widget (tutoriais QR, Selphi)
Cor de fundo do avatar nas animações do tutorial
#d5dae9
--color-tutorial-scan-line
Lottie Widget (tutorial QR)
Cor da linha de escaneamento na animação do tutorial QR
#5fc982
--color-tutorial-earrings
Lottie Widget (tutorial QR)
Cor dos brincos e acessórios nas animações do tutorial
#f4a485
--color-tutorial-check
Lottie Widget (tutorial Selphi)
Cor do check de sucesso no tutorial Selphi
#07a13a
--color-tutorial-progress
Lottie Widget (tutorial Selphi)
Cor da barra de progresso circular no tutorial Selphi
#5fc982
--color-tutorial-capture
Lottie Widget (tutorial móvel SelphID)
Cor de sucesso de captura no tutorial móvel
#07a13a
--color-tutorial-device-bg
Lottie Widget (tutorial de desktop SelphID)
Cor de fundo da tela do dispositivo no tutorial SelphID
#2b50b6
Variáveis de tipografia
--wrapper-primary-font
File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget
Família de fontes principal dos componentes
'Verdana', sans-serif
--title-font
File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget
Fonte do título principal
"Poppins-Semibold"
--text-font
File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget
Fonte do texto principal
"Poppins-Regular"
--wrapper-font-family
File Uploader (drag-drop)
Família de fontes do componente de arrastar e soltar
'Verdana', sans-serif
--wrapper-text-font-size
File Uploader
Tamanho da fonte do texto
1em
--secondary-font-weight
File Uploader
Peso da fonte dos títulos secundários
600
--primary-font-weight
File Uploader
Peso da fonte do texto principal
400
Variáveis de layout
--wrapper-border-radius
File Uploader
Raio da borda dos elementos
0.5em
--height-field
Choose Document
Altura dos campos do formulário
40px
Exemplo:
Nota: A configuração CSS deve ser aplicada com a encapsulação correta (global, scoped, ...). Em integrações com componentes, recomenda-se adicionar a configuração CSS de
facephi-sdk-providere suas variáveis dentro da tag do componente:host. Além disso, uma configuração CSS global do componente funcionará do mesmo modo.
Variáveis do Selphi
Essas variáveis controlam o estilo do componente Selphi para a Captura Facial. Todas as variáveis são aplicadas à tag facephi-sdk-provider.
Variáveis de cor
--wrapper-color-background
Cor de fundo principal do widget
#FFFFFF
--wrapper-color-primary
Cor dos elementos principais
#3167FC
--wrapper-color-secondary
Cor dos elementos secundários
#FFFFFF
--wrapper-color-hover
Cor do efeito hover
#2B50B6
--wrapper-color-primary-text
Cor do texto principal
#1D2C4D
--wrapper-color-secondary-text
Cor do texto secundário
#1D2C4D
--wrapper-color-progress-bar
Cor da barra de progresso durante a extração
#3167FC
--wrapper-color-progress-bar-background
Cor de fundo da barra de progresso ao redor do stream da câmera
transparent
--wrapper-color-capture-success
Cor da borda quando o rosto é capturado corretamente
#60C782
--wrapper-color-capture-fail
Cor do texto e da barra de progresso quando a extração falha
#F24B45
--wrapper-color-capture-warning
Cor da falha no teste de atividade durante o desafio de Liveness Ativo
#EB6A00
--wrapper-color-liveness-arrow
Cor da seta direcional durante a verificação de atividade
#5FC982
--wrapper-color-icon
Cor dos ícones no componente
#243760
--wrapper-color-error-icon
Cor principal do ícone de erro na tela de erro
#DD3631
--wrapper-color-browser-icon-background
Cor de fundo do ícone do navegador na tela BrowserError
transparent
--wrapper-color-debug-error-message
Cor da mensagem de erro interna quando a depuração está ativada
#DD3631
--wrapper-color-loading-camera-background
Cor de fundo da câmera antes de ser carregada completamente no DOM
#000000
--wrapper-color-loading
Cor principal da animação de carregamento padrão
#1D2C4D
Cores de animação do tutorial
--wrapper-color-tutorial-background
Cor de fundo nas animações do tutorial padrão
#EAEEF6
--wrapper-color-tutorial-progress
Cor da barra de progresso nas animações do tutorial padrão
#5FC982
--wrapper-color-tutorial-tshirt
Cor da camiseta nas animações do tutorial padrão
#3167FC
--wrapper-color-tutorial-earrings
Cor dos brincos e óculos escuros nas animações do tutorial padrão
#F4A485
Variáveis de tipografia
--wrapper-primary-font
Fonte do texto principal
"Poppins-Regular"
--wrapper-primary-font-weight
Peso da fonte principal
400
--wrapper-secondary-font
Fonte do texto secundário
"Poppins-Semibold"
--wrapper-secondary-font-weight
Peso da fonte secundária
600
--wrapper-text-font-size
Tamanho da fonte do texto do widget
1em
--wrapper-title-font-size
Tamanho da fonte do título do widget
1.4em
--wrapper-line-height
Altura da linha do texto
1.3125em
--wrapper-vertical-align
Alinhamento vertical do texto no contêiner
center
--wrapper-text-align
Alinhamento horizontal do texto no contêiner
center
Variáveis de layout
--wrapper-progress-bar-width
Largura da barra de progresso
0.5em
--wrapper-border-radius
Raio da borda dos botões
0.5em
--wrapper-error-icon-max-width
Largura máxima do ícone da tela de erro
unset
Visibilidade do logo
--wrapper-display-logo
Mostrar ou ocultar o logo (usar block para mostrar ou none para ocultar)
none
Exemplo:
Variáveis do SelphID
Essas variáveis controlam o estilo do componente SelphID para a Captura de Documento. Todas as variáveis são aplicadas à tag facephi-sdk-provider.
Variáveis de cor
--wrapper-color-background
Cor de fundo principal do widget
#FFFFFF
--wrapper-color-primary
Cor dos elementos principais
#3167FC
--wrapper-color-secondary
Cor dos elementos secundários
#FFFFFF
--wrapper-color-hover
Cor do efeito hover
#2B50B6
--wrapper-color-primary-text
Cor do texto principal
#1D2C4D
--wrapper-color-secondary-text
Cor do texto secundário
#1D2C4D
--wrapper-color-capture-success
Cor da borda quando o documento é capturado corretamente
#07A13A
--wrapper-color-capture-fail
Cor do texto, barra de progresso e borda do documento quando a extração falha
#F24B45
--wrapper-color-capture-neutral
Cor da borda do documento em seu estado neutro (por padrão, a cor primária)
#3167FC
--wrapper-color-diagnostic-primary
Cor de fundo do texto informativo
#EAEEF6
--wrapper-color-diagnostic-secondary
Cor de fundo do texto informativo quando cameraOverflow está ativado
#243760
--wrapper-color-background-camera
Cor de fundo do stream de vídeo na tela de captura
#10192B
--wrapper-color-background-preview-image
Cor de fundo da imagem de pré-visualização
#FFFFFF
--wrapper-color-camera-overflow
Cor de fundo do widget na tela de captura de documento quando cameraOverflow está ativado
#10192b85
--wrapper-color-camera-overflow-filter
Filtro de fundo do widget na tela de captura de documento quando cameraOverflow está ativado
#00000030
--wrapper-color-icon
Cor dos ícones no componente
#243760
--wrapper-color-error-icon
Cor principal do ícone de erro na tela de erro
#DD3631
--wrapper-color-browser-icon-background
Cor de fundo do ícone do navegador na tela BrowserError
transparent
--wrapper-color-debug-error-message
Cor da mensagem de erro interna quando a depuração está ativada
#DD3631
--wrapper-color-loading
Cor principal da animação de carregamento padrão
#1D2C4D
Cores de animação do tutorial
--wrapper-color-tutorial-background
Cor de fundo nas animações do tutorial padrão
#3167FC
--wrapper-color-tutorial-success
Cor da camada de sucesso nas animações do tutorial padrão
#5BBF7E
Variáveis de tipografia
--wrapper-primary-font
Fonte do texto principal
"Poppins-Regular"
--wrapper-primary-font-weight
Peso da fonte principal
400
--wrapper-secondary-font
Fonte do texto secundário
"Poppins-Semibold"
--wrapper-secondary-font-weight
Peso da fonte secundária
600
--wrapper-text-font-size
Tamanho da fonte do texto do widget
1em
--wrapper-title-font-size
Tamanho da fonte do título do widget
1.4em
--wrapper-title-font-size-mobile
Tamanho da fonte do título do widget em resoluções móveis
1.125em
--wrapper-line-height
Altura da linha do texto
1.75em
--wrapper-vertical-align
Alinhamento vertical do texto no contêiner
center
--wrapper-text-align
Alinhamento horizontal do texto no contêiner
center
Variáveis de layout
--wrapper-document-border-width
Largura da borda do stream de vídeo
0.225em
--wrapper-diagnostic-border-width
Largura da borda da mensagem informativa
0.175em
--wrapper-border-radius
Raio da borda dos botões
0.5em
--wrapper-error-icon-max-width
Largura máxima do ícone da tela de erro
unset
Visibilidade do logo
--wrapper-display-logo
Mostrar ou ocultar o logo (usar block para mostrar ou none para ocultar)
none
Exemplo:
Personalização do modo escuro
Os componentes do SDK Provider podem ser facilmente adaptados a temas de modo escuro substituindo as variáveis CSS pelos valores de cor adequados. A seguir, são mostrados exemplos de configuração mínima para cada categoria de componentes.
Modo escuro para os componentes do SDK
Aplique estas variáveis para personalizar File Uploader, Choose Document, QR Widget e o restante dos componentes principais do SDK em modo escuro:
Dica: Você pode combinar estas variáveis de modo escuro com uma media query CSS para mudar o tema automaticamente de acordo com as preferências do usuário:
Propriedade de idioma
A propriedade de idioma neste componente SDK provider oferece uma abordagem robusta e flexível para seleção de idioma e internacionalização. Suporta traduções predefinidas para Espanhol (padrão), Inglês e Português, e também pode ser estendida com arquivos de tradução personalizados. Esta propriedade aceita três tipos: um enum Language incorporado, uma string (como URL para um JSON de tradução) ou um objeto para configuração personalizada.
Idiomas padrão:
é: Textos em espanhol (valor padrão).em: Textos em inglês.pt: Textos em português.
Tipo da propriedade: Language | string | object
Tipos suportados e uso
1. Enum Language
Use o enum predefinido para os idiomas suportados por padrão.
Uso:
2. String (URL para JSON de Tradução)
Passe uma string para a propriedade de idioma para obter um arquivo JSON que contenha traduções completas ou parciais para um ou mais Widgets dentro do componente SDK provider.
Exemplos:
Esquema JSON:
O nível raiz deve ser um objeto que contenha uma ou mais das seguintes chaves de widget:
sdkselphiselphid
A configuração dos seguintes componentes é realizada dentro do elemento sdk:
FileUploader (Upload de arquivos).
VideoProvider (Serviço de gravação de vídeo).
Cada objeto permitirá a edição total ou parcial dos textos utilizados dentro dos seus componentes.
Estrutura de exemplo:
Nota: Se nenhuma dessas quatro chaves estiver presente, o componente SDK provider voltará ao idioma padrão: espanhol.
Estrutura JSON – Opções
1. Seleção de idioma padrão: Especifica um idioma existente para um Widget:
2. Sobrescritas parciais de tradução: Isso fornece uma forma de sobrescrever literais específicos para um Widget/idioma.
O literal sobrescrito deve coincidir exatamente com uma chave de tradução existente. Consulte a seção de Literais de Widget para uma lista completa.
3. Adicionar um novo idioma: Para definir um idioma completamente novo, forneça todos os literais necessários para o(s) Widget(s) correspondente(s).
Exemplo em coreano:
Ao adicionar um novo idioma, você deve fornecer todos os literais necessários para cada Widget afetado.
4. Combinação de opções: Você pode combinar seleções de idioma padrão, sobrescritas parciais e novas definições de idioma dentro do mesmo objeto ou JSON conforme necessário.
Exemplo:
3. Objeto (Atribuição direta)
Você também pode passar diretamente um objeto com o mesmo esquema que o JSON descrito acima.
Comportamento de fallback
Se a tradução fornecida (seja por URL ou por objeto) não contiver nenhuma chave raiz válida (sdk, selphi, selphid, recruitment), será usado o idioma padrão: espanhol.
Qualquer literal ausente para um novo idioma também retornará aos valores padrão desse literal em espanhol.
Modelos de literais
A lista completa de literais de tradução para cada Widget, necessários para criar sobrescritas completas ou parciais, pode ser encontrada aqui:
Literais do SDK Provider:
Espanhol
Inglês
Português
Modelo
Neste objeto/arquivo também são configuradas as strings dos componentes:
FileUploader
VideoProvider
VideoAssistance
Literais de SelphID:
Espanhol
Inglês
Português
Modelo
Literais de Selphi:
Espanhol
inglês
Português
Modelo
Exemplos de casos de uso
Alterar componente para inglês
Adicionar coreano usando um JSON de CDN
Onde kr.json es:
Combinar diferentes cenários
Notas e recomendações
Ao sobrescrever ou adicionar traduções, certifique-se de que todos os literais exigidos para o Widget desejado sejam fornecidos para garantir uma experiência de usuário completa no novo idioma.
Para resultados consistentes, certifique-se de que as chaves dos literais coincidam exatamente com as dos pacotes de tradução padrão.
Se um pacote de tradução ou um esquema não corresponder aos requisitos, será aplicada a fallback (espanhol).
Apêndice
Consulte a Referência de Literais de Widget para uma lista completa das chaves de tradução de cada Widget separadamente em sua seção de Personalização.
Dicas úteis de Personalização
Personalização das animações de carregamento
É possível modificar as animações padrão (alterando as cores) ou substituí-las por animações personalizadas.
Alterar a cor das animações de carregamento
Para alterar a cor das animações serão usadas as variáveis CSS oferecidas para esse fim:
SDK Provider (Loading Ellipsis):
--color-state-loading.Componentes Selphi e SelphID:
--wrapper-color-loading.
Alterar animação de carregamento
As animações de carregamento podem ser substituídas por meio da propriedade loadingAnimation.
Esta propriedade está disponível para os componentes:
Ocultar os tempos de carregamento
Quando se usa uma tela de carregamento personalizada em vez das telas padrão oferecidas pelos componentes do SDK, é possível ocultar as telas de carregamento com um elemento sobreposto até que o primeiro Widget esteja completamente carregado. Isso pode ser controlado pelos eventos de "fim de carregamento" dos Widgets.
Exemplo (JSX): overlay controlado por estado; fica oculto quando SelphID emite moduleLoaded.
Observação: O carregamento do próximo componente (normalmente Selphi) pode ser ocultado da mesma forma, ou então personalizando a animação de carregamento do Widget por meio da propriedade loadingAnimation.
Aviso: Certifique-se de que essa sobreposição não cubra possíveis componentes, telas de erro ou fluxos de erro. Esse comportamento é responsabilidade do implementador.
Atualizado