JS Plugin

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

๐Ÿ“˜

NEW - JS Plugin Wizard

Try out our new JS Plugin Wizard here.

17001700

JS Plugin Flow

  1. Create your public key (or sandbox key for Sandbox Mode)
  2. 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 with http or file:// will not work. For testing purposes, a localhost 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).

On a desktop device, you will see different results depending on your crossDevice, crossDeviceQRCode, and crossDeviceSMS values. If they are all true as shown in the above code example, you can read more details on our Mobile Handoff page. If these fields are not present or set to false, you will see the following:

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). Most of these provide access to the job object of type Job, which contains useful information such as job.id, job.token, job.result.success, and job.status.

Arguments

ParametersTypeDescription
appIdstringPublic key (Required).
typestringDefault: idv
Enums: idv, id, reverify
The job type.
idv - ID with selfie verification
id - ID only
reverify - reverification
tokenstringTime-limited session token used to restart a session
crossDevicebooleanDefault: false
Provides the ability to maintain the same session across multiple devices using the token retrieved from onInit
crossDeviceQRCodebooleanDefault: false
If the user is on a desktop computer, a scannable QR Code enables the verification to continue on their mobile phone. Once completed, control is given back to the desktop.
crossDeviceSMSbooleanDefault: false
If the user is on a desktop computer, the user can input a cell phone number and we will text a secure link to continue verification.
crossDeviceURLstringOption to set a custom domain for cross device handoff.
Contact [email protected] to enable this feature.
showUploadFirstbooleanDefault: true
Show an instructions screen before the camera selfie steps capture.
facestringDefault: camera
Enums: upload, camera, both
Specify how user can submit their selfie.
idstringDefault: both
Enums: upload, camera, both
Specify how user can submit their id.
idLivenessstringDefault: null
ID Card liveness check. Add distance to activate liveness check. idLiveness checks for user movements with ID Card.
livenessstringDefault: mouth
Enums: mouth, orientation, distance, straight
Only applicable for selfie/headshot liveness check. Specify how Vouched should check for face liveness. The mouth liveness, checks for mouth movements, orientation checks the facial orientation, distance checks for user movements, and straight checks if the user is looking at the camera.
enableEyeCheckbooleanDefault: false
Only applicable for selfies. Checks if user kept their eyes open before selfie image is captured.
propertiesarrayArbitrary properties to add to the job. Array of objects with name and value parameters.
Example:
[ {name: "Foo", value: "Bar"}, {name: "Baz", value: "Qux"} ]
contentobjectProperties to change the text content during the verification process.
verificationobjectOptional verification properties.
callbackURLstringUpon the job's completion, Vouched will POST the job results to this URL. See webhooks for more info.
stepTitlesobjectTitles for steps of the verification process.
themeobjectChange the theme and styles of the plugin.
includeBarcodebooleanDefault: false
Enable ID barcode capture and processing for applicable IDs. The error BarcodeMatchError results when idMatch falls below the normalized threshold or the user skips the barcode step.
includeBackIdbooleanDefault: false
Enables capture for the back of the ID for all jobs.
sandboxbooleanDefault: false
Specifies a sandbox job
disableCssBaselinebooleanDefault: false
Disables the internal CSS baseline styles
onSubmitfunction:

`(props: { stage: string; attempts: number; job: Job; }): voidJob

````
Javascript callback when a user submits a photo
onCamerafunction:
(props: { hasCamera: boolean; hasPermission: boolean; }): void
Javascript callback when camera initialization is complete
onCameraEventfunction:
(cameraEvent: CameraEvent): void

CameraEvent: { cameraRendered?: boolean; }
Javascript callback when there are changes to the Camera DOM element.
onInitfunction:
(props: { token: string; job: Job; }): void

Job
Javascript callback during initialization of the web app
onDonefunction:
(job: Job): void

Job
Javascript callback when a verification is complete
onReverifyfunction:
(job: Job): void

Job
Javascript callback when a reverification job is complete
onConfirmfunction:
(userConfirmEvent: UserConfirmEvent): void

UserConfirmEvent : { confirmedExtractedData?: boolean; }
Javascript callback after user confirmation. See userConfirmation
onSurveyDonefunction
(job: Job): void

Job
Javascript callback when a survey is complete. Contact [email protected]
showTermsAndPrivacybooleanDefault: true for avant, false for verbose
Compatible with themes: avant, verbose
Flag to show terms and privacy links and require acceptance to move forward.
showProgressBarbooleanDefault: true
Flag to show the Progress Bar
maxRetriesBeforeNextnumberDefault: 0
Number of times to force users to retry before showing the Next button (Default: 0 - show Next button immediately).
Deprecated alias: idShowNext
numForceRetries numberDefault: 2
Number of times to force users to retry before showing the Next button in force-retry cases (the card doesn't meet the minimum threshold).
handoffViewobjectSettings for displaying the QR code when Mobile Handoff is enabled.
localestringDefault: en
Enums: en, es, fr, fr_CA
Specify the language (English, Spanish, French, or French Canadian).
enableGeoLocationbooleanDefault: false
Enables GeoLocation for the user and returns the user's longitude and latitude (Returns error message indicating if user has denied sharing their location or browser/device does not have location support).
userConfirmationobjectProperties used for the user confirmation feature.
manualCaptureTimeoutnumberDefault: 35000
Number (in ms) to specify the time it takes for the manual capture button to show up.

content Object

Optional properties to change the text content during the verification process.

PropertyTypeDescription
successstringThe messages posted after successful submission.
Example: 'Please close this window to return your online visit.'
reviewstringResponse to the user describing review of results.
Example:
'Thank you for providing your information. We will review and get back to you.'.
crossDeviceSuccessstringMessage posted after the crossDevice verification success.
Example: 'Verification is complete, continue on your desktop.'.
crossDeviceInstructionsstringInstructions and requirements for crossDevice.
Example:
'We need to verify your identity. This requires government-issued photo ID as well as selfie. Please follow the instructions below to continue the verification process on your phone:'
1. Open the Camera App from your phone.
2. Hold the device so the QR Code appears in the viewfinder.
3. Click on notification to open the verification link.
crossDeviceTitlestringTitle for crossDevice.
Example: 'Identity Verification'.
crossDeviceShowOffbooleanAllows Handoff to continue on Desktop.
upperStartInstructionsstringUpper Instructions on Start Screen.
middleStartInstructionsstringMiddle Instructions on Start Screen.
lowerStartInstructionsstringLower Instructions on Start Screen.
upperIdInstructionsstringUpper Instructions on ID Screen.
lowerIdInstructionsstringLower Instructions on ID Screen.
Example: "You can either upload a photo you've already taken, or take a photo of your ID now.".
upperBackIdInstructionsstringUpper Instructions on Back ID Screen.
lowerBackIdInstructionsstringLower Instructions on Back ID Screen.
upperFaceInstructionsstringUpper Instructions on Face Screen.
lowerFaceInstructionsstringLower Instructions on Face Screen.
lowestFaceInstructionsstringLowest Instructions on Face Screen.
upperIdCapturedInstructionsstringUpper Instructions on ID Captured Screen.
middleIdCapturedInstructionsstringMiddle Instructions on ID Captured Screen.
middleBackIdCapturedInstructionsstringMiddle instructions on ID Captured Screen when Barcode scan is enabled.
lowerIdCapturedInstructionsstringLower Instructions on ID Captured Screen.
cameraIDButtonstringString text for camera button on ID Screen.
cameraFaceButtonstringString text for camera button on Face Screen.
upperSuccessstringSuccess message at the top.
Example: 'Your photo uploads are complete!'.
lowerSuccessstringSuccess message at the bottom.
Example: 'Thank you.'.
upperFailurestringFailure message at the top.
Example: 'Try Again'.
lowerFailurestringFailure message at the bottom.
Example: "The photo you shared can't be used for validation. Please take another picture, making sure the image of your face or your ID is clear.".
verifyPassstringThe verification passed.
Example: 'Everything looks good to us. Check your information and click next.'.
verifyFailstringThe verification failed.
Example: "We couldn't verify you. If you disagree, update your information and click next.".
qrHandoffInstructionsstringOptional bottom Handoff Instructions.
qrDesktopInstructionsstringInstructions for crossDeviceShowoff. qrDesktopInstructions is the instructions and requires '{qrDesktopLink}' to be set to inject text for the link.
Default: 'Alternatively, you can {qrDesktopLink} if you have a good desktop camera.'.
qrDesktopLinkstringString text used in qrDesktopInstructions to replace {qrDesktopLink}. qrDesktopLink becomes the link text.
Example: Continuing the example above, if qrDesktopLink = 'continue', qrDesktopInstructions becomes 'Alternatively, you can continue if you have a good desktop camera.'.
startCompanyInstructionsstringOptional Start Screen Instruction.
carouselCompanyTextstringArray of strings where string at each index make up the Carousel Slide.
carouselCompanyImgstringArray of strings (image URL) where image at each index make up the Carousel Slide.
progressIndicatorLoadingstringString that would replace term 'loading' in the Progress Indicator.
progressIndicatorVouchingstringString that would replace term 'vouching' in the Progress Indicator.
overlayHeaderstringOptional string to override the header text in the Avant CameraScreen Overlay.
startScreenButtonLabelstringOptional string to override the button text in the Avant Start screen.
cameraTopIDDirectionsstringOptional string to override the top text in the Avant ID Camera screen.
cameraTopBackIdDirectionsstringOptional string to override the top text in the Avant Back ID Camera screen
cameraTopFaceDirectionsstringOptional string to override the top text in the Avant Face Camera screen.
cameraButtonLabelContinueSelfiestringOptional string to override the button text in the Avant ID Captured screen.
retryMessageInvalidIdPhotostringDefault: We could not recognize the ID
Optional prop to override the first line of the retry message in the ID screen.
retryMessageInvalidUserPhotostringDefault: We could not recognize the selfie
Optional prop to override the first line of the retry message in the Face screen.
cameraScreenLabelFrontIdstringOptional prop to override the initial camera labels in the FrontID Camera Screen.
cameraScreenLabelBackIdstringOptional prop to override the initial camera labels in the BackID Camera Screen.
cameraFaceLabelShowFacestringOptional prop to override the initial camera labels in the Face Camera Screen.
mobileHandoffDoneMessagestringOptional prop for extra text on the Done Screen when doing Handoff on Mobile.

verification Object

Optional verification properties.

PropertyTypeDescription
firstNamestringUsed to compare to the first name extracted from the ID document during Identity Verification.
Example: Jerry
lastNamestringUsed to compare to the last name extracted from the ID document during Identity Verification.
Example: Lawson
birthDatestringUsed to compare to the date of birth extracted from the ID document during Identity Verification.
Example: 12/01/1940
emailstringUsed for identity Crosscheck.
phonestringUsed for identity Crosscheck.
enableIPAddressbooleanEnable IP address check.
enablePhysicalAddressbooleanEnable physical address check.
enableDarkWebbooleanEnable dark web check
enableCrossCheckbooleanEnable phone, email, and address Crosscheck.
enableAAMVAbooleanEnable Driver License Verification check on the ID.

stepTitles Object

Titles for steps of the verification process.

PropertyTypeDescription
FrontId
Required
stringThe message shown on the ID screen.
Example: "Front ID".
Face
Required
stringThe message shown on the face screen.
Example: "Face".
Done
Required
stringThe message shown on the completion screen.
Example:"Done verifying".

theme Object

PropertyTypeDescription
namestringSpecifies the JS Plugin theme to use.
Default: verbose
Enums: verbose , avant, classic (deprecated)
iconLabelColorstringHex value for Icon Label color.
Compatible with theme: verbose Example: '#413d3a'.
bgColorstringHex value for Background color. Compatible with theme: verbose
Example: '#FFFFFF'.
logoobjectLogo.
Compatible with theme: verbose, avant
Example:
`logo: { src: 'https://www.vouched.id/wp-content/uploads/2020/11/vouched_logo_hi_res.png

', style: { 'max-width': 150, 'margin-bottom': 30 }}`.
navigationActiveTextstringHex value for navigation active text. Compatible with theme: verbose
Example: '#413d3a'.
iconColorstringHex value for Icon color.
Compatible with theme: verbose
Example: '#f6f5f3'.
iconBackgroundstringHex value for Icon Background color.
Compatible with theme: verbose
Example: '#c8ae8f'.
baseColorstringHex value for primary color.
Compatible with theme: verbose, avant
Example: '#4d7279'.
fontColorstringHex value for font color.
Compatible with theme: verbose
Example: '#413d3a'.
fontstringFont Family.
Compatible with theme: verbose, avant
Example: 'Open Sans'.
navigationActiveBackgroundstringHex value for background color of active breadcrumbs.
Compatible with theme: verbose
Example: '#bacbd1'.
navigationDisabledBackgroundstringHex value for background color of disabled breadcrumbs.
Compatible with theme: verbose
Example: '#bacbd1'.
navigationDisabledTextstringHex value for text color on disabled breadcrumbs.
Compatible with theme: verbose
Example: '#4d7279'.
secondaryButtonColorstringRGB value for color of the secondary buttons (Grey Retry Next button). Default: 'rgb(216, 216, 216)'.
handoffLinkColorstringHex value for text color in the Mobile Handoff verification link. Default: '#40a1ed'.
progressIndicatorTextColorstringHex value for text color of the progressIndicator in Avant theme. Default: '#000'.

handoffView Object

Settings for displaying the QR code when Mobile Handoff is enabled.

PropertyTypeDescription
qRCodeSizenumberDefault: undefined
The QR Code canvas element size in pixels.
When undefined the size will be determined.
onlyShowQRCodebooleanDefault: false
Only shows the QR code.

reverificationParameters Object

Settings for Reverification (if enabled).

PropertyTypeDescription
jobIdstringThe ID of the completed source verification job to reverify against.
matchstringDefault: selfie
Enums: id, selfie. Matches the captured image to either the source job's ID image or Selfie image.

userConfirmation Object

Settings for user confirmation of photos (if enabled).

PropertyTypeDescription
confirmDatabooleanShows the user the extracted data after ID photo is processed.
confirmImagesbooleanShows the user each photo taken before photo is processed.

Unmount JS Plugin

vouched.unmount('#vouched-element')