Iframe Events Example

This example demonstrates how to use iframe events with embedded Archie AI scenarios.

Demo

Instructions:

  • Click anywhere in the iframe to trigger the onClick event
  • Press the Start button to trigger the onStart event
  • Press the Stop button to trigger the onStop event
  • After session stops, submission will trigger the onSubmit event
  • Note: The iframe will expand once when clicked (onClick event)

Event Log

No events yet. Interact with the iframe to see events.

Code Examples

<!-- Basic event listener for all iframe events -->
<iframe
  src="https://example.com/embed/your-scenario-id"
  id="archie-embed"
  width="100%"
  height="400px"
  frameborder="0"
  allow="microphone"
></iframe>

<script>
  window.addEventListener('message', (event) => {
    // Optional: verify the origin for security
    // if (event.origin !== 'https://example.com') return;

    const data = event.data;

    if (data && data.event) {
      switch (data.event) {
        case 'onStart':
          console.log('Session started:', data);
          // Handle session start
          break;

        case 'onStop':
          console.log('Session stopped:', data);
          // Handle session end
          break;

        case 'onSubmit':
          console.log('Submission completed:', data);
          // Handle submission completion
          break;

        case 'onClick':
          console.log('Iframe clicked:', data);
          // Handle iframe click
          break;
      }
    }
  });
</script>