iFrame Integration

Embedding the Verification iFrame

You can optionally embed the verification link returned in the response within an iFrame on your website. The iFrame will post messages to the parent window based on specific events that occur during the verification process.

iFrame Example

<iframe
  src="https://fe.dcams.app/d2568a05-47a2-4ec7-b3e3-c5bd194461a7"
  width="420"
  height="670"
  style="overflow: hidden; border: none;"
  allow="camera"
  allowfullscreen
  <!-- Make sure to set the allow properly in case one of your verification components needs access -->
></iframe>

When displaying this iFrame on a mobile device, set both width and height to 100% and include the allowfullscreen attribute so the verification experience can expand properly.

Listening for Post Messages

To listen for events sent from the iFrame to the parent window, you can add an event listener for the message event. The VX iFrame posts updates such as PASS, FAIL, ALREADY VERIFIED, ERROR, LINK EXPIRED, BOT DETECTED, and CLOSE (when the user dismisses the experience).

---

Sample Implementation

// Listen for messages from the iframe/webview
  window.addEventListener('message', function(event) {
    // Optional: Verify the origin for security
    // if (event.origin !== 'https://vx-fe.dcams.app') return;

    const message = event.data;

    switch (message) {
      case 'PASS':
        console.log('Verification successful!');
        // Handle successful verification
        // e.g., redirect user, show success message, etc.
        break;

      case 'FAIL':
        console.log('Verification failed');
        // Handle failed verification
        // e.g., show error message, allow retry, etc.
        break;

      case 'ALREADY VERIFIED':
        console.log('User already verified');
        // Handle already verified case
        // e.g., skip verification flow, show appropriate message
        break;

      case 'ERROR':
        console.log('A system error occurred in the verification experience');
        // Handle general system errors
        // e.g., prompt to retry, log error, etc.
        break;

      case 'LINK EXPIRED':
        console.log('Verification link has expired');
        // Handle expired links
        // e.g., request a new verification session, notify user, etc.
        break;

      case 'BOT DETECTED':
        console.log('Potential automated activity detected');
        // Handle bot detection events
        // e.g., block the session, add additional checks, etc.
        break;

      case 'CLOSE':
        console.log('User closed the verification experience');
        // Handle closure
        // e.g., prompt to retry later or navigate away
        break;

      default:
        console.log('Unknown message received:', message);
        // Handle any other messages or ignore
        break;
    }
  });