XIntegration Setup Guide

This guide describes how to integrate XIntegration into your project website step-by-step.

1. Include the XIntegration Script

Add the following script inside the <body> section, below the <iframe>:

<script src="https://x-faces.xyz/xintegration.js" defer></script>

2. Configure the iframe for XIntegration

The <iframe> must include the attribute id="x-faces-frame".

Example iframe

The src URL must include the lang parameter:

ro – Romanian
en – English
de – German

<iframe id="x-faces-frame"
        src="https://api.x-faces.xyz/v1/user/verify/U_UUID?lang=en"
        allow="camera *; microphone *; fullscreen *; accelerometer *">
</iframe>

3. Integrate Google Analytics

Insert the following snippet before the closing </head> tag:

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX'); // Replace with your GA ID
</script>

Replace G-XXXXXXX with your actual Google Analytics ID.

4. Attach Event Handlers

XIntegration provides the following events:

onChallengeStarted – Verification started
onChallengeCompleted – Verification completed
onChallengeSuccess – Verification successful
onChallengeFail – Verification failed
onDataCollected – Data collection complete
onIframeOpened – iframe successfully loaded

Implementation Example

<script>
document.addEventListener('DOMContentLoaded', () => {
  xintegration.onChallengeStarted = () => {
    console.log('Challenge started');
    addEvent('started', 'Challenge started');
  };

  xintegration.onChallengeCompleted = () => {
    console.log('Challenge completed');
    addEvent('completed', 'Challenge completed');
  };

  xintegration.onChallengeSuccess = () => {
    console.log('Challenge success');
    addEvent('success', 'Challenge success');
  };

  xintegration.onChallengeFail = () => {
    console.error('Verification error');
    addEvent('error', 'Verification error');
  };

  xintegration.onDataCollected = () => {
    console.log('Data collected');
    addEvent('data', 'Data collected');
  };

  xintegration.onIframeOpened = () => {
    console.log('Iframe opened');
    addEvent('opened', 'Iframe opened');
  };
});
</script>

5. Full HTML Integration Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Parent Page</title>
  <style>
    iframe {
      width: 100%;
      height: 800px;
      border: none;
      overflow: hidden;
    }
  </style>

  <!-- Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXX');
  </script>
</head>
<body>
  <h1>Parent Page</h1>

  <iframe id="x-faces-frame"
          src="https://api.x-faces.xyz/v1/user/verify/U_UUID?lang=en"
          allow="camera *; microphone *; fullscreen *; accelerometer *">
  </iframe>

  <script src="https://x-faces.xyz/xintegration.js" defer></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      xintegration.onChallengeStarted = () => {
        console.debug('started', 'Challenge started');
      };
      xintegration.onChallengeCompleted = () => {
        console.debug('completed', 'Challenge completed');
      };
      xintegration.onChallengeSuccess = () => {
        console.debug('success', 'Challenge success');
      };
      xintegration.onChallengeFail = () => {
        console.debug('error', 'Verification error');
      };
      xintegration.onDataCollected = () => {
        console.debug('data', 'Data collected');
      };
      xintegration.onIframeOpened = () => {
        console.debug('opened', 'Iframe opened');
      };
    });
  </script>
</body>
</html>