Customization

Workflow Configs

Customise the liveness detection behaviour by adjusting parameters like retry attempts and detection timeouts. This allows you to tailor the liveness verification process to better fit your specific use case.

Parameter

Type

Required

Description

skipTutorialScreen

boolean

Skips the tutorial screen if set to true.

skipSelfieReviewScreen

boolean

Skips the selfie review screen if set to true.

cameraFrameShape

FRAME_SHAPE

Shape of the camera frame overlay. Possible values:"OVAL", "CIRCLE", "SQUARE" & "RECTANGLE" . Defaults to "OVAL"

maxRetryAttempts

number

Maximum number of retry attempts for BE API call , allowed during liveness detection. Default is 3.

detectionTimeOut

number

Timeout in milliseconds for face detection. Default is 90000 milliseconds.

detectionTimeOutCountdownDuration

number

Timeout in milliseconds for face detection countdown. If you pass 30000 countdown will be shown for last 30 seconds . Default is for last 20000 ms (20 seconds)

hideDetectionTimeOutCountdownAlert

boolean

pass this true if countdown alert needs to be hidden . Default is false. (Supported from v1.1.0)

skipDarkLightingScreenFlash

boolean

pass this true if you do not want the screen to flash white when dark area is detected. (Supported from v1.1.0)

hideStaticHeadShape

boolean

pass this true if you want to hide the static head shape inside the frame during selfie capture. (Supported from v1.1.0)

hideDescriptions

object

{ tutorial: false, cameraAccess: true, camera: true, selfieReview: false, }

If any of these not passed, by default description will be shown in all screens. Pass true to hide page description from the screen.

tutorial - Selfie capture tutorial screen cameraAccess - Camera access screen camera - Selfie capture screen selfieReview - Selfie review screen

hideErrorCodeOnSelfieReview

boolean

pass this true if you want to hide error code displayed on selfie review screen error section.

hideMaxRetryError

boolean

pass this true if you want to hide Maximum retry exhausted error alert on selfie review screen error section.

Refer to the Liveness Verification User Journey page for a detailed overview of the user journey and workflow. You can customise or skip specific screens which are non mandatory based on the configuration provided above.

Locale Configs

Customise specific parts of the liveness workflow to support different languages, ensuring a seamless user experience. Currently, the SDK supports English (EN) and Indonesian (ID).

Section

Parameters

Description

sessionId

string

Custom label for the session ID.

tutorial

LocaleTutorial

Localization for tutorial screen texts. Deprecated from v1.1.0

livenessTutorial

LocaleTutorial

Localization for tutorial screen texts. Supported from v1.1.0

camera

LocaleCamera

Localization for camera instructions and errors.

selfieReview

LocaleSelfiereview

Localization for the selfie review screen.

Tutorial Screen

Tutorial Screen - LocaleTutorial

The LocaleTutorial parameter allows you to customize the tutorial screen of the liveness workflow. You can modify the instructions, text, and visuals to match the localized language and cultural context of the user.

Parameter

Type

Required

Description

title

string

The title displayed at the top of the tutorial screen.

description

string

A brief description or introduction displayed on the tutorial screen, explaining what the user needs to do.

instructions

object

A set of detailed instructions guiding the user on how to position themselves for successful detection.

instructions.faceCamera

string

Instruction to face the camera directly. Deprecated from v1.1.0

instructions.faceClear

string

Instruction to ensure the face is clear and unobstructed. Deprecated from v1.1.0

instructions.singleFace

string

Instruction to ensure only one face is visible in the frame. Deprecated from v1.1.0

instructions.avoidDark

string

Instruction to avoid dark environments or ensure sufficient lighting. Deprecated from v1.1.0

instructions.holdPhoneSteady

string

Instruction to hold the device steadily. Supported from v1.1.0

instructions.avoidBrightPlace

string

Instruction to avoid dark environments or ensure sufficient lighting. Supported from v1.1.0 & applicable for color flash

instructions.avoidGlasses

string

Instruction to avoid wearing the glasses. Supported from v1.1.0 & applicable for color flash

actionButton

string

Label for the button to proceed to the next step after reading the tutorial.

Camera Permission Screen

Camera Screen

Camera Screen - LocaleCamera

The camera object allows customization of the camera-related UI and messages shown during the liveness detection process.

Parameter

Type

Required

Description

permission

object

Customizes the text displayed when the SDK requests camera permissions from the user.

permission.title

string

Title text for the camera permission prompt.

permission.description

string

Description text explaining why camera access is needed.

permission.actionButton

string

Label for the button to grant camera permissions.

error

object

Customizes the text displayed when a camera error occurs.

error.title

string

Title text for the camera error screen.

error.description

string

Description text explaining the error.

error.actionButton

string

Label for the button to retry camera access or fix the error.

title

string

Title text for the selfie capture screen.

description

string

Description text explaining camera capture

helpText

string

Label for the help text below camera view.

noFaceDetected

string

Message shown when no face is detected in the camera frame.

faceDetected

string

Message shown when a face is detected in the camera frame.

placeFaceinFrame

string

Instruction to the user to position their face within the camera frame.

multipleFaceDetected

string

Message shown when multiple faces are detected in the frame.

faceTooFar

string

Message shown when the user's face is too far from the camera.

faceNotStraight

string

Message shown when the user's face is not aligned properly.

faceToodark

string

Message shown when the user's face is in a dark environment.

faceTooBright

string

Message shown when the user's face is in a brightly lit environment, causing overexposure.

eyesClosed

string

Message shown when the user's eyes are closed, preventing accurate detection.

Selfie Review Screen

Selfie Review Screen - LocaleSelfiereview

The LocaleSelfiereview parameter enables customization of the selfie review screen within the liveness workflow.

Parameter

Type

Required

Description

title

string

The title displayed at the top of the selfie review screen.

description

string

The description text explaining the purpose of the selfie review screen.

primaryActionButton

string

Label for the primary action button, typically used to confirm the selfie.

secondaryActionButton

string

Label for the secondary action button, typically used to retake the selfie.

backendError_1041

string

Message displayed when an internal backend error occurs with error code 1041.

backendError_1051

string

Message displayed when an internal backend error occurs with error code 1051.

backendError_1052

string

Message displayed when an internal backend error occurs with error code 1052.

backendError_1053

string

Message displayed when an internal backend error occurs with error code 1053.

backendError_1054

string

Message displayed when an internal backend error occurs with error code 1054.

backendError_1055

string

Message displayed when an internal backend error occurs with error code 1055.

backendError_1058

string

Message displayed when an internal backend error occurs with error code 1058.

backendError_1059

string

Message displayed when an internal backend error occurs with error code 1059.

backendError_1060

string

Message displayed when an internal backend error occurs with error code 1060.

backendError_1062

string

Message displayed when an internal backend error occurs with error code 1062.

backendError_1063

string

Message displayed when an internal backend error occurs with error code 1063.

backendError_1064

string

Message displayed when an internal backend error occurs with error code 1064.

backendError_1074

string

Message displayed when an internal backend error occurs with error code 1074.

backendError_1065

string

Message displayed when an internal backend error occurs with error code 1065.

backendError_1075

string

Message displayed when an internal backend error occurs with error code 1075.

backendError_1066

string

Message displayed when an internal backend error occurs with error code 1066.

backendError_1076

string

Message displayed when an internal backend error occurs with error code 1076.

English - Default Locale Strings

{
  "sessionId": "Session ID",
  "tutorial": {
    "title": "Liveness Verification",
    "description": "Make sure you carefully read each instruction",
    "instructions": {
      "faceCamera": "Face the camera and follow the instructions",
      "faceClear": "Ensure your face is clear and uncovered",
      "singleFace": "Make sure no one else is visible in the frame",
      "avoidDark": "Avoid being in a dark room"
    },
    "actionButton": "Start Verification"
  },
  "camera": {
    "permission": {
      "title": "Allow Camera Access",
      "description": "To continue, please enable camera access. We cannot verify your identity without using your camera.",
      "actionButton": "Allow"
    },
    "error": {
      "title": "The camera is either not supported or the access is denied.",
      "description": "If you denied camera access by mistake, follow these steps: 1. Open your browser settings. 2. Under Privacy and Security, select Site Settings. 3. Under Permissions, choose Camera and toggle the button to enable access. 4. Once done, click 'Retry' below.",
      "actionButton": "Retry"
    },
    "title": "Capture Your Selfie",
    "description": "Follow the instructions provided and ensure your face is clearly visible",
    "noFaceDetected": "Unable to detect the face",
    "faceDetected": "Stay still to capture a clear photo",
    "placeFaceinFrame": "Place your face in the frame",
    "multipleFaceDetected": "Ensure no additional faces are visible in the frame",
    "faceTooFar": "Bring your face closer",
    "faceNotStraight": "Keep your face straight",
    "faceToodark": "Face area too dark",
    "faceTooBright": "Face area too bright",
    "eyesClosed": "Make sure your eyes are open and visible"
  },
  "selfieReview": {
    "title": "Review Photo",
    "description": "Ensure the image is well-lit, clear, and that all features are visible",
    "primaryActionButton": "Submit Photo",
    "secondaryActionButton": "Retake Selfie",
    "backendError_1041": "Liveness verification failed",
    "backendError_1051": "Clear obstruction from the face",
    "backendError_1052": "Bring your face closer",
    "backendError_1053": "Please ensure the lighting is sufficient and the photo is clear",
    "backendError_1054": "Ensure no additional faces are visible in the frame",
    "backendError_1055": "Unable to detect the face",
    "backendError_1058": "Please ensure the lighting is sufficient and the photo is clear",
    "backendError_1059": "The selfie is blurry, hold your phone steady",
    "backendError_1060": "Keep your face straight",
    "backendError_1062": "Please ensure to open your eyes"
}

Indonesian (Bahasa) - Default Locale Strings

{
  "sessionId": "ID Sesi",
  "tutorial": {
    "title": "Verifikasi Keaktifan",
    "description": "Pastikan Anda membaca setiap instruksi yang diberikan",
    "instructions": {
      "faceCamera": "Hadapkan wajah Anda ke kamera dan ikuti instruksinya",
      "faceClear": "Pastikan wajah Anda terlihat jelas dan tidak tertutupi",
      "singleFace": "Pastikan tidak ada orang lain dalam frame",
      "avoidDark": "Hindari berada di ruangan yang gelap"
    },
    "actionButton": "Mulai Verifikasi"
  },
  "camera": {
    "permission": {
      "title": "Izinkan akses kamera",
      "description": "Untuk melanjutkan, Anda perlu mengizinkan akses kamera. Kami tidak dapat memverifikasi Anda tanpa menggunakan kamera.",
      "actionButton": "Izinkan"
    },
    "error": {
      "title": "Kamera tidak didukung atau akses ditolak.",
      "description": "Jika Anda tidak sengaja menolak akses kamera, ikuti langkah-langkah berikut: 1. Buka Pengaturan Browser Anda. 2. Di bawah Privasi dan Keamanan, pilih Setelan Situs. 3. Di bagian Izin, pilih Kamera dan ketuk tombolnya untuk memberikan akses. 4. Setelah selesai, ketuk 'Coba Lagi' pada bagian bawah.",
      "actionButton": "Coba kembali"
    },
    "title": "Ambil Swafoto",
    "description": "Ikuti petunjuk yang diberikan dan pastikan wajah Anda terlihat jelas",
    "noFaceDetected": "Gagal mendeteksi wajah",
    "faceDetected": "Tetap diam agar foto tampak jelas",
    "placeFaceinFrame": "Pastikan wajah di dalam bingkai",
    "multipleFaceDetected": "Pastikan hanya satu wajah di layar",
    "faceTooFar": "Dekatkan wajah ke bingkai",
    "faceNotStraight": "Pastikan wajah menghadap kamera",
    "faceToodark": "Area wajah terlalu gelap",
    "faceTooBright": "Area wajah terlalu terang",
    "eyesClosed": "Pastikan mata tidak tertutup"
  },
  "selfieReview": {
    "title": "Tinjau Foto",
    "description": "Pastikan pencahayaan foto baik dan tampak jelas",
    "primaryActionButton": "Kirim Foto",
    "secondaryActionButton": "Ulangi Selfie",
    "backendError_1041": "Verifikasi liveness gagal",
    "backendError_1051": "Singkirkan penghalang dari wajah",
    "backendError_1052": "Dekatkan wajah ke bingkai",
    "backendError_1053": "Pastikan pencahayaan cukup agar foto terlihat jelas",
    "backendError_1054": "Pastikan hanya satu wajah di layar",
    "backendError_1055": "Tidak dapat mendeteksi wajah",
    "backendError_1058": "Pastikan pencahayaan cukup agar foto terlihat jelas",
    "backendError_1059": "Swafoto buram, pastikan perangkat stabil",
    "backendError_1060": "Pastikan wajah menghadap kamera",
    "backendError_1062": "Pastikan mata tidak tertutup",
    "backendError_1063": "Pastikan pencahayaan cukup agar foto terlihat jelas",
    "backendError_1064": "Swafoto terlalu gelap, pastikan pencahayaannya cukup agar foto terlihat jelas",
    "backendError_1074": "Swafoto terlalu gelap, pastikan pencahayaannya cukup agar foto terlihat jelas",
    "backendError_1065": "Swafoto terlalu terang, atur pencahayaan agar foto terlihat jelas",
    "backendError_1075": "Swafoto terlalu terang, atur pencahayaan agar foto terlihat jelas",
    "backendError_1066": "Swafoto buram, pastikan perangkat stabil",
    "backendError_1076": "Swafoto buram, pastikan perangkat stabil"
  }
}

Theme configs

The themeConfigs object customizes the appearance of the SDK’s user interface (UI), allowing you to align it with your brand’s design guidelines. Below is a detailed breakdown of each parameter

Here’s the detailed table for the parameters:

Parameter

Type

Required

Description

primaryButtonBgColor

string

Background color of the primary action buttons.

primaryButtonBorderColor

string

Border color of the primary action buttons.

primaryButtonHoverBgColor

string

Background color of the primary buttons when hovered over.

primaryButtonTextColor

string

Text color of the primary action buttons.

primaryButtonHoverTextColor

string

Text color of the primary buttons when hovered over.

primaryButtonBorderRadius

string

Border radius of the primary action buttons. Accepts CSS values (e.g., 5px, 50% for rounded buttons).

secondaryButtonBgColor

string

Background color of the secondary action buttons.

secondaryButtonBorderColor

string

Border color of the secondary action buttons.

secondaryButtonHoverBgColor

string

Background color of the secondary buttons when hovered over.

secondaryButtonTextColor

string

Text color of the secondary action buttons.

secondaryButtonHoverTextColor

string

Text color of the secondary buttons when hovered over.

secondaryButtonBorderRadius

string

Border radius of the secondary action buttons.

titleTextColor

string

Color of the text used in titles across the SDK.

titleTextFontSize

string

Font size of the text used in titles. Accepts CSS values (e.g., 16px, 1em).

descriptionTextColor

string

Color of the text used in descriptions.

descriptionFontSize

string

Font size of the text used in descriptions.

bodyTextColor

string

Color of the text used in the main body content.

bodyTextFontSize

string

Font size of the text used in the main body content.

fontFamily

string

Font family for all text in the SDK (e.g., "Arial, sans-serif").

fontFamilyUrl

string

URL of the font to be loaded (useful for custom web fonts).

instructionIconColor

string

Color of the icons used for instructions on tutorial screens.

loadingSpinnerColor

string

Color of the loading spinner animation.

cameraFrameBorderInitialColor

string

Initial border color of the camera frame overlay.

cameraFrameBorderAnimationColor

string

Border color of the camera frame overlay during animations (e.g., scanning).

cameraFrameOverlayColor

string

Color of the semi-transparent overlay around the camera frame.

cameraInstructionTextColor

string

Text color of the instructions provided in the camera stream.

cameraInstructionBgColor

string

Background color of the instructions provided in the camera stream.

cameraInstructionFontSize

string

Text font size of the instructions provided in the camera stream.

errorAlertBgColor

string

Background color of the error alerts displayed in the SDK flow.

errorAlertTextColor

string

Text color of the error alerts displayed in the SDK flow.

backButtonColor

string

Color of the back button in the SDK screens.

modalCloseButtonColor

string

Color of the close button in modal dialogs.

errorAlertTextFontSize

string

Font size of the error messages displayed in the SDK.

sessionIdFontSize

string

Font size of the session ID text.

backgroundColor

string

Background color for the entire SDK interface.

For all color-related parameters in the themeConfigs, you can use any valid CSS color format, including:

Hexadecimal: #007bff, #ffffff, etc.
RGB: rgb(0, 123, 255), rgb(255, 255, 255), etc.
Named Colors: red, blue, green, etc.

An example theme config

{
  "themeConfigs": {
    "primaryButtonBgColor": "#007bff",
    "primaryButtonBorderColor": "#0056b3",
    "primaryButtonHoverBgColor": "#0056b3",
    "primaryButtonTextColor": "#ffffff",
    "primaryButtonHoverTextColor": "#e0e0e0",
    "primaryButtonBorderRadius": "5px",
    "secondaryButtonBgColor": "#f8f9fa",
    "secondaryButtonBorderColor": "#ced4da",
    "secondaryButtonHoverBgColor": "#e9ecef",
    "secondaryButtonTextColor": "#495057",
    "secondaryButtonHoverTextColor": "#212529",
    "secondaryButtonBorderRadius": "5px",
    "titleTextColor": "#343a40",
    "titleTextFontSize": "18px",
    "descriptionTextColor": "#6c757d",
    "descriptionFontSize": "14px",
    "bodyTextColor": "#212529",
    "bodyTextFontSize": "14px",
    "fontFamily": "'Roboto', sans-serif",
    "fontFamilyUrl": "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap",
    "instructionIconColor": "#007bff",
    "loadingSpinnerColor": "#007bff",
    "cameraFrameBorderInitialColor": "#28a745",
    "cameraFrameBorderAnimationColor": "#dc3545",
    "cameraFrameOverlayColor": "rgba(0, 0, 0, 0.5)",
    "cameraErrorAlertBgColor": "#ffc107",
    "cameraErrorAlertTextColor": "#212529",
    "backButtonColor": "#007bff",
    "modalCloseButtonColor": "#6c757d",
    "errorAlertTextColor": "red",
    "errorAlertTextFontSize": "14px",
    "backgroundColor": "white"
  }
}

PreviousAsset Preloading

NextConfiguration Options

Last updated 4 months ago