The Web SDK - Mobile supports user interface (UI) style customization. You can customize styles, such as icons, button colors, and background colors, for the guide page, certificate collection 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 information about PC customization, see Web SDK - PC UI Custom Configuration Instructions.

Configuration method

To customize the UI, you can use the configuration template to pass a JSON string of custom styles to the Initialize API's StyleConfig field for initialization.

If you do not pass a configuration for a specific item, the default style is used. To reduce the size of the initialization request, we recommend that you pass only the configuration items that you need to modify.

Note

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

Configuration template

JavaScript

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

JSON

{
  "guidePage": {
    "backgroundColor": "white",
    "btnBagColor": "#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",
    "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",
    "backIconImg": ""
  }
}

Configuration items

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

Module Page	Element	Description	Configuration Item	Configuration Item Description
Guide page (Web SDK only)	Page background color	None.	guidePage: { backgroundColor: "", }	backgroundColor: A CSS color value.
	Sample image	Allows you to replace the sample image.	guidePage: { circle1Img: "", circle2Img: "", leftBorderImg: "", faceImg: "", ocrImg: "", shelterFromImg: "", lightImg: "", phoneImg: "", }	A publicly accessible URL of an image on the Internet. circle1Img, circle2Img: The icons for Step 1 and Step 2 on the eKYC guide page. Size: 60 × 60. leftBorderImg: The step connector bar on the left of the eKYC guide page. Size: 6 × 414. faceImg: The facial recognition diagram. Size: 393 × 393. ocrImg: The certificate detection diagram. Size: 396 × 393. shelterFromImg: The diagram that shows how to avoid occlusion. Size: 210 × 210. lightImg: The diagram that shows sufficient lighting conditions. Size: 210 × 210. phoneImg: The diagram that shows how to face the phone. Size: 210 × 210.
	Button background color, button font color, and button bottom shade color	None.	guidePage: { btnBgColor: "", btnTextColor: "", btnShadow: "", }	btnBgColor and btnTextColor: A CSS color value. btnShadow: A CSS box-shadow value.
		None.
Certificate collection page	Page background color	None.	ocrPage: { ocrBgColor: "", }	ocrBgColor: A CSS color value.
	Certificate viewfinder color	Replace resources to adapt to different shapes and colors of ID cards and passports.	ocrPage: { ocrPhotoBorderImg: "", }	A publicly accessible URL of an image on the Internet. ocrPhotoBorderImg: Size: 996 × 594.
	Certificate viewfinder style		ocrPage: { ocrPhotoBorderImg: "", }
	Album icon	Replace resources to change the style and color.	ocrPage: { albumIconImg: "", }	A publicly accessible URL of an image on the Internet. albumIconImg: Size: 144 × 144.
	Mask color and opacity	None.	ocrPage: { maskColor: "", }	maskColor: A CSS rgba value.
	Mask color and opacity	None.	ocrPage: { maskColor: "", }	maskColor: A CSS rgba value.
	Color of the text over the mask	None.	ocrPage: { tipColor: "", }	tipColor: A CSS color value.
	Exit icon	Replace resources to change the style and color.	ocrPage: { backIconImg: "", }	A publicly accessible URL of an image on the Internet. backIconImg: Size: 30 × 54.
	Submit icon	Replace resources to change the style and color.	ocrPage: { submitIconImg: "", }	A publicly accessible URL of an image on the Internet. backIconImg: The dimensions of the image are 240 × 240.
OCR result editing page	Page background color	None.	ocrResultPage: { backgroundColor: "", }	backgroundColor: A CSS color value.
	Top tip background color and text color	None.	ocrResultPage: { topTipBgColor: "", topTipTextColor: "", }	topTipBgColor and topTipTextColor: A CSS color value.
	Text color of the OCR information items	None.	ocrResultPage: { ocrTextColor: "", }	ocrTextColor: A CSS color value.
	Input field background color	None.	ocrResultPage: { inputBgColor: "", }	inputBgColor: A CSS color value.
	Mask color and opacity	None.	ocrResultPage: { maskColor: "", }	maskColor: A CSS rgba value.
	Exit icon	Replace resources to change the style and color.	ocrResultPage: { backIconImg: "", }	A publicly accessible URL of an image on the Internet. backIconImg: Size: 30 × 54.
	Button background color and font color	None.	ocrResultPage: { btnBgColor: "", btnTextColor: "", }	btnBgColor and btnTextColor: A CSS rgba value.
	Button background color and font color	None.	ocrResultPage: { btnBgColor: "", btnTextColor: "", }	btnBgColor and btnTextColor: A CSS rgba value.
Liveness detection page	Page background color	None.	facePage: { backgroundColor: "", }	backgroundColor: A CSS color value.
	Font color of the "Pick up your phone and blink" title	None.	facePage: { topTipColor: "", }	topTipColor: A CSS color value.
	Color of the progress bar around the viewfinder	None.	facePage: { processBarColor: ['', '', ''], }	processBarColor: An array of three CSS color values. The values correspond to the colors of the progress bar, from light to dark.
	Mask color and opacity	None.	facePage: { maskColor: "", }	maskColor: A CSS rgba value.
	Color of the text over the mask	None.	facePage: { maskTipColor: "", }	maskTipColor: A CSS color value.
	Exit icon	Replace resources to change the style and color.	facePage: { backIconImg: "", }	A publicly accessible URL of an image on the Internet. backIconImg: Size: 30 × 54.

Configuration template file

custom_style_template.json

ID Verification:Web SDK - Mobile UI custom configuration instructions

Configuration method

Configuration template

Configuration items

Configuration template file

CSS style reference