The Web SDK - Mobile supports UI style customization. You can customize colors, icons, and frame styles across four pages: the guide page, document capture page, OCR result editing page, and liveness detection page.
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.
How it works
To apply custom styles, pass a JSON configuration string to the StyleConfig field of the Initialize API. Only include the properties you want to change -- any property you omit will use its default value.
const styleConfig = {
guidePage: {
btnBgColor: "#1A73E8",
btnTextColor: "#FFFFFF",
backgroundColor: "#F5F5F5"
}
};
// Pass JSON.stringify(styleConfig) to the Initialize API's StyleConfig fieldThe JSON string must not contain special characters that are used in regular expressions.
You can customize three types of elements:
Colors: Pass CSS color values to change backgrounds, text, buttons, and overlays.
Icons and images: Pass publicly accessible image URLs to replace the default icons and illustrations. The size and position of each image remain unchanged.
Frames: Pass image URLs to replace the default document viewfinder frame. The size and position of the frame remain unchanged.
Guide page (guidePage)
The guide page is the first page users see. It shows 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)
The document capture page is where users photograph their identity documents (ID cards, passports, and similar documents). 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)
The OCR result editing 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.
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: ""
}
};{
"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": ""
}
}You can also download the template file: custom_style_template.json