Customize the Web Page in Web-Mode RealId
#Background
There's a selfie guidance page in RealId flow, the customer might have to customize this page. In this document, we'll demonstrate how to achieve this goal.
#Overview
Here lists basic steps required to customize the web page inside RealId.

#Steps
#1. Develop the Web Page
#1.1 Get ZolozRealIdCore library
Download the js file from here. Then put the file to your project.
#1.2 Import ZolozRealIdCore
import ZolozRealIdCore from './zoloz-realid-core';
const zolozRealIDCore = new ZolozRealIDCore(langPack);
#1.3 Configure language pack
langPack is used to customize the copywriting in popover alert and it is optional. We have 9 keys totally, they are representative the system error alert, network error alert and retry max alert. The default copywriting is as followed:
//default value
const langPack = {
system_error_title:"System Error",
system_error_msg: 'Please try again later',
system_error_got_it: 'Got it',
network_error_title: 'No Internet Connection',
network_error_msg: 'Please check your internet connection and try again',
network_error_got_it: 'Got it',
fe_retry_max_title: '',
fe_retry_max_msg:'Sorry, you have too many failed identification attempts. Please try again later.',
fe_retry_max_got_it:'Got it'
};
#1.4 End the page
When the page should be ended, for example: go to next page or go back, we should call this methods to end the page.
let response = await zolozRealIDCore.end(type,params);
//await zolozRealIDCore.end('next');
The type and params are defined by the server side.
Type: 'next' | 'back' | 'error' | 'fail' | 'skip' | 'cancel'; Usually we only need 'next' and 'back';
sample for 'next':
const buttonClick = () => {
// if params needed, please add it
const params = {};
core.end('next',params);
}
sample for 'back':
document.addEventListener('back', e => {
// please prevent the default back event and let the core to controll the flow.
e.preventDefault();
core.end('back');
}, false);
#1.5 Configure logging
import {ekycLog} from './zoloz-realid-core';
ekycLog(seed,message);
//ekycLog('clickBack',{'onPage':'infoFill'});
This is used for remote log. It should be agreement with the BI.
#1.6 Sample code:
Sample project:
The code in App.vue:
<template>
<div id="app">
<div @click='takeSelfie'>
Next Page
</div>
</div>
</template>
<script>
import ZolozRealIdCore, {ekycLog} from '@/utils/zolozRealIdCore';
export default {
name: 'app',
data() {
return {
enableNext: true,
zolozRealIdCore: new ZolozRealIdCore({}),
};
},
mounted() {
ekycLog('faceGuidePageAppear', {});
document.addEventListener('back', e => {
e.preventDefault();
ekycLog('clickButton', {
'onPage': 'face_guide',
'clickItem': 'back'
});
this.zolozRealIdCore.end('back');
}, false);
},
methods: {
async takeSelfie() {
// protect code
if(this.enableNext) {
ekycLog('faceGuidePageProceed');
this.enableNext = false;
await this.zolozRealIdCore.end('next');
this.enableNext = true;
}
}
}
}
</script>
<style>
</style>
#Note
- If met the problem exports is not defined or *is not a constructor, that is because ZolozRealIdCore is a commonjs module, please change the babel.config.js:
module.exports = {
presets: [
[
'@vue/app',
{
modules:'commonjs'
}
]
]
}
#2. Deploy the Web Page
The customer could deploy the web page anywhere, just make sure that it is accessible from the public network.
#3. Set the Web Page
When initialize RealId (at server-side), pass the url as a parameter, please note that the url MUST be https:
{
"bizId": "...",
"userId": "...",
"docType": "...",
"pageConfig":{"urlFaceGuide":"https://url-to-the-customized-web-page.html"},
"metaInfo": "..."
}
Refer to RealId API for more information.