Web SDK PC UI customization colors icons buttons eKYC - ID Verification

Customize icons, colors, and backgrounds for the guide page, certificate capture page, OCR editing page, and liveness detection page in the PC Web SDK.

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.

Configuration template

JavaScript

const styleConfig = {
  guidePage: {
    step1Icon: "", // The icon for Step 1. The image dimensions (width × height) are 200 × 200.
    step2Icon: "", // The icon for Step 2. The image dimensions (width × height) are 200 × 200.
    pathIcon: "", // The icon for the connecting line between steps. The image dimensions (width × height) are 320 × 3.
    startBtnBgColor: "#FF6A00", // The background color of the Start Authentication button. Default value: #FF6A00.
    startBtnTextColor: "#FFFFFF", // The text color of the Start Authentication button. Default value: #FFFFFF.
  },
  ocrPage: {
    backIcon: "", // The icon for the Back button. The image dimensions (width × height) are 24 × 24.
    uploadIcon: "", // The icon for Upload. The image dimensions (width × height) are 16 × 16.
    uploadTextColor: "#FF6A00", // The color of the upload text. Default value: #FF6A00.
    submitBtnBgColor: "#FF6A00", // The background color of the Submit button. Default value: #FF6A00.
    submitBtnTextColor: "#FFFFFF", // The text color of the Submit button. Default value: #FFFFFF.
  },
  alert: {
    top: "45%", // The distance from the top of the pop-up window. Default value: 45%.
    left: "50%", // The distance from the left of the pop-up window. Default value: 50%.
    width: "480px", // The width of the pop-up window. Default value: 480px.
    primaryBtnBgColor: "#FF6A00", // The background color of the primary button. Default value: #FF6A00.
    primaryBtnTextColor: "#FFFFFF", // The text color of the primary button. Default value: #FFFFFF.
    btnBgColor: "#FFFFFF", // The background color of the secondary button. Default value: #FFFFFF.
    btnBgTextColor: "#FF6A00", // The text color of the secondary button. Default value: #FF6A00.
    btnBorder: "1px solid #FF6A00", // The border style of the secondary button. Default value: 1px solid #FF6A00.
  }
};

JSON

{
  "guidePage": {
    "step1Icon": "",
    "step2Icon": "",
    "pathIcon": "",
    "startBtnBgColor": "#FF6A00",
    "startBtnTextColor": "#FFFFFF"
  },
  "ocrPage": {
    "backIcon": "",
    "uploadIcon": "",
    "uploadTextColor": "#FF6A00",
    "submitBtnBgColor": "#FF6A00",
    "submitBtnTextColor": "#FFFFFF"
  },
  "alert": {
    "top": "45%",
    "left": "50%",
    "width": "480px",
    "primaryBtnBgColor": "#FF6A00",
    "primaryBtnTextColor": "#FFFFFF",
    "btnBgColor": "#FFFFFF",
    "btnBgTextColor": "#FF6A00",
    "btnBorder": "1px solid #FF6A00"
  }
}

Configuration reference

Page colors: Replace default component colors with custom color values.
Icons: Replace default icons with custom images. Size and position are fixed.
Frame styles: Replace default frames with custom resources. Size and position are fixed.

Module page	Element	Description	Configuration item	Details
Guide page	Step icons	Replaceable	`"guidePage": { "step1Icon": "", "step2Icon": "", "pathIcon": "" }`	A publicly accessible image URL. step1Icon and step2Icon: Step 1 and Step 2 icons. Size: `200 × 200`. pathIcon: Connecting line icon between steps. Size: `320 × 3`.
	Button background color/Button font color	None	`"guidePage": { "startBtnBgColor": "#FF6A00", "startBtnTextColor": "#FFFFFF" }`	startBtnBgColor: Background color of the Start button. startBtnTextColor: Text color of the Start button.
	Button background color/Button font color	None
Certificate capture page	Back button icon/Upload image icon	None	`"ocrPage": { "backIcon": "", "uploadIcon": "" }`	A publicly accessible image URL. backIcon: Back button icon. Size: `24 × 24`. uploadIcon: Upload image icon. Size: `16 × 16`.
	Upload text style	None	`"ocrPage": { "uploadTextColor": "#FF6A00" }`	Upload text color. Default: `#FF6A00`.
	Submit button style	None	`"ocrPage": { "submitBtnBgColor": "#FF6A00", "submitBtnTextColor": "#FFFFFF" }`	submitBtnBgColor: Background color. Default: `#FF6A00`. submitBtnTextColor: Text color. Default: `#FFFFFF`.
Dialog style	Distance from the top	None	`"alert": { "top": "45%" }`	Distance from top. Default: `45%`.
	Distance from the left	None	`"alert": { "left": "50%" }`	Distance from left. Default: `50%`.
	Width	None	`"alert": { "width": "480px" }`	Dialog width. Default: `480px`.
	Primary button style: Background color Text color	None	`"alert": { "primaryBtnBgColor": "#FF6A00", "primaryBtnTextColor": "#FFFFFF" }`	primaryBtnBgColor: Background color. Default: `#FF6A00`. primaryBtnTextColor: Text color. Default: `#FFFFFF`.
	Secondary button style: Background color Text color Border style	None	`"alert": { "btnBgColor": "#FFFFFF", "btnBgTextColor": "#FF6A00", "btnBorder": "1px solid #FF6A00" }`	btnBgColor: Background color. Default: `#FFFFFF`. btnBgTextColor: Text color. Default: `#FF6A00`. btnBorder: Border style. Default: `1px solid #FF6A00`.