Web SDK allows you to customize the UI configurations. You can customize the icons, button colors, and background colors of the guide page, document collection page, optical character recognition (OCR) result editing page, and liveness detection page.

Configuration method

You can call the Initialize operation and specify the StyleConfig parameter to upload a JSON string of custom UI configurations based on the template to the Alibaba Cloud server for initialization.

If you do not specify a configuration item, the default configuration is retained. If you do not specify the style of a configuration item, the default style is retained. To decrease the size of the initialization request, we recommend that you specify only the configurations that you want to modify. Retain the other default configurations of Alibaba Cloud.

Note

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

Configuration templates

JavaScript

const styleConfig = {
  guidePage: {
    backgroundColor: "white", // The CSS color value.
    btnBackgroundColor: "#fb5d01", // The CSS color value.
    btnTextColor: "white", // The CSS color value.
    btnShadow: "0 16px 32px 0 rgba(251, 115, 38, 0.3)", // css box-shadow
    circle1Img: "", // The URL of the image.
    circle2Img: "", // The URL of the image.
    leftBorderImg: "", // The URL of the image.
    faceImg: "", // The URL of the image.
    ocrImg: "", // The URL of the image.
  },
  ocrPage: {
    // The background color and opacity of the OCR page.
    ocrBgColor: "rgba(2, 2, 2, 0.8)", // css rgba
    tipColor: "white", // The CSS color value.
    maskColor: "rgba(2, 2, 2, 0.7)", // css rgba
    backIconImg: "", // The URL of the image.
    submitIconImg: "", // The URL of the image.
    ocrPhotoBorderImg: "", // The URL of the image.
    albumIconImg: "", // The URL of the image.
  },
  ocrResultPage: {
    backgroundColor: "white", // The CSS color value.
    topTipBgColor: "white", // The CSS color value.
    topTipTextColor: "black", // The CSS color value.
    ocrTextColor: "#333333", // The CSS color value.
    inputBgColor: "#f7f7f7", // The CSS color value.
    btnBgColor: "#fb5d01", // The CSS color value.
    btnTextColor: "white", // The CSS color value.
    maskColor: "rgba(2, 2, 2, 0.7)", // css rgba
    backIconImg: "", // The URL of the image.
  },
  facePage: {
    backgroundColor: 'white', // The CSS color value.
    topTipColor: "#333333", // The CSS color value.
    processBarColor: ['#FFA500', '#FF8C00', 'rgba(237,119,49,1)'], // An array of three CSS color values that specify the color values of the progress bar from light to dark.
    maskColor: 'rgba(0, 0, 0, 0.6)', // css rgba
    maskTipColor: "white", // The CSS color value.
  }
};

JSON

{
  "guidePage": {
    "backgroundColor": "white",
    "btnBackgroundColor": "#fb5d01",
    "btnTextColor": "white",
    "btnShadow": "0 16px 32px 0 rgba(251, 115, 38, 0.3)",
    "circle1Img": "",
    "circle2Img": "",
    "leftBorderImg": "",
    "faceImg": "",
    "ocrImg": ""
  },
  "ocrPage": {
    "ocrBgColor": "rgba(2, 2, 2, 0.8)",
    "tipColor": "white",
    "backIconImg": "",
    "maskColor": "rgba(2, 2, 2, 0.7)",
    "ocrPhotoBorderImg": "",
    "albumIconImg": "",
    "submitIconImg": ""
  },
  "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"
  }
}

Configuration description

Custom color settings of the page: Web SDK allows you to specify color values for different UI components.
Custom icon: Web SDK allows you to specify different icons or images to change the icons. The size and position of an icon remain unchanged.
Custom box: Web SDK allows you to specify different resource files to change boxes. The size and position of a box remain unchanged.

Page	Element	Description	Parameter	Parameter description
Guide page (available only in Web SDK)	Page background color	None.	guidePage: { backgroundColor: "", }	backgroundColor: the CSS color value.
	Sample image	You can change the sample image.	guidePage: { circle1Img: "", circle2Img: "", leftBorderImg: "", faceImg: "", ocrImg: "", }	The URL of the image that can be accessed over the Internet. circle1Img and circle2Img: the icons of Step 1 and Step 2 on the electronic Know Your Customer (eKYC) guide page. The resolution of the icons is 60 x 60 pixels. leftBorderImg: the connection bar on the left side of the eKYC guide page. The resolution of the connection bar is 6 x 414 pixels. faceImg: the sample image for face recognition. The resolution of the image is 393 x 393 pixels. ocrImg: the sample image for document recognition. The resolution of the image is 396 x 393 pixels.
	Button background color, button font color, or button shadow color	None.	guidePage: { btnBgColor: "", btnTextColor: "", btnShadow: "", }	btnBgColorColor and btnTextColor: the CSS color value. btnShadow: the CSS shadow value.
		None.
Document collection page	Page background color	None.	ocrPage: { ocrBgColor: "", }	ocrBgColor: the CSS color value.
	The color of the document bounding box	Change the shape and color to adapt to documents and passports.	ocrPage: { ocrPhotoBorderImg: "", }	The URL of the image that can be accessed over the Internet. ocrPhotoBorderImg: The resolution of the image is 996 × 594 pixels.
	Style of the document bounding box		ocrPage: { ocrPhotoBorderImg: "", }
	Album icon	Change the style and color.	ocrPage: { albumIconImg: "", }	The URL of the image that can be accessed over the Internet. albumIconImg: The resolution of the image is 144 × 144 pixels.
	Overlay color or overlay opacity	None.	ocrPage: { maskColor: "", }	maskColor: the CSS RGBA value.
	Overlay color or overlay opacity	None.	ocrPage: { maskColor: "", }	maskColor: the CSS RGBA value.
	Color of the UI text above the overlay	None.	ocrPage: { tipColor: "", }	tipColor: the CSS color value.
	Exit icon	Change the style and color.	ocrPage: { backIconImg: "", }	The URL of the image that can be accessed over the Internet. backIconImg: The resolution of the image is 30 × 54 pixels.
	Submit icon	Change the style and color.	ocrPage: { submitIconImg: "", }	The URL of the image that can be accessed over the Internet. backIconImg: The resolution of the image is 240 × 240 pixels.
OCR result editing page	Page background color	None.	ocrResultPage: { backgroundColor: "", }	backgroundColor: the CSS color value.
	Background color of upper-part prompt messages/text color of upper-part prompt messages	None.	ocrResultPage: { topTipBgColor: "", topTipTextColor: "", }	topTipBgColor and topTipTextColor: the CSS color value.
	Text color of OCR information	None.	ocrResultPage: { ocrTextColor: "", }	ocrTextColor: the CSS color value.
	Background color of the input field	None.	ocrResultPage: { inputBgColor: "", }	inputBgColor: the CSS color value.
	Overlay color or overlay opacity	None.	ocrResultPage: { maskColor: "", }	maskColor: the CSS RGBA value.
	Exit icon	Change the style and color.	ocrResultPage: { backIconImg: "", }	The URL of the image that can be accessed over the Internet. backIconImg: The resolution of the image is 30 × 54 pixels.
	Button background color or button font color	None.	ocrResultPage: { btnBgColor: "", btnTextColor: "", }	btnBgColor and btnTextColor: the CSS RGBA value.
	Button background color or button font color	None.	ocrResultPage: { btnBgColor: "", btnTextColor: "", }	btnBgColor and btnTextColor: the CSS RGBA value.
Liveness detection page	Page background color	None.	facePage: { backgroundColor: "", }	backgroundColor: the CSS color value.
	Font color of the title Pick Up Your Phone and Blink	None.	facePage: { topTipColor: "", }	topTipColor: the CSS color value.
	Color of the progress bar around the bounding box	None.	facePage: { processBarColor: ['', '', ''], }	processBarColor: an array of three CSS color values that specify the color values of the progress bar from light to dark.
	Overlay color or overlay opacity	None.	facePage: { maskColor: "", }	maskColor: the CSS RGBA value.
	Color of the UI text above the overlay	None.	facePage: { maskTipColor: "", }	maskTipColor: the CSS color value.

Configuration template file

custom_style_template.json

ID Verification:Custom UI configurations of Web SDK

Configuration method

Configuration templates

Configuration description

Configuration template file

CSS style references