Web SDK - PC UI customization instructions - ID Verification

The Web SDK for PC supports user interface (UI) style customization. You can customize elements such as icons, button colors, and background colors on the guide page, certificate capture page, OCR result editing page, and liveness detection page.

Configuration method

You can pass a JSON string of custom styles to the Alibaba Cloud server for initialization using the StyleConfig field in the server-side Initialize API.

If you do not provide a custom configuration, the default configuration is used. If you omit a specific configuration item, its default style is used. To minimize the size of the initialization request, we recommend that you pass only the configurations that you want to modify and rely on the default Alibaba Cloud settings for the rest.

Note

The JSON string cannot contain special characters used in regular expressions.

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 items

Custom page colors: You can provide color values for various UI components to replace the default colors.
Custom icons: You can provide custom icons or image resources to replace the default ones. The size and position of the icons remain unchanged.
Custom frame styles: You can provide custom resource files to replace the default ones. The size and position of the frames remain unchanged.

Module page	Element	Description	Configuration item	Description of the configuration item
Guide page	Sample image	Customers can replace the sample image.	`"guidePage": { "step1Icon": "", "step2Icon": "", "pathIcon": "" }`	The URL of an image that can be accessed over the Internet. step1Icon and step2Icon: The icons for Step 1 and Step 2 on the eKYC guide page. Size: `200 × 200`. pathIcon: The icon for the connecting line between steps. Size: `320 × 3`.
	Button background color/Button font color	None	`"guidePage": { "startBtnBgColor": "#FF6A00", "startBtnTextColor": "#FFFFFF" }`	startBtnBgColor: The background color value of the Start button. startBtnTextColor: The text color value of the Start button.
	Button background color/Button font color	None
Certificate capture page	Back button icon/Upload image icon	None	`"ocrPage": { "backIcon": "", "uploadIcon": "" }`	The URL of an image that can be accessed over the Internet. backIcon: The image for the Back button. Size: `24 × 24`. uploadIcon: The icon for Upload Image. Size: `16 × 16`.
	Upload text style	None	`"ocrPage": { "uploadTextColor": "#FF6A00" }`	The color of the upload text. Default value: `#FF6A00`.
	Submit button style	None	`"ocrPage": { "submitBtnBgColor": "#FF6A00", "submitBtnTextColor": "#FFFFFF" }`	submitBtnBgColor: The background color of the Submit button. Default value: `#FF6A00`. submitBtnTextColor: The text color of the Submit button. Default value: `#FFFFFF`.
Pop-up window style customization	Distance from the top	None	`"alert": { "top": "45%" }`	The distance from the top of the pop-up window. Default value: `45%`.
	Distance from the left	None	`"alert": { "left": "50%" }`	The distance from the left of the pop-up window. Default value: `50%`.
	Width	None	`"alert": { "width": "480px" }`	The width of the pop-up window. Default value: `480px`.
	Primary button style: Background color Text color	None	`"alert": { "primaryBtnBgColor": "#FF6A00", "primaryBtnTextColor": "#FFFFFF" }`	primaryBtnBgColor: The background color of the primary button. Default value: `#FF6A00`. primaryBtnTextColor: The text color of the primary button. Default value: `#FFFFFF`.
	Secondary button style: Background color Text color Border style	None	`"alert": { "btnBgColor": "#FFFFFF", "btnBgTextColor": "#FF6A00", "btnBorder": "1px solid #FF6A00" }`	btnBgColor: The background color of the secondary button. Default value: `#FFFFFF`. btnBgTextColor: The text color of the secondary button. Default value: `#FF6A00`. btnBorder: The border style of the secondary button. Default value: `1px solid #FF6A00`.