In this tutorial, you will learn how to edit and replace DocuPass's default UI with your own UI. Some basic knowledge of front-end web design including HTML and CSS is presumed.
To start, you need to download the DocuPass template, as a starting point where you will make further modifications. There are two different versions of the template, one for DocuPass Live Mobile and one for the rest of the modules.
Template for Live Mobile Template for Mobile/Redirection/Iframe
DocuPass page by default includes the following frameworks, these frameworks are included automatically even though they are not present in the HTML template and cannot be removed.
| Library | Version |
|---|---|
| Bootstrap | 4.5.2 |
| Animate.css | 4.1.1 |
| Font Awesome | 5.15.3 Pro |
The template archive contains two files, one HTML and one CSS file. You can now open both files in your favorite html editor.
The head section allows you to insert your custom css stylesheets and Google Fonts using <link> tags, for every css file you must supply the full path including the domain name for example
https://www.mywebsite.com/docupass/style.css, meaning that you will need to upload the CSS file to a server and cannot use a relative path such as css/style.css. Keep in mind that use of Javascript is currently not supported within the DocuPass HTML template system.
To create your own CSS stylesheet, you should always start by making small changes to the css file included in the template because it contains styles for critical elements such as video and camera canvas that you probably will not want to change or remove.
Just say you want to change the DocuPass font to Quicksand by Google, you will first find the following line within the CSS file:
html, body {
width: 100%;
height:100%;
overflow:hidden;
font-family: 'Roboto', sans-serif !important;
}And replace the Roboto font-family with Quicksand:
font-family: 'Quicksand', sans-serif !important;You will then include the Google font embed code and the CSS template in the HTML <head> section.
<head>
<!-- Quicksand Font -->
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;700&display=swap" rel="stylesheet">
<!-- Modified CSS template -->
<link rel="stylesheet" href="https://www.mywebsite.com/docupass/docupass_live_mobile.css">
</head>
The HTML body contains the main layout of DocuPass page, it uses Bootstrap's grid system to keep the design responsive across desktop and mobile devices.
The first block within the body starts with <section>, which is essentially a flexbox containing each DocuPass steps, every DocuPass step is contained within the .screen class with a unique id.
By default, each step is styled with Bootstrap's .card component and animate.css animation classes, you are free to remove the .card class and replace it with your own design but you must keep the .screen class and the id.
For example, if you want to replace the DocuPass steps with simple top to down design without the centrally aligned boxes, you will first make the following changes to the CSS:
.fullscreen{
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
}And remove the .card classes from .screen elements:
<div class="screen" id="welcome" style="display: none">Within each DocuPass .screen container, you will see some text displaying information to the user, some input fields and some buttons. DocuPass automatically detects device language and display strings in supported
language that is familiar to the end user, this is achieved through the .ls .ls-p class and data-l attribute. The .ls class indicates that the
element's content will be automatically filled with translation using the key specified within data-l attribute, .ls-p works similarly except the translation string will be inserted into placeholder attribute of an input.
For example:
<button class="btn btn-primary ls" data-l="StartVerification" id="btn_start_verification">Start Verification</button>The text inside the button above will be replaced with translation using the string key StartVerification, meaning unless you remove the .ls class, you will not be able to specify your own text for the button since it will always be replaced with the translation string during runtime.
To change the text inside the button, we can disable auto translation of the element by replacing the line with the following:
<button class="btn btn-primary" id="btn_start_verification">Verify Me Now!</button>It is very important that you keep the element id intact, because it is required to trigger the actual Javascript event when user clicks the button. You should also keep most of the non-bootstrap class names intact as they are also used as part of the internal Javascript process.
The following code will alter the first welcome screen displayed to the user when they open the URL:
<div class="screen card animate__animated animate__zoomIn" id="agreement" style="display: none">
<div class="card-body">
<h5 class="card-title"><i class="fad fa-car"></i> Supercar Rentals London</h5>
<img src="https://i.imgur.com/RJp1DwY.png" alt="Supercar Rentals Lodon Logo">
<p class="card-text">Thank you for submitting your rental application, we need to check your driver license before we can approve your rental application. Please prepare a valid driver license which you will be scanning in the next step.</p>
<button class="btn btn-primary" id="btn_start_verification">Submit Driving License</button>
</div>
</div>You now should have learned all the basics and able to edit all the DocuPass steps as per your own requirement.
For Iframe, Redirection and Standard Mobile modules, it is not possible to change the photo or face capture interface as DocuPass uses
HTML5 input capture internally, you should see an <input id="fileinput"...> element within the template which you should not remove.
For DocuPass Live Mobile, the capture interface design is contained within <div id="video">,
which you can change through modification of HTML and CSS. However, you should only modify the styling of the information text and its container to avoid unnecessary changes breaking the internal DocuPass script.
Once you have finished editing the HTML and CSS file, you should upload them to your server so that DocuPass can fetch the HTML content whenever your user begins identity verification.
Let's assume you have uploaded the HTML page to https://www.mywebsite.com/docupass/docupass.html, you are now ready to create your desired DocuPass session, and during creation you will pass your HTML template URL to customhtmlurl parameter. If you are using a client library, you can use function such as $docupass->setCustomHTML($url), checkout the corresponding function in client library reference.
Once the session has been created, you can visit the DocuPass page yourself to make sure the design is displayed correctly and the verification flow can be completed. If you find errors in your design, you can fix them and re-upload the files to your server, then simply refresh the DocuPass verification page and the newest version will be retrieved from your server.