Customize UI for WebSDK

In different mobile applications, there are different design styles, such as Title Bar style, Button style. To better adapt to the style of your application, ZOLOZ supports simple UI customization in terms of the color and full text of the WebSDK.

About the task

This task demonstrates how to customize the UI of the ZOLOZ products that are applied in the WebSDK mode.

Procedure

1. Select the UI json file for specific product

1)  Realid

copy
{
    "titleBackgroundColor":"#0064FF",
    "titleTextColor":"#FFFFFF",
    "titleText":{
       "zdocTitle":"Take ID Photo",
       "zfaceTitle":"Face Verification"
    },
    "docSubtitleTextColor":"#FFFFFF",
    "subTitleText":{
       "zdocScanTipsDetail":"Hold your card within the frame untill all 4 edges turn blue.",
       "zdocPassportHalfFrameTips1":"Page with your information",
       "zdocStandardFrameTips1":"Front of ID",
       "zdocStandardFrameTips2":"Back of ID",
       "zdocChineseIdTips1":"Front of ID",
       "zdocChineseIdTips2":"Back of ID"
    },
    "faceToptipColor":"#000000", 
    "instructionTextColor":"#000000",
    "buttonColor":"#0064FF",
    "instructionText":{
       "zdocSubmit":"Submit",
       "zdocRetry":"Retake",
       "zdocScan":"Scanning...",
       "zdocProcessing":"Processing...",
       "zdocSuccess":"Processing...",
       "zdocCapture":"Place your ID within the frame and take a picture.",
       "zdocConfirm":"Make sure your ID is fully visible, glare free and not blurred.",
       "zfaceNoFace":"No Face Detected",
       "zfaceNotInCenter":"No Face Detected",
       "zfaceBadPitch":"No Face Detected",
       "zfaceBadYaw":"No Face Detected",
       "zfaceBadQuality":"No Face Detected",
       "zfaceDistanceTooFar":"Move Closer",
       "zfaceDistanceTooClose":"Move Further",
       "zfaceBadBrightness":"Face Too Dark",
       "zfaceBadEyeOpenness":"Open Your Eyes",
       "zfaceBlinkOpenness":"Blink",
       "zfaceStackTime":"Stay Still",
       "zfaceIsBlur":"Image Unclear",
       "zfaceIsMoving":"Image Unclear",
       "zfaceProcessing":"Processing..."
    },
    "alertTitleTextColor":"#000000",
    "alertContextTextColor":"#4A4A4A",
    "alertChoicesTextColor":"#0064FF",
    "alertText":{
       "systemErrorTitle":"System error",
       "systemErrorMsg":"Sorry, system error. Please try again later.",
       "networkErrorTitle":"Internet connection failed",
       "networkErrorMsg":"Please check your internet connection and try again.",
       "zdocNofaceTitle":"ID not complete",
       "zdocNofaceMsg":"Please make sure the ID is fully visible, glare free and not blurred.",
       "zdocExposureTitle":"ID not complete",
       "zdocExposureMsg":"Please make sure the ID is fully visible, glare free and not blurred.",
       "zdocBlurTitle":"ID not complete",
       "zdocBlurMsg":"Please make sure the ID is fully visible, glare free and not blurred.",
       "zdocImperfectTitle":"ID not complete",
       "zdocImperfectMsg":"Please make sure the ID is fully visible, glare free and not blurred.",
       "zdocWrongDocumentTitle":"Incorrect ID type detected",
       "zdocWrongDocumentMsg":"Make sure you are using the required type of ID.",
       "zdocUnknowTitle":"No ID detected",
       "zdocUnknowMsg":"Make sure you are using the required type of ID.",
       "zdocTimeOutTitle":"Operation time out",
       "zdocTimeOutMsg":"Please make sure your ID is clear and non-reflective",
       "zdocNoDocumentTitle":"No ID detected",
       "zdocNoDocumentMsg":"Make sure you are using the required type of ID.",
       "zfaceScanFailTitle":"Face verification failed",
       "zfaceScanFailMsg":"Face straight at the phone and ensure your face is light and clear.",
       "zfaceTimeOutTitle":"Operation time out",
       "zfaceTimeOutMsg":"Please face straight at the camera, making it easier to succeed.",
       "cameraPermissionTitle":"Failed to access the camera",
       "cameraPermissionMsg":"",
       "alertGotIt":"Got it",
       "alertRetry":"Retry",
       "alertExit":"Quit",
       "retryMaxTitle":"Too many attempts",
       "retryMaxMsg":"You have reached the maximum number of attempts. Please try again later.",
       "unsupportDeviceTitle":"Browser or device is not supported",
       "unsupportDeviceMsg":"The browser or device is not supported, please change the browser or device."
    },
    "docHintText":{
       "zdocHintX":"Tilt upwards by 30°",
       "zdocHintY":"Tilt to the left by 30°"
    }
 }

2)  ID recognition

copy
{
    "titleText": "Verify Identity",
    "subtitleText": {
        "scanTip": "Hold your card within the frame untill all 4 edges turn blue.",
        "topTipPageOnePassport": "Page with your information",
        "topTipPageTwoPassport": "Page with signature",
        "topTipPageOneID": "Front of ID",
        "topTipPageTwoID": "Back of ID"
    },
    "titleBackgroundColor": "#0064FF",
    "titleTextColor": "#FFFFFF",
    "subtitleTextColor": "#FFFFFF",
    "instructionText": {
        "scanStateText": "Scanning",
        "captureStateText": "Place your ID within the frame and take a picture",
        "confirmStateText": "Make sure the picture has no glare and not blurry",
        "processStateText": "Processing....",
        "successStateText": "Submit completed",
        "retakeText": "Retake",
        "submitText": "Submit"
    },
    "instructionTextColor": "#000000",
    "docHintText": {
        "docHintTiltLeftText": "Tilt to the left by 30°",
        "docHintTiltUpText": "Tilt upwards by 30°",
        "docHintConfirmText": "Got it"
    },
    "buttonColor": "#0064FF",
    "alertText": {
        "systemErrorTitle": "System Error",
        "systemErrorText": "Please try again later",
        "systemErrorChoice": "Got it",
        "retryLimitErrorTitle": "Attempt limit reached",
        "retryLimitErrorText": "You have reached the maximum number of attempts. Please try again later",
        "retryLimitErrorChoice": "Got it",
        "networkErrorTitle": "No Internet Connection",
        "networkErrorText": "Please check your internet connection and try again",
        "networkErrorChoiceConfirm": "Retry",
        "networkErrorChoiceCancel": "Close",
        "retryErrorNoDocumentTitle": "Document not detected",
        "retryErrorNoDocumentText": "Please make sure you are using the required type of document",
        "retryErrorWrongDocumentTitle": "Document not detected",
        "retryErrorWrongDocumentText": "Please make sure you are using the required type of document",     
        "retryErrorImperfectTitle": "ID incomplete",
        "retryErrorImperfectText": "Please make sure the ID is fully visible and not blocked", 
        "retryErrorBlurTitle": "Document not clear",
        "retryErrorBlurText": "Please make sure the document is fully visible, glare free and not blurred",    
        "retryErrorExposureTitle": "Document over exposed",
        "retryErrorExposureText": "Please make sure the document is fully visible, glare free and not blurred", 
        "retryErrorNoFaceTitle": "Document not clear",  
        "retryErrorNoFaceText": "Please make sure the document is fully visible, glare free and not blurred", 
        "retryErrorExpireTitle": "Document expired",  
        "retryErrorExpireText": "Please make sure the document is not expired",     
        "retryErrorNoSigTitle": "Signature missing",    
        "retryErrorNoSigText": "Please make sure there is signature on the document",   
        "retryErrorDefaultTitle": "Document not clear",   
        "retryErrorDefaultText": "Please make sure the document is fully visible, glare free and not blurred",
        "retryErrorConfirm": "Retry",
        "retryErrorCancel": "Close",
        "cameraAccessErrorTitle": "Failed to access the camera",
        "cameraAccessErrorTextNotAllowed": "Please allow access to the camera and try again",
        "cameraAccessErrorTextUnsupportedCamera": "The camera is not supported",
        "cameraAccessErrorTextOther": "The browser is not supported",
        "cameraAccessButton": "Got it",
        "unsupportedDeviceTitle": "Browser or device is not supported",
        "unsupportedDeviceText": "The browser or device is not supported, please change the browser or device.",
        "unsupportedDeviceConfirm": "Got it"
    },
    "errorPageText": {
      "errorPageText": "Copy the following URL and open it in Safari (iOS) or Chrome (android) to continue the process.",
      "errorPageCopiedTitle": "Copied to the clipboard.",
      "errorPageCopiedText": "Paste the URL in Safari (iOS) or Chrome (android) to continue the process.",
      "errorPageClickText": "Click to copy"
    },
    "alertTitleTextColor":  "#000000",
    "alertContextTextColor":  "#4A4A4A",
    "alertChoicesTextColor": "#0064FF",
    "popWindowEdge": "rect"
}

3)  face capture

copy
{
    "titleBackgroudColor": "#0064FF",
    "titleTextColor": "#FFFFFF",
    "topTipColor": "#0064FF",
    "processBarStartColor": "#0064FF",
    "processBarEndColor": "#77B8F4",
    "processBarStrokeColor": "#D4E3FA",
    "scanTipsMoveFurther": "Move farther",
    "scanTipsMoveCloser": "Move closer",
    "scanTipsNoFace": "No face detected",
    "scanTipsNotClear": "Face is not clear",
    "scanTipsTooDark": "Too dark",
    "scanTipsOpenEyes": "Open your eyes",
    "scanTipsBlink": "Please blink",
    "scanTipsStayStill": "Stay still",
    "scanTipsBadPitch": "Please look at the center",
    "scanTipsMoveUp": "Look up slowly",
    "scanTipsMoveUpRight": "Look up right",
    "scanTipsMoveRight": "Turn head right",
    "scanTipsMoveRightDown": "Turn head down to the right",
    "scanTipsMoveDownLeft": "Turn head down left",
    "scanTipsMoveDown": "Bow your head slowly",
    "scanTipsMoveLeft": "Turn your head slowly to the left",
    "scanTipsMoveLeftUp": "Turn up left",
    "scanTipsMouthOpen": "Open mouth",
    "scanTipsActionSwitch": "The current action is complete",
    "scanTipsDefault": "No face detected",
    "scanSystemError": "System Error",
    "scanRetryMessage": "Please try again later",
    "scanRetryMessageConfirm": "Got it",
    "scanRetryLimit": "Attempt limit reached",
    "scanRetryLimitMessage": "You\\'ve reached the maximum number of attempts. Please try again later",
    "scanRetryLimitConfirm": "Got it",
    "scanRetryNoInternet": "No Internet Connection",
    "scanRetryNoInternetMessage": "Please check your internet connection and try again",
    "scanRetryConfirm": "Retry",
    "scanRetryClose": "Close",
    "scanFailTitle": "Face scan failed",
    "scanFailMessage": "Position your face within the frame and make sure you have enough light",
    "scanTimeoutTitle": "Time out",
    "scanTimeoutMessage": "Sorry, scan face is time out, please try it again",
    "scanTimeoutFailedToAccess": "Failed to access the camera",
    "scanTimeoutFailedToAccessConfirm": "Got it",
    "scanErrorPageCopied": "Copied to the clipboard.",
    "scanErrorPageTitleOne": "Paste the URL in Safari (iOS) or Chrome (android) to continue the process.",
    "scanErrorPageTitleTwo": "Copy the following URL and open it in Safari (iOS) or Chrome (android) to continue the process.",
    "scanErrorPageCopy": "Click to copy",
    "scanProcessing": "Processing...",
    "scanTitle": "Verify Face",
    "scanCameraError": "Please allow access to the camera and try again",
    "scanCameraNotSupported": "The camera is not supported",
    "scanBrowserNotSupported": "The browser is not supported"
}

2. Start the SDK with the JSON file

a. Edit and save the JSON file

Edit the JSON file, put it into some server and open the cors setting of the server to allow Zoloz front end to access the saved UI JSON file.

b. Redirect Zoloz WebSDK with the location of the saved JSON file

When starting the Zoloz WebSDK, append the location of the saved JSON file at the end of the WebSDK url, such as

copy
window.location.href = `${realidUrl}?clientcfg=${encodeURIComponent(clientCfg)}&langPack=${encodeURIComponent(customLangPackUrl)}`