Skip to main content

Customisations

Face Verify Web SDK Customisations
​

The behaviour of the Web SDK can be altered by setting the following options as attributes of the <sp-face> tag in the same way as the token.

Automatic Start Face Scan​

On the ready screen, there are instructions on how the user can position themselves. If you wish to automatically start the face scanning within 5 seconds, you're able to do so by setting the automatic_face_scan attribute in <sp-face> to true:

<sp-face token="***YOUR_TOKEN_HERE***" automatic_start_scan="true"></sp-face>

The default for this is false.

README

This is a new setting. In future releases, we will allow you to configure how fast the automatic face scanning stars.

Network Timeout​

Time in seconds for the backend to ack a message we send. In the event of the timeout being exceeded, the error event will fire with the feedback code error_network.

The minimum, default value is 10 seconds. To set the timeout to 15 seconds you would pass the following option:

<sp-face token="***YOUR_TOKEN_HERE***" network_timeout="15"></sp-face>

Setting this option lower than the defaults may increase error rates, so please be mindful when changing this.

Base URL​

You can change the backend server you are attempting to authenticate against by passing the base_url property. Reverse proxies are supported and a custom path to the WebSocket endpoint can be used, for example: https://custom.domain.com/custom-path/socket.io/v2/

<sp-face token="***YOUR_TOKEN_HERE***" base_url="https://bio-stream.singpass.gov.sg"></sp-face>

Close Button​

SVG is recommended.

You can set a custom close button by setting a valid URI as below:

<sp-face
  token="***YOUR_TOKEN_HERE***"
  close_button="https://www.materialui.co/materialIcons/navigation/close_black_72x72.png"
></sp-face>

Colours​

You can customise the look and feel of the main layout by changing the following options. You can pass a literal value red, RGB rgb(230, 245, 66) or a hex value #e6f542.

{
  header_background_color: "rgba(0, 0, 0, .68)", // Header area - usually grey, encloses title and close button
  header_text_color: "#fff", // Header text
  footer_background_color: "rgba(0, 0, 0, .68)", // Footer area
  footer_text_color: "#fff", // Footer text
  progress_bar_color: "#000", // GPA progress bar. Positioned above the footer and behind the text.
  loading_tint_color: "#5c5c5c", // The app is connecting to the server or no face found. Default: grey.
  not_ready_tint_color: "#f5a623", // Cannot start face verification until the user takes action (e.g. move closer, etc). Default: orange.
  ready_tint_color: "#01bf46", // Ready to start face verification. Default: green.
  oval_scanning_color: "#fff", // The colour of the oval while scanning in GPA.
  liveness_tint_color: "#1756e5", // Liveness tint colour. Default: blue.
  liveness_scanning_tint_color: "#5c5c5c", // Liveness is scanning. Default: lightGrey.
  liveness_overlay_stroke_color: null, // NEW: Overlay color in Liveness. Default: null.
  liveness_floating_prompt_background_color: null, // NEW: Floating prompt background color in Liveness. Default: null.
  gpa_not_ready_overlay_stroke_color: null, // NEW: Overlay color in GPA in not ready state. Default: null.
  gpa_ready_overlay_stroke_color: null, // NEW: Overlay color in GPA in ready state. Default: null.
  gpa_not_ready_floating_prompt_background_color: null, // NEW: Floating prompt background in GPA in not ready state. Default: null.
  gpa_ready_floating_prompt_background_color: null, // NEW: Floating prompt background in GPA in ready state. Default: null.
}

The example below changes the default grey no face to #4293f5 (blue), giving feedback like "Move Closer" to red rgb(245, 66, 66) and starting to purple.

<sp-face
  token="***YOUR_TOKEN_HERE***"
  loading_tint_color="#4293f5"
  not_ready_tint_color="rgb(245, 66, 66)"
  ready_tint_color="purple"
></sp-face>

Filter​

This setting controls the filter for camera preview. Can be classic, shaded (additional detail, the default) or vibrant (full color).

<sp-face token="***YOUR_TOKEN_HERE***" filter="shaded"></sp-face>

Floating Prompt​

Whether the instructions prompt should "float" over the user's face in the centre of the screen (true) or be placed in the footer (false - default).

<sp-face token="***YOUR_TOKEN_HERE***" enable_floating_prompt="true"></sp-face>

Additionally, if you wish to have the floating prompt with squared-off corners, you can set the floating_prompt_rounded_corners to false like so (default: true):

<sp-face
  token="***YOUR_TOKEN_HERE***"
  enable_floating_prompt="true"
  floating_prompt_rounded_corners="false"
></sp-face>

Show Countdown​

By setting show_countdown to true, a countdown will be shown to the user before scanning actually starts. If this is set to false, when the users face becomes properly aligned the scanner will start in 2 seconds as long as the users face is still properly aligned. By default, show_countdown is false. The example below shows how to enable the countdown.

<sp-face token="***YOUR_TOKEN_HERE***" show_countdown="true"></sp-face>

Debug Logs​

Logs at level info or lower are hidden, but can be exposed to the console by setting debug to true. Warnings and errors will always be emitted to the console.

<sp-face token="***YOUR_TOKEN_HERE***" debug="true"></sp-face>

The checker itself accepts a logger argument which could be console, or any common logging library which you are free to configure to your own requirements.

Kiosk Mode​

When deploying Identiface on physically secured hardware such as laptops and desktop devices, you can enable the kiosk mode UI.

<sp-face token="***YOUR_TOKEN_HERE***" kiosk_mode="true"></sp-face>

ℹ️ Kiosk mode will only activate on tablets and desktops. It is automatically disabled on mobile devices.

Language & Localisation [Coming Soon]​

Next release item 🌎

We'll add this feature soon.

Legacy Web SDK Customisations​

Language​

README

Download the language file here with the value pair removed (leaving just the string keys).

You can refer to the following sample to have an inspiration on the text to localise the SDK strings to your preferred language:

{
  "language_file": "en-GB",
  "authenticate": "Authenticate",
  "client_error": "An unknown error occurred",
  "client_camera": "There was an error getting video from the camera",
  "enrol": "Enrol",
  "error": "Error",
  "error_asset_fetch": "Transaction setup problem",
  "error_asset_fetch_message": "We had a network problem setting up this transaction; please check your device connection and try again.",
  "error_camera": "There was a problem accessing your camera",
  "error_camera_message": "We encountered an unknown camera error. Please try closing other applications using the camera and try again.",
  "error_camera_in_use": "Your camera is already in use",
  "error_camera_in_use_message": "Please try closing other applications using the camera and try again.",
  "error_camera_not_supported": "The camera you are using isn't supported",
  "error_camera_not_supported_message": "We couldn't request a high enough quality video from your camera.",
  "error_camera_permission_denied": "Permission to access the camera has been denied",
  "error_camera_permission_denied_message": "Please allow camera access, then reload the page for the settings to take effect.",
  "error_device_motion_denied": "Device motion permission denied",
  "error_device_motion_denied_message": "Permission to access device motion has been denied. Please allow device motion access to use iProov. You may need to reload the page or reopen the tab.",
  "error_device_motion_unsupported": "Your device does not seem to fully report device motion",
  "error_device_motion_unsupported_message": "Some devices do not support device motion, please try using another device.",
  "error_fullscreen_change": "Cancelled",
  "error_fullscreen_change_message": "Exited full-screen without completing iProov, please try again.",
  "error_token_timeout": "Your session did not start in time",
  "error_token_timeout_message": "This normally happens if your session didn't start in time. Please try again.",
  "error_invalid_token": "Your token is invalid",
  "error_invalid_token_message": "This usually happens when your iProov configuration isn't correct. Please check and try again.",
  "error_network": "Network error",
  "error_network_message": "We couldn't stream your video fast enough; please check your device's connection and try again.",
  "error_no_camera": "We couldn't find a camera connected to your device",
  "error_no_camera_message": "A camera must be available to use iProov.",
  "error_no_face_found": "No face could be found",
  "error_no_face_found_message": "Please ensure your camera is front facing and is not covered or blocked.",
  "error_not_supported": "Unsupported",
  "error_not_supported_message": "We can't access your device's sensors to iProov you. Please check your device and settings before trying again.",
  "error_server": "Server error",
  "error_server_message": "Sorry, but there was an error with the service. Please try again.",
  "error_too_many_requests": "Please try again later",
  "error_too_many_requests_message": "Sorry, this service is exceptionally busy right now; please try again later.",
  "failed": "Failed",
  "failure_ambiguous_outcome": "Ambiguous outcome",
  "failure_lighting_backlit": "Strong light source detected behind you",
  "failure_lighting_face_too_bright": "Too much light detected on your face",
  "failure_lighting_flash_reflection_too_low": "Ambient light too strong or screen brightness too low",
  "failure_lighting_too_dark": "Your environment appears too dark",
  "failure_motion_too_much_mouth_movement": "Please do not talk while iProoving",
  "failure_motion_too_much_movement": "Please do not move while iProoving",
  "failure_network_problem": "Sorry, network problem",
  "failure_user_timeout": "Your session has expired",
  "iproov_ready_title": "Ready to iProov",
  "iproov_ready_button": "Scan face",
  "iproov_success": "You have iProoved successfully",
  "label_camera_selector": "Choose camera:",
  "iframe_bridge_title": "Ready to iProov",
  "iframe_bridge_button": "Begin in new window",
  "message_format": "%@ to %@",
  "message_format_with_username": "%@ as %@ to %@",
  "passed": "Passed",
  "progress_assessing_genuine_presence": "Assessing genuine presence…",
  "progress_assessing_liveness": "Assessing liveness...",
  "progress_confirming_identity": "Confirming identity…",
  "progress_creating_identity": "Creating identity…",
  "progress_finding_face": "Finding face…",
  "progress_identifying_face": "Identifying face…",
  "progress_loading": "Loading…",
  "progress_streaming": "Streaming…",
  "prompt_connecting": "Connecting…",
  "prompt_get_ready": "Get ready…",
  "prompt_grant_permission": "Grant Camera Access",
  "prompt_grant_permission_message": "Camera access must be granted to use iProov.",
  "prompt_genuine_presence_align_face": "Put your face in the oval",
  "prompt_kiosk_align_face": "Put your face in the oval",
  "prompt_kiosk_keep_still": "Keep still",
  "prompt_liveness_align_face": "Fill the oval with your face",
  "prompt_liveness_no_target": "Put your face in the frame",
  "prompt_liveness_scan_completed": "Scan completed",
  "prompt_loading": "Please wait…",
  "prompt_rotate_portrait": "Please rotate your device to portrait",
  "prompt_scanning": "Scanning…",
  "prompt_too_close": "Too close",
  "prompt_too_far": "Move closer",
  "prompt_too_high": "Move down",
  "prompt_too_left": "Move right",
  "prompt_too_low": "Move up",
  "prompt_too_right": "Move left",
  "prompt_increase_screen_brightness": "Increase screen brightness",
  "prompt_poor_lighting_conditions": "Move away from bright light",
  "sdk_unsupported": "The SDK has passed end of life and is no longer supported"
}

Custom Title​

You can customise your own title which would appear on the top during the face capturing process. A default IProov-generated message will be shown if there is no title specify.

To configure the title, set the custom_title option:

<sp-face token="***YOUR_TOKEN_HERE***" custom_title="Your Custom Title"></sp-face>

Show Countdown​

Countdown Screen

You can configure the SDK to display a countdown before face scanning begins, to pre-empt your user to prepare for the face scanning process.

To enable this, set the show_countdown option to true.

<sp-face token="***YOUR_TOKEN_HERE***" show_countdown="Your Custom Title"></sp-face>