Iframe Integration

Step 1: Create a session

First, create a session from your backend:

cURL

curl -X POST https://api.heuristik.com/v1/sessions \
  -H "Authorization: Bearer sk_live_your_key" \
  -H "Content-Type: application/json" \
  -d '{"referenceId": "user-12345"}'

Step 2: Embed the iframe

HTML

index.html

<iframe
  id="heuristik-frame"
  src="https://verify.heuristik.com?token=SESSION_TOKEN"
  width="100%"
  height="600"
  frameborder="0"
  allow="camera; microphone"
></iframe>

React

VerificationFrame.tsx

interface Props {
  sessionToken: string;
}

export function VerificationFrame({ sessionToken }: Props) {
  return (
    <iframe
      src={`https://verify.heuristik.com?token=${sessionToken}`}
      width="100%"
      height={600}
      frameBorder={0}
      allow="camera; microphone"
      title="Heuristik Verification"
    />
  );
}

Vue

VerificationFrame.vue

<script setup lang="ts">
defineProps<{ sessionToken: string }>();
</script>

<template>
  <iframe
    :src="`https://verify.heuristik.com?token=${sessionToken}`"
    width="100%"
    height="600"
    frameborder="0"
    allow="camera; microphone"
    title="Heuristik Verification"
  />
</template>

Step 3: Listen for events

The iframe communicates via postMessage:

events.js

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://verify.heuristik.com') return;

  const { type, payload } = event.data;

  switch (type) {
    case 'heuristik:ready':
      console.log('Iframe loaded');
      break;
    case 'heuristik:complete':
      console.log('Verification complete:', payload.sessionId);
      break;
    case 'heuristik:error':
      console.error('Verification error:', payload.message);
      break;
  }
});

Security

Always validate event.origin before processing messages. Never trust messages from unknown origins.