Iframe Integration

<iframe
  src="https://app.toughtongueai.com/embed/SCENARIO_ID"
  width="100%"
  height="600px"
  allow="microphone"
></iframe>

/embed/SCENARIO_ID?color=violet-500&bg=black&userName=John&autoStart=true

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://app.toughtongueai.com') return;
  
  const { event: type, sessionId } = event.data;
  
  if (type === 'onStart') {
    console.log('Session started:', sessionId);
  }
  
  if (type === 'onStop') {
    console.log('Session ended:', sessionId);
    // Fetch analysis via your backend
    fetchAnalysis(sessionId);
  }
});

interface IframeEvent {
  event: 'onStart' | 'onStop' | 'onTerminated';
  sessionId: string;
  timestamp: number;
}

import { useEffect, useState } from 'react';

export default function Practice({ scenarioId }) {
  const [sessionId, setSessionId] = useState(null);
  
  useEffect(() => {
    const handler = (event) => {
      if (event.origin !== 'https://app.toughtongueai.com') return;
      
      if (event.data.event === 'onStart') {
        setSessionId(event.data.sessionId);
      }
      if (event.data.event === 'onStop') {
        window.location = `/results/${event.data.sessionId}`;
      }
    };
    
    window.addEventListener('message', handler);
    return () => window.removeEventListener('message', handler);
  }, []);
  
  return (
    <iframe
      src={`https://app.toughtongueai.com/embed/${scenarioId}?bg=black`}
      width="100%"
      height="600px"
      allow="microphone"
    />
  );
}

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  height: 0;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}