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.
Versão depreciada
A partir da versão v2.5.0 existe um novo padrão de customização informada nessa página. Acesse a versão antiga: Versão Deprecated
Tema padrão
- JavaScript
Tema
a. Aparência
FortfaceSDKCustomizer.theme.appearance.font_family: string (default: Helvetica)
FortfaceSDKCustomizer.theme.appearance.background_color: string (default: #FFFFFF)
FortfaceSDKCustomizer.theme.appearance.logo: string
FortfaceSDKCustomizer.theme.appearance.orientation: ["automatic" | "portrait" | "landscape"] (default: "automatic")
FortfaceSDKCustomizer.theme.appearance.modal.enabled: boolean (default: False)
FortfaceSDKCustomizer.theme.appearance.modal.overlayColor: string (default: #000000)
FortfaceSDKCustomizer.theme.appearance.modal.overlayOpacity: number (default: 0.4)
FortfaceSDKCustomizer.theme.appearance.modal.minScreenWidth: number (default: 1024)
b. Componentes padrões
-
Botão
FortfaceSDKCustomizer.theme.appearance.components.button.content: string
FortfaceSDKCustomizer.theme.appearance.components.button.background_color: string (default: #00A594)
FortfaceSDKCustomizer.theme.appearance.components.button.text_color: string (default: #FFFFFF)
FortfaceSDKCustomizer.theme.appearance.components.button.pressed_background_color: string (default: #008577)
FortfaceSDKCustomizer.theme.appearance.components.button.corner_radius: number (default: 6)
FortfaceSDKCustomizer.theme.appearance.components.button.font.size: number
FortfaceSDKCustomizer.theme.appearance.components.button.font.weight: number [100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] -
Botão fechar
FortfaceSDKCustomizer.theme.appearance.components.close_button.icon: string
FortfaceSDKCustomizer.theme.appearance.components.close_button.visible: boolean (default: True)
FortfaceSDKCustomizer.theme.appearance.components.close_button.position: ["top-left" | "top-right"] (default: 'top-left') -
Título
FortfaceSDKCustomizer.theme.appearance.components.title.content: string
FortfaceSDKCustomizer.theme.appearance.components.title.color: string (default: #332D41)
FortfaceSDKCustomizer.theme.appearance.components.title.font.size: number
FortfaceSDKCustomizer.theme.appearance.components.title.font.weight: number [100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] -
Descrição
FortfaceSDKCustomizer.theme.appearance.components.description.content: string
FortfaceSDKCustomizer.theme.appearance.components.description.color: string (default: #332D41)
FortfaceSDKCustomizer.theme.appearance.components.description.font.size: number
FortfaceSDKCustomizer.theme.appearance.components.description.font.weight: number [100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]
- JavaScript
Tela de instrução
1 - Tela
a. Visualização on/off
FortfaceSDKCustomizer.face_recognition.instructions_screen.visible: boolean (default: True)
2 - Botão Voltar (X)
a. Imagem do ícone
FortfaceSDKCustomizer.face_recognition.instructions_screen.close_button.icon: string
b. Visualização on/off
FortfaceSDKCustomizer.face_recognition.instructions_screen.close_button.visible: boolean (default: True)
3 - Textos (título e itens)
a. Fonte
IFortfaceInstructions.font: string (default: 'Poppins, sans-serif')
b. Cores
FortfaceSDKCustomizer.face_recognition.instructions_screen.title.color: string (default: '#332D41')
FortfaceSDKCustomizer.face_recognition.instructions_screen.topics.messages.no_items.color: string (default: '#332D41')
FortfaceSDKCustomizer.face_recognition.instructions_screen.topics.messages.well_lit.color: string (default: '#332D41')
FortfaceSDKCustomizer.face_recognition.instructions_screen.topics.messages.neutral_expression.color: string (default: '#332D41')
FortfaceSDKCustomizer.face_recognition.instructions_screen.topics.messages.straight_position.color: string (default: '#332D41')
c. Textos
FortfaceSDKCustomizer.face_recognition.instructions_screen.topics.messages.no_items.content: string (default: 'Dicas importantes para a foto do seu rosto!')
FortfaceSDKCustomizer.face_recognition.instructions_screen.topics.messages.well_lit.content: string (default: 'Deixe o rosto visível e retire itens como óculos e boné')
FortfaceSDKCustomizer.face_recognition.instructions_screen.topics.messages.neutral_expression.content: string (default: 'Busque um local iluminado')
FortfaceSDKCustomizer.face_recognition.instructions_screen.topics.messages.neutral_expression.content: string (default: 'Mantenha a sua expressão neutra')
FortfaceSDKCustomizer.face_recognition.instructions_screen.topics.messages.straight_position.content: string (default: 'Posicione seu celular na altura do seu rosto')\
4 - Ícones
a. Cor do ícone
FortfaceSDKCustomizer.face_recognition.instructions_screen.topics.icons.color: string (default: '#00A594')
FortfaceSDKCustomizer.face_recognition.instructions_screen.topics.icons.background_color: string (default: '#f1f1f1')
5 - Botão Continuar
a. Cor do botão
FortfaceSDKCustomizer.face_recognition.instructions_screen.continue_button.background_color: string (default: '#00A594')
FortfaceSDKCustomizer.face_recognition.instructions_screen.continue_button.pressed_background_color: string (default: '#008577')
b. Cor do texto
FortfaceSDKCustomizer.face_recognition.instructions_screen.continue_button.text_color: string (default: '#FFFFFF')
c. Texto FortfaceSDKCustomizer.face_recognition.instructions_screen.continue_button.content: string (default: 'Continuar')
d. Borda Arredondada
FortfaceSDKCustomizer.face_recognition.instructions_screen.continue_button.corner_radius: string (default: '6px')
6 - Fundo da tela
a. Cor do fundo
FortfaceSDKCustomizer.face_recognition.instructions_screen.background_color: string (default: '#FFFFFF')
Tela da Câmera - Captura Biométrica
- JavaScript
1 - Timeout
a. Tempo
FortfaceSDKCustomizer.face_recognition.camera_screen.timeout: number (default: 30)
FortfaceSDKCustomizer.face_recognition.camera_screen.brightness_validation.timeout: number (default: 10)
2 - Botão Voltar (X)
a. Imagem do ícone
FortfaceSDKCustomizer.face_recognition.camera_screen.close_button.icon: string
b. Visualização on/off
FortfaceSDKCustomizer.face_recognition.camera_screen.close_button.visible: 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')
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.content.positioned: string (default: 'Aguarde a validação,\ntente não se mexer')
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.content.no_face: string (default: 'Posicione seu rosto na área indicada')
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.content.face_far: string (default: 'Aproxime o seu rosto')
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.content.face_near: string (default: 'Afaste o seu rosto')
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.content.face_pitch_up: string (default: 'Abaixe seu rosto')
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.content.face_pitch_down: string (default: 'Levante seu rosto')
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.content.no_face_yaw: string (default: 'Olhe para frente')
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.content.face_roll_left: string (default: 'Incline sua cabeça para a esquerda')
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.content.face_roll_right: string (default: 'Incline sua cabeça para a direita')
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.content.face_center_left: string (default: 'Mova a câmera para a esquerda')
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.content.face_center_right: string (default: 'Mova a câmera para a direita')
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.content.face_center_up: string (default: 'Mova a câmera para cima')
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.content.face_center_down: string (default: 'Mova a câmera para baixo')
FortfaceSDKCustomizer.face_recognition.camera_screen.brightness_validation.brightnessEvaluation.messages.too_dark: string (default: 'Melhore a iluminação')
FortfaceSDKCustomizer.face_recognition.camera_screen.brightness_validation.brightnessEvaluation.messages?.too_bright: string (default: 'Diminua a luz no\nseu rosto')
c. Cor
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.color: string (default: '#332D41')
4 - Status
a. Alerta
FortfaceSDKCustomizer.face_recognition.camera_screen.feedback_colors.alert: string (default: '#FF9902')
b. Sucesso
FortfaceSDKCustomizer.face_recognition.camera_screen.feedback_colors.success: string (default: '#5FC213')
c. Luminosidade
FortfaceSDKCustomizer.face_recognition.camera_screen.feedback_colors.luminosity: string (default: '#24B8C2')
5-Frames de mensagem
a.Visualização on/off
FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.frame_text_visible: boolean (default: True)
6 - Loading do status de sucesso
a. Cor
FortfaceSDKCustomizer.face_recognition.camera_screen.feedback_colors.success: string (default: '#5FC213')
FortfaceSDKCustomizer.face_recognition.camera_screen.feedback_colors.loading_stroke_color: string (default: '#FFFFFF')
7 - Fundo da tela
a. Cor
FortfaceSDKCustomizer.face_recognition.camera_screen.background_color: string (default: '#FFFFFF')
8 - Logo no rodapé
a. Imagem
FortfaceSDKCustomizer.face_recognition.camera_screen.logo: string
9 - Modo Modal
a. Ativação do modo modal
FortfaceSDKCustomizer.theme.appearance.modal.enabled: boolean (default: False)
b. Fundo
FortfaceSDKCustomizer.theme.appearance.modal.overlayColor: string (default: '#000000')
FortfaceSDKCustomizer.theme.appearance.modal.overlayOpacity: number (default: 0.4)
c. Tamanho mínimo da tela para ativar o modo modal
FortfaceSDKCustomizer.theme.appearance.modal.minScreenWidth: number (default: 1024)
10 - Ícone de Luminosidade
a. Imagem
FortfaceSDKCustomizer.face_recognition.camera_screen.brightness_validation.icons.too_bright: string
FortfaceSDKCustomizer.face_recognition.camera_screen.brightness_validation.icons.too_dark: string
b. Cor
FortfaceSDKCustomizer.face_recognition.camera_screen.brightness_validation.icons.background_color: string (default: '#F1F1F1')
Estado de prontidão
- JavaScript
1 - Timeout
a. Tempo
FortfaceSDKCustomizer.face_recognition.camera_screen.timeout_ready: 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.
FortfaceSDKCustomizer.face_recognition.camera_screen.wait_camera_messages: 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
FortfaceSDKCustomizer.face_recognition.camera_screen.switch_camera_button.visible: boolean (default: False)
b. Cor do botão
FortfaceSDKCustomizer.face_recognition.camera_screen.switch_camera_button.background_color: string (default: '#F7F7F7')
c. Cor do texto
FortfaceSDKCustomizer.face_recognition.camera_screen.switch_camera_button.text_color: string (default: '#000000')
d. Borda Arredondada
FortfaceSDKCustomizer.face_recognition.camera_screen.switch_camera_button.corner_radius: string (default: '7px')
4 - Componente seletor de câmera
a. Ativação do seletor de câmera
FortfaceSDKCustomizer.face_recognition.camera_screen.camera_selector.show_modal_on_error: boolean (default: True)
b. Título
FortfaceSDKCustomizer.face_recognition.camera_screen.camera_selector.title.content: string (default: 'Selecione abaixo a câmera que deseja utilizar')
c. Fundo
FortfaceSDKCustomizer.face_recognition.camera_screen.camera_selector.background_color: string (default: '#FFFFFF')
d. Seletor
FortfaceSDKCustomizer.face_recognition.camera_screen.camera_selector.radio_color: string (default: '#00A594')
e. Botão de confirmação
FortfaceSDKCustomizer.face_recognition.camera_screen.camera_selector.confirm_button: string (default: '#00A594')
FortfaceSDKCustomizer.face_recognition.camera_screen.camera_selector.confirm_button.corner_radius: string (default: '6px')
FortfaceSDKCustomizer.face_recognition.camera_screen.camera_selector.confirm_button.text_color: string (default: '#FFFFFF')
FortfaceSDKCustomizer.face_recognition.camera_screen.camera_selector.confirm_button.pressed_background_color: string (default: '#008577')
Tela da Câmera - Captura de Documentos
- JavaScript
1 - Timeout máximo
FortfaceSDKCustomizer.document_recognition.camera_screen.timeout: number (default: 30)
2 - Botão voltar (X)
a. Imagem do Ícone
FortfaceSDKCustomizer.document_recognition.camera_screen.close_button.icon: string
b. Visualização on/off
FortfaceSDKCustomizer.document_recognition.camera_screen.visible: boolean (default: True)
3 - Textos
a. Fonte
IFortfaceCameraDoc.fontFamily: string (default: 'Poppins, sans-serif')
b. Mensagens
FortfaceSDKCustomizer.document_recognition.camera_screen.positioning_messages.content.start: string (default: 'Enquadre o seu documento\nna marcação')
FortfaceSDKCustomizer.document_recognition.review_screen.title.content: string (default: 'Seu documento está\nnítido e legível?')
4 - Botão de captura
a. Cor do texto
FortfaceSDKCustomizer.document_recognition.camera_screen.manual_capture_button.text_color: string (default: '#FFFFFF')\
b. Cor de fundo
FortfaceSDKCustomizer.document_recognition.camera_screen.manual_capture_button.text_color: string (default: '#00A594') FortfaceSDKCustomizer.document_recognition.camera_screen.manual_capture_button.pressed_background_color: string (default: '#008577')
c. Mensagem
FortfaceSDKCustomizer.document_recognition.camera_screen.manual_capture_button.content: string (default: 'Tirar foto');
5 - Botões de confirmação
a. Cor do texto
FortfaceSDKCustomizer.document_recognition.review_screen.retry_button.text_color: string (default: '#FFFFFF')
IFortfaceCameraDoc.sendCaptureButtonTextColor: string (default: '#FFFFFF')\
b. Cor de fundo
FortfaceSDKCustomizer.document_recognition.review_screen.retry_button.background_color: string (default: '#B3261E')
FortfaceSDKCustomizer.document_recognition.review_screen.retry_button.pressed_background_color: string (default: '#7D1B15')
FortfaceSDKCustomizer.document_recognition.review_screen.confirm_button.background_color: string (default: '#367C14')
FortfaceSDKCustomizer.document_recognition.review_screen.confirm_button.pressed_background_color: string (default: '#26570E')
c. Mensagem
FortfaceSDKCustomizer.document_recognition.review_screen.retry_button.content: string (default: 'Tirar nova foto')
FortfaceSDKCustomizer.document_recognition.review_screen.confirm_button.content: string (default: 'Sim, enviar')
Upload de documentos
- JavaScript
Bottom Sheet
1 - Título
a. Cor
FortfaceSDKCustomizer.document_upload.initial_bottom_sheet.title.color: string (default: '#332D41')
b. Mensagem
FortfaceSDKCustomizer.document_upload.initial_bottom_sheet.title.content: string (default: 'Selecione uma foto nítida\ne de alta qualidade')
2 - Botões
a. Fundo
FortfaceSDKCustomizer.document_upload.initial_bottom_sheet.open_gallery_button.background_color: string (default: '#00A594')
FortfaceSDKCustomizer.document_upload.initial_bottom_sheet.open_gallery_button.pressed_background_color: string (default: '#007468')
b. Texto
FortfaceSDKCustomizer.document_upload.initial_bottom_sheet.open_gallery_button.content: string (default: 'Abrir galeria')
FortfaceSDKCustomizer.document_upload.initial_bottom_sheet.open_gallery_button.text_color: string (default: '#FFFFFF')
c. Texto botão cancelar
FortfaceSDKCustomizer.document_upload.initial_bottom_sheet.cancel_button.content: string (default: 'Cancelar')
Tela de confirmação
3 - Botão cancelar (X)
a. Imagem do ícone
FortfaceSDKCustomizer.document_upload.review_screen.close_button.icon: string
b. Visualização on/off
FortfaceSDKCustomizer.document_upload.review_screen.close_button.visible: boolean (default: True)
4 - Textos
a. Fonte e cor
FortfaceSDKCustomizer.document_upload.review_screen.title.color: string (default: '#332D41')
b. Mensagens
FortfaceSDKCustomizer.document_upload.review_screen.title.content: string (default: 'Confirme seu documento')
FortfaceSDKCustomizer.document_upload.review_screen.description.content: string (default: 'Sua imagem deve estar com\nos dados legíveis e em boa qualidade.')
FortfaceSDKCustomizer.document_upload.review_screen.pdf_preview_unavailable.title_content: string (default: 'Confirme seu arquivo')
FortfaceSDKCustomizer.document_upload.review_screen.pdf_preview_unavailable.description_content: 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
FortfaceSDKCustomizer.document_upload.review_screen.confirm_button.content: string (default: 'Enviar documento')
FortfaceSDKCustomizer.document_upload.review_screen.confirm_button.background_color: string (default: '#00A594')
FortfaceSDKCustomizer.document_upload.review_screen.confirm_button.text_color: string (default: '#FFFFFF')
FortfaceSDKCustomizer.document_upload.review_screen.confirm_button.pressed_background_color: string (default: '#008577')
b. Reenvio
FortfaceSDKCustomizer.document_upload.review_screen.retry_button.retryButtcontentonMessage: string (default: 'Carregar novamente')
FortfaceSDKCustomizer.document_upload.review_screen.retry_button.text_color: string (default: '#00A594')
FortfaceSDKCustomizer.document_upload.review_screen.retry_button.pressed_background_color: 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 = {
version: '1.0',
theme: Theme,
face_recognition: FaceRecognition,
document_recognition: DocumentRecognition,
document_upload: DocumentUpload,
embedded: FortfaceEmbedded,
};
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:
- JavaScript
1 - Ativação do modo modal
FortfaceSDKCustomizer.theme.appearance.modal.enabled: boolean (default: False)
2 - Ativação do modo fullscreen
FortfaceSDKCustomizer.theme.appearance.modal.minScreenWidth: number (default: 1024)
3 - Fundo
FortfaceSDKCustomizer.theme.appearance.modal.overlayColor: string (default: '#000000')
FortfaceSDKCustomizer.theme.appearance.modal.overlayOpacity: number (default: 0.4)