Web SDK Customization

Customization

To make the capture experience closer to your visual identity, you can customize some components in the Instruction and Camera screen layout.

Deprecated version

Starting with v2.5.0, a new customization pattern is documented on this page. See the previous version: Deprecated version

Default theme

JavaScript

Theme

a. Appearance

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

Button
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]
Close button
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')
Title
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]
Description
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

Instruction screen

1 - Screen

a. Toggle visibility

FortfaceSDKCustomizer.face_recognition.instructions_screen.visible: boolean (default: True)

2 - Back button (X)

a. Icon image

FortfaceSDKCustomizer.face_recognition.instructions_screen.close_button.icon: string

b. Toggle visibility

FortfaceSDKCustomizer.face_recognition.instructions_screen.close_button.visible: boolean (default: True)

3 - Text (title and items)

a. Font

IFortfaceInstructions.font: string (default: 'Poppins, sans-serif')

b. Colors

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

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

a. Icon color

FortfaceSDKCustomizer.face_recognition.instructions_screen.topics.icons.color: string (default: '#00A594')
FortfaceSDKCustomizer.face_recognition.instructions_screen.topics.icons.background_color: string (default: '#f1f1f1')

5 - Continue button

a. Button color

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

FortfaceSDKCustomizer.face_recognition.instructions_screen.continue_button.text_color: string (default: '#FFFFFF')

c. Text FortfaceSDKCustomizer.face_recognition.instructions_screen.continue_button.content: string (default: 'Continuar')

d. Rounded corners

FortfaceSDKCustomizer.face_recognition.instructions_screen.continue_button.corner_radius: string (default: '6px')

6 - Screen background

a. Background color

FortfaceSDKCustomizer.face_recognition.instructions_screen.background_color: string (default: '#FFFFFF')

Camera screen - Biometric capture

Camera screen

JavaScript

1 - Timeout

a. Time

FortfaceSDKCustomizer.face_recognition.camera_screen.timeout: number (default: 30)
FortfaceSDKCustomizer.face_recognition.camera_screen.brightness_validation.timeout: number (default: 10)

2 - Back button (X)

a. Icon image

FortfaceSDKCustomizer.face_recognition.camera_screen.close_button.icon: string

b. Toggle visibility

FortfaceSDKCustomizer.face_recognition.camera_screen.close_button.visible: boolean (default: True)

3 - Feedback messages

a. Font

IFortfaceCamera.font: string (default: 'Poppins, sans-serif')

b. Messages

Deprecated properties

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

FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.color: string (default: '#332D41')

4 - Status

a. Alert

FortfaceSDKCustomizer.face_recognition.camera_screen.feedback_colors.alert: string (default: '#FF9902')

b. Success

FortfaceSDKCustomizer.face_recognition.camera_screen.feedback_colors.success: string (default: '#5FC213')

c. Luminosity

FortfaceSDKCustomizer.face_recognition.camera_screen.feedback_colors.luminosity: string (default: '#24B8C2')

5-Message frames

a. Toggle visibility

FortfaceSDKCustomizer.face_recognition.camera_screen.positioning_messages.frame_text_visible: boolean (default: True)

6 - Success status loading

a. Color

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

a. Color

FortfaceSDKCustomizer.face_recognition.camera_screen.background_color: string (default: '#FFFFFF')

a. Image

FortfaceSDKCustomizer.face_recognition.camera_screen.logo: string

a. Enable modal mode

FortfaceSDKCustomizer.theme.appearance.modal.enabled: boolean (default: False)

b. Background

FortfaceSDKCustomizer.theme.appearance.modal.overlayColor: string (default: '#000000')
FortfaceSDKCustomizer.theme.appearance.modal.overlayOpacity: number (default: 0.4)

c. Minimum screen width to enable modal mode

FortfaceSDKCustomizer.theme.appearance.modal.minScreenWidth: number (default: 1024)

10 - Luminosity icon

a. Image

FortfaceSDKCustomizer.face_recognition.camera_screen.brightness_validation.icons.too_bright: string
FortfaceSDKCustomizer.face_recognition.camera_screen.brightness_validation.icons.too_dark: string

b. Color

FortfaceSDKCustomizer.face_recognition.camera_screen.brightness_validation.icons.background_color: string (default: '#F1F1F1')

Ready state

JavaScript

1 - Timeout

a. Time

FortfaceSDKCustomizer.face_recognition.camera_screen.timeout_ready: number (default: 15)

2 - Messages while waiting for the camera to open

a. Text sequence
The array must contain 3 strings; indices 0, 1, and 2 are the order of messages shown on the screen, respectively.

FortfaceSDKCustomizer.face_recognition.camera_screen.wait_camera_messages: string[] (default: ['Iniciando, prepare-se para a foto', 'Aguarde só mais um pouco', 'Quase lá'])

3 - Camera switch button

a. Keep button visible

FortfaceSDKCustomizer.face_recognition.camera_screen.switch_camera_button.visible: boolean (default: False)

b. Button color

FortfaceSDKCustomizer.face_recognition.camera_screen.switch_camera_button.background_color: string (default: '#F7F7F7')

c. Text color

FortfaceSDKCustomizer.face_recognition.camera_screen.switch_camera_button.text_color: string (default: '#000000')

d. Rounded corners

FortfaceSDKCustomizer.face_recognition.camera_screen.switch_camera_button.corner_radius: string (default: '7px')

4 - Camera selector component

a. Enable camera selector

FortfaceSDKCustomizer.face_recognition.camera_screen.camera_selector.show_modal_on_error: boolean (default: True)

b. Title

FortfaceSDKCustomizer.face_recognition.camera_screen.camera_selector.title.content: string (default: 'Selecione abaixo a câmera que deseja utilizar')

c. Background

FortfaceSDKCustomizer.face_recognition.camera_screen.camera_selector.background_color: string (default: '#FFFFFF')

d. Selector

FortfaceSDKCustomizer.face_recognition.camera_screen.camera_selector.radio_color: string (default: '#00A594')

e. Confirm button

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

Camera screen - Document capture

Document capture screen

JavaScript

1 - Maximum timeout

FortfaceSDKCustomizer.document_recognition.camera_screen.timeout: number (default: 30)

2 - Back button (X)

a. Icon image

FortfaceSDKCustomizer.document_recognition.camera_screen.close_button.icon: string

b. Toggle visibility

FortfaceSDKCustomizer.document_recognition.camera_screen.visible: boolean (default: True)

3 - Text

a. Font

IFortfaceCameraDoc.fontFamily: string (default: 'Poppins, sans-serif')

b. Messages

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

a. Text color

FortfaceSDKCustomizer.document_recognition.camera_screen.manual_capture_button.text_color: string (default: '#FFFFFF')\

b. Background color

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

FortfaceSDKCustomizer.document_recognition.camera_screen.manual_capture_button.content: string (default: 'Tirar foto');

5 - Confirmation buttons

a. Text color

FortfaceSDKCustomizer.document_recognition.review_screen.retry_button.text_color: string (default: '#FFFFFF')
IFortfaceCameraDoc.sendCaptureButtonTextColor: string (default: '#FFFFFF')\

b. Background color

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

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

Document upload

Document upload screen

JavaScript

Bottom sheet

1 - Title

a. Color

FortfaceSDKCustomizer.document_upload.initial_bottom_sheet.title.color: string (default: '#332D41')

b. Message

FortfaceSDKCustomizer.document_upload.initial_bottom_sheet.title.content: string (default: 'Selecione uma foto nítida\ne de alta qualidade')

2 - Buttons

a. Background

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

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. Cancel button text

FortfaceSDKCustomizer.document_upload.initial_bottom_sheet.cancel_button.content: string (default: 'Cancelar')

Confirmation screen

3 - Cancel button (X)

a. Icon image

FortfaceSDKCustomizer.document_upload.review_screen.close_button.icon: string

b. Toggle visibility

FortfaceSDKCustomizer.document_upload.review_screen.close_button.visible: boolean (default: True)

4 - Text

a. Font and color

FortfaceSDKCustomizer.document_upload.review_screen.title.color: string (default: '#332D41')

b. Messages

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

PDF display

Some browsers or operating systems may not support displaying PDFs. In that case, the file confirmation screen switches to the messages from IFortfaceDocUpload.pdfPreviewUnavailable, and only the file name/size is shown below the message.

5 - Confirmation and retry buttons

a. Confirmation

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

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

How it works?

Each variable has its default value.

If you assign a new value according to the variable type, the new value will be rendered;
If no new value is assigned, the initial default is rendered.
For the capture screen logo, if no image is initialized, nothing is shown.

Understanding the code snippet

Our SDK allows full customization of its interface and behavior through the setCustomizer method. You must provide an object with custom implementations for each of the SDK’s main interfaces, such as base, camera, instructions, modal, and others.

Example usage:

const customizerProps = {
  version: '1.0',
  theme: Theme,
  face_recognition: FaceRecognition,
  document_recognition: DocumentRecognition,
  document_upload: DocumentUpload,
  embedded: FortfaceEmbedded,
};

fortfaceSdk.setCustomizer(customizerProps);

Each property represents a specific part of the interfaces mentioned above, so you can adapt styles, text, or behavior to your product.

Note

All specific items such as icons, images, font family, etc., must be imported into your app’s Assets folder.

Besides interface customization, you can run the SDK in modal or fullscreen mode. The SDK uses fullscreen by default on all supported devices.

Examples

Fullscreen mode (portrait and landscape) — default

To configure these modes, change the following attributes:

JavaScript

FortfaceSDKCustomizer.theme.appearance.modal.enabled: boolean (default: False)

2 - Enable fullscreen mode

FortfaceSDKCustomizer.theme.appearance.modal.minScreenWidth: number (default: 1024)

3 - Background

FortfaceSDKCustomizer.theme.appearance.modal.overlayColor: string (default: '#000000')
FortfaceSDKCustomizer.theme.appearance.modal.overlayOpacity: number (default: 0.4)

Customization​

Deprecated version​

Default theme​

Theme​

Instruction screen​

1 - Screen​

2 - Back button (X)​

3 - Text (title and items)​

4 - Icons​

5 - Continue button​

6 - Screen background​

Camera screen - Biometric capture​

1 - Timeout​

2 - Back button (X)​

3 - Feedback messages​

4 - Status​

5-Message frames​

6 - Success status loading​

7 - Screen background​

8 - Footer logo​

9 - Modal mode​

10 - Luminosity icon​

Ready state​

1 - Timeout​

2 - Messages while waiting for the camera to open​

3 - Camera switch button​

4 - Camera selector component​

Camera screen - Document capture​

1 - Maximum timeout​

2 - Back button (X)​

3 - Text​

4 - Capture button​

5 - Confirmation buttons​

Document upload​

Bottom sheet​

1 - Title​

2 - Buttons​

Confirmation screen​

3 - Cancel button (X)​

4 - Text​

5 - Confirmation and retry buttons​

How it works?​

Understanding the code snippet​

Note​

Modal or fullscreen mode​

Examples​

Modal mode (portrait and landscape)​

Fullscreen mode (portrait and landscape) — default​

1 - Enable modal mode​

2 - Enable fullscreen mode​

3 - Background​

Customization

Deprecated version

Default theme

Theme

Instruction screen

1 - Screen

2 - Back button (X)

3 - Text (title and items)

4 - Icons

5 - Continue button

6 - Screen background

Camera screen - Biometric capture

1 - Timeout

2 - Back button (X)

3 - Feedback messages

4 - Status

5-Message frames

6 - Success status loading

7 - Screen background

8 - Footer logo

9 - Modal mode

10 - Luminosity icon

Ready state

1 - Timeout

2 - Messages while waiting for the camera to open

3 - Camera switch button

4 - Camera selector component

Camera screen - Document capture

1 - Maximum timeout

2 - Back button (X)

3 - Text

4 - Capture button

5 - Confirmation buttons

Document upload

Bottom sheet

1 - Title

2 - Buttons

Confirmation screen

3 - Cancel button (X)

4 - Text

5 - Confirmation and retry buttons

How it works?

Understanding the code snippet

Note

Modal or fullscreen mode

Examples

Modal mode (portrait and landscape)

Fullscreen mode (portrait and landscape) — default

1 - Enable modal mode

2 - Enable fullscreen mode

3 - Background