Customizações Sdk Web
Customização
Com objetivo de deixar a experiência de captura mais próxima da sua identidade visual, é possível realizar customizações de alguns componentes no layout da tela de Instrução e Câmera.
Tela de instrução
- JavaScript
1 - Tela
a. Visualização on/off
IFortfaceInstructions.showInstructions: boolean (default: True)
2 - Botão Voltar (X)
a. Imagem do ícone
IFortfaceInstructions.cancelButtonImage: string
b. Visualização on/off
IFortfaceInstructions.showCancelButton: boolean (default: True)
3 - Textos (título e itens)
a. Fonte
IFortfaceInstructions.font: string (default: 'Poppins, sans-serif')
b. Cores
IFortfaceInstructions.titleTextColor: string (default: '#332D41')
IFortfaceInstructions.bodyTextColor: string (default: '#332D41')
c. Textos
IFortfaceInstructions.title: string (default: 'Dicas importantes para a foto do seu rosto!')
IFortfaceInstructions.noItemsMessage: string (default: 'Deixe o rosto visível e retire itens como óculos e boné')
IFortfaceInstructions.placeMessage: string (default: 'Busque um local iluminado')
IFortfaceInstructions.expressionMessage: string (default: 'Mantenha a sua expressão neutra')
IFortfaceInstructions.positionMessage: string (default: 'Posicione seu celular na altura do seu rosto')\
4 - Ícones
a. Cor do ícone
IFortfaceInstructions.iconColor: string (default: '#00A594')
IFortfaceInstructions.backgroundIconColor: string (default: '#f1f1f1')
5 - Botão Continuar
a. Cor do botão
IFortfaceInstructions.buttonBgColor: string (default: '#00A594')
IFortfaceInstructions.buttonPressedColor: string (default: '#008577')
b. Cor do texto
IFortfaceInstructions.buttonTextColor: string (default: '#FFFFFF')
IFortfaceInstructions.buttonText: string (default: 'Continuar')
c. Borda Arredondada
IFortfaceInstructions.buttonRadius: string (default: '6px')
6 - Fundo da tela
a. Cor do fundo
IFortfaceInstructions.background: string (default: '#FFFFFF')
Tela da Câmera - Captura Biométrica
- JavaScript
1 - Timeout
a. Tempo
IFortfaceCamera.timeout: number (default: 30)
IFortfaceCamera.brightnessEvaluation.validationTimeout: number (default: 10)
2 - Botão Voltar (X)
a. Imagem do ícone
IFortfaceCamera.cancelButtonImage: string
b. Visualização on/off
IFortfaceCamera.showCancelButton: boolean (default: True)
3 - Mensagens de feedback
a. Fonte
IFortfaceCamera.font: string (default: 'Poppins, sans-serif')
b. Textos
IFortfaceCamera.startMessage: string (default: 'Enquadre o seu rosto dentro da forma oval')
IFortfaceCamera.faceNoCenter: string (default: 'Centralize seu rosto')
IFortfaceCamera.noFaceRoll: string (default: 'Deixe sua cabeça reta')
IFortfaceCamera.facePositioned: string (default: 'Aguarde a validação,\ntente não se mexer')
IFortfaceCamera.noFace: string (default: 'Posicione seu rosto na área indicada')
IFortfaceCamera.faceFar: string (default: 'Aproxime o seu rosto')
IFortfaceCamera.faceNear: string (default: 'Afaste o seu rosto')
IFortfaceCamera.facePitchIsUp: string (default: 'Abaixe seu rosto')
IFortfaceCamera.facePitchIsDown: string (default: 'Levante seu rosto')
IFortfaceCamera.noFaceYaw: string (default: 'Olhe para frente')
IFortfaceCamera.faceRollLeft: string (default: 'Incline sua cabeça para a esquerda')
IFortfaceCamera.faceRollRight: string (default: 'Incline sua cabeça para a direita')
IFortfaceCamera.faceCenterLeft: string (default: 'Mova a câmera para a esquerda')
IFortfaceCamera.faceCenterRight: string (default: 'Mova a câmera para a direita')
IFortfaceCamera.faceCenterUp: string (default: 'Mova a câmera para cima')
IFortfaceCamera.faceCenterDown: string (default: 'Mova a câmera para baixo')
IFortfaceCamera.brightnessEvaluation.lowBrightnessMessage: string (default: 'Melhore a iluminação')
IFortfaceCamera.brightnessEvaluation.highBrightnessMessage: string (default: 'Diminua a luz no\nseu rosto')
c. Cor
IFortfaceCamera.textColor: string (default: '#332D41')
4 - Status
a. Neutro
IFortfaceCamera.neutralColor: string (default: '#CDCDCD')
b. Alerta
IFortfaceCamera.alertColor: string (default: '#FF9902')
c. Sucesso
IFortfaceCamera.successColor: string (default: '#5FC213')
d. Luminosidade
IFortfaceCamera.brightnessEvaluation.feedbackColor: string (default: '#24B8C2')
5-Frames de mensagem
a.Visualização on/off
IFortfaceCamera.frameTextVisible: boolean (default: True)
6 - Loading do status de sucesso
a. Cor
IFortfaceCamera.loadingColor: string (default: '#5FC213')
IFortfaceCamera.loadingStroke: string (default: '#FFFFFF')
7 - Fundo da tela
a. Cor
IFortfaceCamera.background: string (default: '#FFFFFF')
8 - Logo no rodapé
a. Imagem
IFortfaceCamera.logo: string
9 - Modo Modal
a. Ativação do modo modal
IFortfaceModal.available: boolean (default: False)
b. Fundo
IFortfaceModal.overlayColor: string (default: '#000000')
IFortfaceModal.overlayOpacity: number (default: 0.4)
c. Tamanho mínimo da tela para ativar o modo modal
IFortfaceModal.minScreenWidth: number (default: 1024)
10 - Ícone de Luminosidade
a. Imagem
IFortfaceCamera.brightnessEvaluation.highBrightnessIcon: string
IFortfaceCamera.brightnessEvaluation.lowBrightnessIcon: string
b. Cor
IFortfaceCamera.brightnessEvaluation.iconBackgroundColor: string (default: '#F1F1F1')
Estado de prontidão
- JavaScript
1 - Timeout
a. Tempo
IFortfaceBase.timeout: number (default: 15)
2 - Mensagens de espera pela abertura da câmera
a. Sequência de textos
O array deverá ser preenchido com 3 strings, sendo os índices 0, 1 e 2 a ordem das mensagens que aparecerão na tela, respectivamente.
IFortfaceCamera.waitCameraDescription: string[] (default: ['Iniciando, prepare-se para a foto', 'Aguarde só mais um pouco', 'Quase lá'])
3 - Botão de troca de câmera
a. Ativação constante do botão
IFortfaceCamera.switchCameraButtonVisible: boolean (default: False)
b. Cor do botão
IFortfaceCamera.changeCameraButtonBgColor: string (default: '#F7F7F7')
c. Cor do texto
IFortfaceCamera.changeCameraButtonTextColor: string (default: '#000000')
d. Borda Arredondada
IFortfaceCamera.changeCameraButtonRadius: string (default: '7px')
4 - Componente seletor de câmera
a. Ativação do seletor de câmera
IFortfaceCameraPreview.showPreviewModalIfError: boolean (default: True)
b. Título
IFortfaceCameraPreview.title: string (default: 'Selecione abaixo a câmera que deseja utilizar')
c. Fundo
IFortfaceCameraPreview.background: string (default: '#FFFFFF')
d. Seletor
IFortfaceCameraPreview.radioColor: string (default: '#00A594')
e. Botão de confirmação
IFortfaceCameraPreview.buttonBgColor: string (default: '#00A594')
IFortfaceCameraPreview.buttonRadius: string (default: '6px')
IFortfaceCameraPreview.buttonTextColor: string (default: '#FFFFFF')
IFortfaceCameraPreview.buttonPressedColor: string (default: '#008577')
Tela da Câmera - Captura de Documentos
- JavaScript
1 - Timeout máximo
IFortfaceCameraDoc.timeout: number (default: 30)
2 - Botão voltar (X)
a. Imagem do Ícone
IFortfaceCameraDoc.cancelButtonImage: string
b. Visualização on/off
IFortfaceCameraDoc.showCancelButton: boolean (default: True)
3 - Textos
a. Fonte
IFortfaceCameraDoc.fontFamily: string (default: 'Poppins, sans-serif')
b. Mensagens
IFortfaceCameraDoc.startMessage: string (default: 'Enquadre o seu documento\nna marcação')
IFortfaceCameraDoc.captureReviewMessage: string (default: 'Seu documento está\nnítido e legível?')
4 - Botão de captura
a. Cor do texto
IFortfaceCameraDoc.captureDocButtonTextColor: string (default: '#FFFFFF')\
b. Cor de fundo
IFortfaceCameraDoc.captureDocButtonColor: string (default: '#00A594') IFortfaceCameraDoc.captureDocButtonPressedColor: string (default: '#008577')
c. Mensagem
IFortfaceCameraDoc.captureDocButtonMessage: string (default: 'Tirar foto');
5 - Botões de confirmação
a. Cor do texto
IFortfaceCameraDoc.retryCaptureButtonTextColor: string (default: '#FFFFFF')
IFortfaceCameraDoc.sendCaptureButtonTextColor: string (default: '#FFFFFF')\
b. Cor de fundo
IFortfaceCameraDoc.retryCaptureButtonColor: string (default: '#B3261E')
IFortfaceCameraDoc.retryCaptureButtonPressedColor: string (default: '#7D1B15')
IFortfaceCameraDoc.sendCaptureButtonColor: string (default: '#367C14')
IFortfaceCameraDoc.sendCaptureButtonPressedColor: string (default: '#26570E')
c. Mensagem
IFortfaceCameraDoc.retryCaptureButtonMessage: string (default: 'Tirar nova foto')
IFortfaceCameraDoc.sendCaptureButtonMessage: string (default: 'Sim, enviar')
Upload de documentos
- JavaScript
Bottom Sheet
1 - Título
a. Fonte e cor
IFortfaceDocUpload.initialBottomSheet.fontFamily: string (default: 'Poppins, sans-serif')
IFortfaceDocUpload.initialBottomSheet.textColor: string (default: '#332D41')
b. Mensagem
IFortfaceDocUpload.initialBottomSheet.titleMessage: string (default: 'Selecione uma foto nítida\ne de alta qualidade')
2 - Botões
a. Fundo
IFortfaceDocUpload.initialBottomSheet.openGalleryButtonBg: string (default: '#00A594')
IFortfaceDocUpload.initialBottomSheet.openGalleryButtonPressedColor: string (default: '#007468')
b. Texto
IFortfaceDocUpload.initialBottomSheet.openGalleryButtonMessage: string (default: 'Abrir galeria')
IFortfaceDocUpload.initialBottomSheet.openGalleryButtonTextColor: string (default: '#FFFFFF')
c. Texto botão cancelar
IFortfaceDocUpload.initialBottomSheet.cancelButtonMessage: string (default: 'Cancelar')
Tela de confirmação
3 - Botão cancelar (X)
a. Imagem do ícone
IFortfaceDocUpload.reviewScreen.cancelButtonImage: string
b. Visualização on/off
IFortfaceDocUpload.reviewScreen.showCancelButton: boolean (default: True)
4 - Textos
a. Fonte e cor
IFortfaceDocUpload.reviewScreen.fontFamily: string (default: 'Poppins, sans-serif')
IFortfaceDocUpload.reviewScreen.textColor: string (default: '#332D41')
b. Mensagens
IFortfaceDocUpload.reviewScreen.titleMessage: string (default: 'Confirme seu documento')
IFortfaceDocUpload.reviewScreen.descriptionMessage: string (default: 'Sua imagem deve estar com\nos dados legíveis e em boa qualidade.')
IFortfaceDocUpload.pdfPreviewUnavailable.titleMessage: string (default: 'Confirme seu arquivo')
IFortfaceDocUpload.pdfPreviewUnavailable.descriptionMessage: string (default: 'Verifique o nome do arquivo\nantes de enviar.')
Alguns navegadores ou sistemas operacionais podem não suportar a exibição de PDFs. Nesse caso, a tela de confirmação do arquivo é alterada para exibir as mensagens de IFortfaceDocUpload.pdfPreviewUnavailable, e apenas o nome/tamanho do arquivo é exibido abaixo da mensagem.
5 - Botões de confirmação e reenvio
a. Confirmação
IFortfaceDocUpload.reviewScreen.confirmButtonMessage: string (default: 'Enviar documento')
IFortfaceDocUpload.reviewScreen.confirmButtonColor: string (default: '#00A594')
IFortfaceDocUpload.reviewScreen.confirmButtonTextColor: string (default: '#FFFFFF')
IFortfaceDocUpload.reviewScreen.confirmButtonPressedColor: string (default: '#008577')
b. Reenvio
IFortfaceDocUpload.reviewScreen.retryButtonMessage: string (default: 'Carregar novamente')
IFortfaceDocUpload.reviewScreen.retryButtonTextColor: string (default: '#00A594')
IFortfaceDocUpload.reviewScreen.retryButtonPressedColor: string (default: '#007468')
Como funciona?
Cada uma das variáveis possui seu valor padrão.
- Se você atribuir um novo valor conforme o tipo da variável, o novo valor será redenrizado;
- Se nenhum novo valor for atribuído, será renderizado o padrão inicial.
- No caso da logo da tela de captura, se não for inicializada nenhuma imagem, não irá aparecer nada
Entendendo o trecho de código
Nosso SDK permite customização completa de sua interface e comportamento por meio do método setCustomizer. Para isso, você deve fornecer um objeto contendo implementações personalizadas para cada uma das interfaces principais do SDK, como base, camera, instructions, modal, entre outras.
Exemplo de uso:
const customizerProps = {
base: IFortfaceBase,
camera: IFortfaceCamera,
instructions: IFortfaceInstructions,
modal: IFortfaceModal,
cameraDoc: IFortfaceCameraDoc,
cameraPreview: IFortfaceCameraPreview,
docUpload: IFortfaceDocUpload,
};
fortfaceSdk.setCustomizer(customizerProps);
Cada propriedade representa uma parte específica das interfaces citadas anteriormente, permitindo adaptar estilos, textos ou comportamentos conforme as necessidades do seu produto.
Lembrete
Todos os itens específicos, como: ícones, imagens, família de fonte, etc., devem estar importados na pasta Assets do seu app.
Modo Modal ou Fullscreen
Além das customizações de interface, também temos a opção de usar o nosso SDK em abertura de modal ou fullscreen. A SDK é exibida em modo tela cheia por padrão em todos os dispositivos suportados.
Exemplos
Modo Modal (Portrait e Landscape)
Modo Fullscreen (Portrait e Landscape) - Valor padrão
Para configurar esses modos, é preciso alterar os seguintes atributos: