JS Plugin
The Javascript (JS) Plugin is the recommended way to add Vouched to your web application.


JS Plugin Flow
- Create your public key (or sandbox key for Sandbox Mode)
- Copy the Quick Start Code below or follow the recipe to add Vouched to your site
Camera Restrictions
Browser permissions for the camera require an
https
host. Sites hosted withhttp
orfile://
will not work. For testing purposes, alocalhost
site is a viable option.
Quick start code
<!DOCTYPE html>
<html>
<head>
<!-- utf-8 is required for JS Plugin default fonts -->
<meta charset="utf-8" />
<meta name=“viewport” content=“width=device-width, initial-scale=1.0">
<script src="https://static.vouched.id/widget/vouched-2.0.0.js"></script>
<script type='text/javascript'>
(function() {
var vouched = Vouched({
// Optional verification properties.
verification: {
// verify the user's information
firstName: 'Gladys',
lastName: 'West',
// used for the crosscheck feature
email: '[email protected]',
phone: '000-111-2222'
},
liveness: 'straight',
appId: '<PUBLIC_KEY>',
// your webhook for POST verification processing
callbackURL: 'https://website.com/webhook',
// mobile handoff
crossDevice: true,
crossDeviceQRCode: true,
crossDeviceSMS: true,
// called when the verification is completed.
onDone: (job) => {
// token used to query jobs
console.log("Scanning complete", { token: job.token });
// An alternative way to update your system based on the
// results of the job. Your backend could perform the following:
// 1. query jobs with the token
// 2. store relevant job information such as the id and
// success property into the user's profile
fetch(`/yourapi/idv?job_token=${job.token}`);
// Redirect to the next page based on the job success
if( job.result.success){
window.location.replace("https://website.com/success/");
}else{
window.location.replace("https://website.com/failed/");
}
},
// theme
theme: {
name: 'avant',
},
});
vouched.mount("#vouched-element");
})();
</script>
</head>
<body>
<div id='vouched-element' style="height: 100%"/>
</body>
</html>
Layout Considerations
When integrating Vouched into your site design, consider that the Vouched component occupies 100% height of the parent container (it has CSS rule height: 100%
applied). That means the parent container should be given a height.
Height should be given, for example, by setting height
value (height: 100%
) on the container or by using flex constraints (flex-grow: 1
in vertical flex-box
).
Javascript Callbacks
A callback is a function that is to be executed after another function has finished executing — hence the name "call back". Functions can take other functions as arguments. Functions that do this are called higher-order functions. Any function that is passed as an argument is called a callback function.
In the context of Vouched, the callback functions can be used to send data back to your server or interact with your app as desired. Some examples are onSubmit
(this function is called when a user submits a photo), onCamera
(this function is called when camera initialization is complete), onInit
(called during initialization of the Web App), and onDone
(called when the verification is complete).
Arguments
Parameters | Type | Description |
---|---|---|
| string | Public key (Required). |
| string | Default: |
| string | Time-limited session token used to restart a session |
| boolean | Default: |
| boolean | Default: |
| boolean | Default: |
| string | Option to set a custom domain for cross device handoff. |
| boolean | Default: |
| string | Default: |
| string | Default: |
| string | Default: |
| string | Default: |
| boolean | Default: |
| array | Arbitrary properties to add to the job. Array of objects with |
object | Properties to change the text content during the verification process. | |
object | Optional verification properties. | |
| string | Upon the job's completion, Vouched will POST the job results to this URL. See webhooks for more info. |
object | Titles for steps of the verification process. | |
object | Change the theme and styles of the plugin. | |
| boolean | Default: |
| boolean | Default: |
| boolean | Default: |
| function | Javascript callback when a user submits a photo |
| function | Javascript callback when camera initialization is complete |
| function | Javascript callback when there are changes to the Camera DOM element |
| function | Javascript callback during initialization of the web app |
| function | Javascript callback when a verification is complete |
| function | Javascript callback when a reverification job is complete |
| function | Javascript callback after user confirmation. See userConfirmation |
| function | Javascript callback when a survey is complete. Contact [email protected] |
| boolean | Default: |
| boolean | Default: |
| number | Default: |
| number | Default: |
object | Settings for displaying the QR code when Mobile Handoff is enabled. | |
| string | Default: |
object | Properties used for the user confirmation feature. | |
| number | Default: |
content Object
Optional properties to change the text content during the verification process.
Property | Type | Description |
---|---|---|
| string | The messages posted after successful submission. |
| string | Response to the user describing review of results. |
| string | Message posted after the crossDevice verification success. |
| string | Instructions and requirements for crossDevice. |
| string | Title for crossDevice. |
| boolean | Allows Handoff to continue on Desktop. |
| string | Upper Instructions on Start Screen. |
| string | Middle Instructions on Start Screen. |
| string | Lower Instructions on Start Screen. |
| string | Upper Instructions on ID Screen. |
| string | Lower Instructions on ID Screen. |
| string | Upper Instructions on Back ID Screen. |
| string | Lower Instructions on Back ID Screen. |
| string | Upper Instructions on Face Screen. |
| string | Lower Instructions on Face Screen. |
| string | Lowest Instructions on Face Screen. |
| string | Upper Instructions on ID Captured Screen. |
| string | Middle Instructions on ID Captured Screen. |
| string | Middle instructions on ID Captured Screen when Barcode scan is enabled. |
| string | Lower Instructions on ID Captured Screen. |
| string | String text for camera button on ID Screen. |
| string | String text for camera button on Face Screen. |
| string | Success message at the top. |
| string | Success message at the bottom. |
| string | Failure message at the top. |
| string | Failure message at the bottom. |
| string | The verification passed. |
| string | The verification failed. |
| string | Optional bottom Handoff Instructions. |
| string | Instructions for crossDeviceShowoff. qrDesktopInstructions is the instructions and requires '{qrDesktopLink}' to be set to inject text for the link. |
| string | String text used in qrDesktopInstructions to replace {qrDesktopLink}. qrDesktopLink becomes the link text. |
| string | Optional Start Screen Instruction. |
| string | Array of strings where string at each index make up the Carousel Slide. |
| string | Array of strings (image URL) where image at each index make up the Carousel Slide. |
| string | String that would replace term 'loading' in the Progress Indicator. |
| string | String that would replace term 'vouching' in the Progress Indicator. |
| string | Optional string to override the header text in the Avant CameraScreen Overlay. |
| string | Optional string to override the button text in the Avant Start screen. |
| string | Optional string to override the top text in the Avant ID Camera screen. |
| string | Optional string to override the top text in the Avant Back ID Camera screen |
| string | Optional string to override the top text in the Avant Face Camera screen. |
| string | Optional string to override the button text in the Avant ID Captured screen. |
| string | Default: |
| string | Default: |
| string | Optional prop to override the initial camera labels in the FrontID Camera Screen. |
| string | Optional prop to override the initial camera labels in the BackID Camera Screen. |
| string | Optional prop to override the initial camera labels in the Face Camera Screen. |
| string | Optional prop for extra text on the Done Screen when doing Handoff on Mobile. |
verification Object
Optional verification properties.
Property | Type | Description |
---|---|---|
| string | Used to compare to the first name extracted from the ID document during Identity Verification. |
| string | Used to compare to the last name extracted from the ID document during Identity Verification. |
| string | Used to compare to the date of birth extracted from the ID document during Identity Verification. |
| string | Used for identity Crosscheck. |
| string | Used for identity Crosscheck. |
| boolean | Enable IP address check. |
| boolean | Enable physical address check. |
| boolean | Enable dark web check |
| boolean | Enable phone, email, and address Crosscheck. |
| boolean | Enable Driver License Verification check on the ID. |
stepTitles Object
Titles for steps of the verification process.
Property | Type | Description |
---|---|---|
| string | The message shown on the ID screen. |
| string | The message shown on the face screen. |
| string | The message shown on the completion screen. |
theme Object
Property | Type | Description |
---|---|---|
| string | Specifies the JS Plugin theme to use. |
| string | Hex value for Icon Label color. |
| string | Hex value for Background color. Compatible with theme: |
| object | Logo. |
| string | Hex value for navigation active text. Compatible with theme: |
| string | Hex value for Icon color. |
| string | Hex value for Icon Background color. |
| string | Hex value for primary color. |
| string | Hex value for font color. |
| string | Font Family. |
| string | Hex value for background color of active breadcrumbs. |
| string | Hex value for background color of disabled breadcrumbs. |
| string | Hex value for text color on disabled breadcrumbs. |
| string | RGB value for color of the secondary buttons (Grey Retry Next button). Default: |
| string | Hex value for text color in the Mobile Handoff verification link. Default: |
| string | Hex value for text color of the progressIndicator in Avant theme. Default: |
handoffView Object
Settings for displaying the QR code when Mobile Handoff is enabled.
Property | Type | Description |
---|---|---|
| number | Default: |
| boolean | Default: |
reverificationParameters Object
Settings for Reverification (if enabled).
Property | Type | Description |
---|---|---|
| string | The ID of the completed source verification job to reverify against. |
| string | Default: |
userConfirmation Object
Settings for user confirmation of photos (if enabled).
Property | Type | Description |
---|---|---|
| boolean | Shows the user the extracted data after ID photo is processed. |
| boolean | Shows the user each photo taken before photo is processed. |
Unmount JS Plugin
vouched.unmount('#vouched-element')
Updated about 15 hours ago