Skip to main content

​
Hosted UI

Use the uiHandle returned from the Handshake (Create Journey) call to start the verification journey.
The hosted UI can be launched either inside an iframe or via full-page redirect.

​
Frontend Initialization

​
Iframe

Create an <iframe> element and set its src to the handshake uiHandle. Restrict where the iframe may be embedded (recommended): configure
Content-Security-Policy: frame-ancestors or use X-Frame-Options. 
// After the Handshake → you have { uiHandle }

const iframe = document.getElementById("idcanopyFrame");
iframe.src = uiHandle;

​
Redirect

Navigate the user directly to the hosted UI: 
window.location.href = uiHandle;
Optionally, your backend may issue a short-lived 302 redirect to reduce URL exposure in client logs.

​
Frontend Events (Optional)

If you build your own wrapper around the iframe or redirect flow, you may emit custom events such as:
  • journeyStarted
  • journeyStepCompleted
  • journeyCompleted
  • journeyFraudAlert
  • uiClosed
  • uiTimeout
These events are not emitted by the SDK; they are optional and for your own analytics/telemetry.

​
Example Integration

// After the Handshake → you have { uiHandle }

// Option A: iframe
const iframe = document.getElementById("idcanopyFrame");
iframe.src = uiHandle;

// Option B: redirect
// window.location.href = uiHandle;

// Optional: simple activity tracker
let lastActiveTime = Date.now();
const updateActivity = () => (lastActiveTime = Date.now());

document.addEventListener("mousemove", updateActivity);
document.addEventListener("keypress", updateActivity);

// Warn user before navigating away from the verification flow
window.onbeforeunload = (e) => {
  const message = "Are you sure you want to leave the verification process?";
  e.returnValue = message;
  return message;
};

// Optional: inactivity warning
setInterval(() => {
  const fiveMinutes = 5 * 60 * 1000;
  if (Date.now() - lastActiveTime > fiveMinutes) {
    console.warn("User inactive for more than 5 minutes");
  }
}, 60 * 1000);