Web SDK - Mobile UI custom configuration instructions - ID Verification

Web SDK - Mobile supports UI style customization. You can customize colors, icons, and frame styles on the guide page, document capture page, OCR result editing page, and liveness detection page.

Important

UI customization for the Web SDK - Mobile is available only in the mobile integration mode. For PC customization, see Web SDK - PC UI Custom Configuration Instructions.

Configuration method

Pass a JSON string with your custom styles to the StyleConfig field of the server-side Initialize method.

Configuration rules and recommendations:

Default inheritance: If a configuration item or its style property is not specified, the system uses the default value.
Incremental configuration: To reduce the request body size, pass only the configuration items that you need to modify. Unspecified items use their default values.

Note

The JSON string must not contain regular expression special characters.

Guide page (`guidePage`)

The guide page is the first page users see, displaying the verification steps and instructions. This page is available only in the Web SDK flow.

Property	Type	Default	Description
`backgroundColor`	CSS color	`"white"`	Page background color
`btnBgColor`	CSS color	`"#fb5d01"`	Button background color
`btnTextColor`	CSS color	`"white"`	Button text color
`btnShadow`	CSS box-shadow	`"0 16px 32px 0 rgba(251, 115, 38, 0.3)"`	Button shadow
`circle1Img`	Image URL	`""`	Step 1 icon on the eKYC guide page (60 x 60 px)
`circle2Img`	Image URL	`""`	Step 2 icon on the eKYC guide page (60 x 60 px)
`leftBorderImg`	Image URL	`""`	Step connector bar on the left side of the eKYC guide page (6 x 414 px)
`faceImg`	Image URL	`""`	Facial recognition illustration (393 x 393 px)
`ocrImg`	Image URL	`""`	Document scan illustration (396 x 393 px)
`shelterFromImg`	Image URL	`""`	Occlusion avoidance illustration (210 x 210 px)
`lightImg`	Image URL	`""`	Sufficient lighting illustration (210 x 210 px)
`phoneImg`	Image URL	`""`	Phone positioning illustration (210 x 210 px)

Document capture page (`ocrPage`)

Users photograph their identity documents (ID cards, passports, and similar documents) on this page. You can customize the background, overlay, viewfinder frame, and icons.

Property	Type	Default	Description
`ocrBgColor`	CSS rgba	`"rgba(2, 2, 2, 0.8)"`	Page background color and opacity
`tipColor`	CSS color	`"white"`	Text color over the overlay
`maskColor`	CSS rgba	`"rgba(2, 2, 2, 0.7)"`	Overlay color and opacity
`backIconImg`	Image URL	`""`	Exit icon (30 x 54 px)
`submitIconImg`	Image URL	`""`	Submit icon (240 x 240 px)
`ocrPhotoBorderImg`	Image URL	`""`	Document viewfinder frame (996 x 594 px). Replace this to adapt the frame to different shapes and colors of ID cards and passports.
`albumIconImg`	Image URL	`""`	Album icon (144 x 144 px)

OCR result editing page (`ocrResultPage`)

This page displays the extracted document data and allows users to review and correct the results.

Property	Type	Default	Description
`backgroundColor`	CSS color	`"white"`	Page background color
`topTipBgColor`	CSS color	`"white"`	Top tip background color
`topTipTextColor`	CSS color	`"black"`	Top tip text color
`ocrTextColor`	CSS color	`"#333333"`	OCR information text color
`inputBgColor`	CSS color	`"#f7f7f7"`	Input field background color
`btnBgColor`	CSS color	`"#fb5d01"`	Button background color
`btnTextColor`	CSS color	`"white"`	Button text color
`maskColor`	CSS rgba	`"rgba(2, 2, 2, 0.7)"`	Overlay color and opacity
`backIconImg`	Image URL	`""`	Exit icon (30 x 54 px)

Liveness detection page (`facePage`)

The liveness detection page guides users through the face verification process.

Property	Type	Default	Description
`backgroundColor`	CSS color	`"white"`	Page background color
`topTipColor`	CSS color	`"#333333"`	Title text color (for the instruction prompt, such as "Pick up your phone and blink")
`processBarColor`	Array of 3 CSS colors	`["#FFA500", "#FF8C00", "rgba(237,119,49,1)"]`	Progress bar colors around the viewfinder, from light to dark
`maskColor`	CSS rgba	`"rgba(0, 0, 0, 0.6)"`	Overlay color and opacity
`maskTipColor`	CSS color	`"white"`	Text color over the overlay
`backIconImg`	Image URL	`""`	Exit icon (30 x 54 px)

Image asset specifications

All image properties accept publicly accessible URLs. Your replacement images should match the dimensions listed below.

Property	Page	Dimensions (px)	Description
`circle1Img`	Guide	60 x 60	Step 1 icon
`circle2Img`	Guide	60 x 60	Step 2 icon
`leftBorderImg`	Guide	6 x 414	Step connector bar
`faceImg`	Guide	393 x 393	Facial recognition illustration
`ocrImg`	Guide	396 x 393	Document scan illustration
`shelterFromImg`	Guide	210 x 210	Occlusion avoidance illustration
`lightImg`	Guide	210 x 210	Sufficient lighting illustration
`phoneImg`	Guide	210 x 210	Phone positioning illustration
`ocrPhotoBorderImg`	Document capture	996 x 594	Document viewfinder frame
`albumIconImg`	Document capture	144 x 144	Album icon
`submitIconImg`	Document capture	240 x 240	Submit icon
`backIconImg`	Document capture, OCR result editing, Liveness detection	30 x 54	Exit icon

Configuration template

Copy the following template and modify only the properties you want to customize.

JavaScript

const styleConfig = {
  guidePage: {
    backgroundColor: "white",
    btnBgColor: "#fb5d01",
    btnTextColor: "white",
    btnShadow: "0 16px 32px 0 rgba(251, 115, 38, 0.3)",
    circle1Img: "",
    circle2Img: "",
    leftBorderImg: "",
    faceImg: "",
    ocrImg: "",
    shelterFromImg: "",
    lightImg: "",
    phoneImg: ""
  },
  ocrPage: {
    ocrBgColor: "rgba(2, 2, 2, 0.8)",
    tipColor: "white",
    maskColor: "rgba(2, 2, 2, 0.7)",
    backIconImg: "",
    submitIconImg: "",
    ocrPhotoBorderImg: "",
    albumIconImg: ""
  },
  ocrResultPage: {
    backgroundColor: "white",
    topTipBgColor: "white",
    topTipTextColor: "black",
    ocrTextColor: "#333333",
    inputBgColor: "#f7f7f7",
    btnBgColor: "#fb5d01",
    btnTextColor: "white",
    maskColor: "rgba(2, 2, 2, 0.7)",
    backIconImg: ""
  },
  facePage: {
    backgroundColor: "white",
    topTipColor: "#333333",
    processBarColor: ["#FFA500", "#FF8C00", "rgba(237,119,49,1)"],
    maskColor: "rgba(0, 0, 0, 0.6)",
    maskTipColor: "white",
    backIconImg: ""
  }
};

JSON

{
  "guidePage": {
    "backgroundColor": "white",
    "btnBgColor": "#fb5d01",
    "btnTextColor": "white",
    "btnShadow": "0 16px 32px 0 rgba(251, 115, 38, 0.3)",
    "circle1Img": "",
    "circle2Img": "",
    "leftBorderImg": "",
    "faceImg": "",
    "ocrImg": "",
    "shelterFromImg": "",
    "lightImg": "",
    "phoneImg": ""
  },
  "ocrPage": {
    "ocrBgColor": "rgba(2, 2, 2, 0.8)",
    "tipColor": "white",
    "maskColor": "rgba(2, 2, 2, 0.7)",
    "backIconImg": "",
    "submitIconImg": "",
    "ocrPhotoBorderImg": "",
    "albumIconImg": ""
  },
  "ocrResultPage": {
    "backgroundColor": "white",
    "topTipBgColor": "white",
    "topTipTextColor": "black",
    "ocrTextColor": "#333333",
    "inputBgColor": "#f7f7f7",
    "btnBgColor": "#fb5d01",
    "btnTextColor": "white",
    "maskColor": "rgba(2, 2, 2, 0.7)",
    "backIconImg": ""
  },
  "facePage": {
    "backgroundColor": "white",
    "topTipColor": "#333333",
    "processBarColor": [
      "#FFA500",
      "#FF8C00",
      "rgba(237,119,49,1)"
    ],
    "maskColor": "rgba(0, 0, 0, 0.6)",
    "maskTipColor": "white",
    "backIconImg": ""
  }
}

Configuration method

Guide page (guidePage)

Document capture page (ocrPage)

OCR result editing page (ocrResultPage)