Embed Widget

<!-- Responsive container with 16:9 aspect ratio -->
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe 
    src="https://www.talentsprout.ai/embed/interview/YOUR_INTERVIEW_ID"
    allow="camera; microphone; autoplay; fullscreen; display-capture"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 12px;"
  ></iframe>
</div>

import SwiftUI
import WebKit

struct InterviewWebView: UIViewRepresentable {
    let interviewId: String
    var onReady: (() -> Void)?
    var onStarted: ((String) -> Void)?
    var onCompleted: ((String, String?, Bool) -> Void)?
    
    func makeUIView(context: Context) -> WKWebView {
        let config = WKWebViewConfiguration()
        config.allowsInlineMediaPlayback = true
        config.mediaTypesRequiringUserActionForPlayback = []
        
        // Set up message handler for events
        let contentController = WKUserContentController()
        contentController.add(context.coordinator, name: "talentsprout")
        config.userContentController = contentController
        
        // Inject script to forward postMessage events to native
        let script = WKUserScript(source: """
            window.addEventListener('message', function(event) {
                if (event.data && event.data.type && 
                    event.data.type.startsWith('talentsprout:')) {
                    window.webkit.messageHandlers.talentsprout.postMessage(event.data);
                }
            });
        """, injectionTime: .atDocumentEnd, forMainFrameOnly: false)
        contentController.addUserScript(script)
        
        let webView = WKWebView(frame: .zero, configuration: config)
        let url = URL(string: "https://www.talentsprout.ai/embed/interview/\(interviewId)")!
        webView.load(URLRequest(url: url))
        
        return webView
    }
    
    func updateUIView(_ webView: WKWebView, context: Context) {}
    
    func makeCoordinator() -> Coordinator { Coordinator(self) }
    
    class Coordinator: NSObject, WKScriptMessageHandler {
        var parent: InterviewWebView
        
        init(_ parent: InterviewWebView) { self.parent = parent }
        
        func userContentController(_ controller: WKUserContentController,
                                   didReceive message: WKScriptMessage) {
            guard let body = message.body as? [String: Any],
                  let type = body["type"] as? String else { return }
            
            let data = body["data"] as? [String: Any]
            
            switch type {
            case "talentsprout:ready":
                parent.onReady?()
            case "talentsprout:started":
                parent.onStarted?(data?["sessionId"] as? String ?? "")
            case "talentsprout:completed":
                parent.onCompleted?(
                    data?["sessionId"] as? String ?? "",
                    data?["candidateId"] as? String,
                    data?["success"] as? Bool ?? false
                )
            default: break
            }
        }
    }
}

// Usage:
// InterviewWebView(
//     interviewId: "YOUR_INTERVIEW_ID",
//     onCompleted: { sessionId, candidateId, success in
//         print("Interview completed: \(sessionId)")
//     }
// )

import android.webkit.*
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import org.json.JSONObject

class InterviewActivity : AppCompatActivity() {
    private lateinit var webView: WebView
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val interviewId = intent.getStringExtra("INTERVIEW_ID") ?: return
        
        webView = WebView(this).apply {
            settings.javaScriptEnabled = true
            settings.mediaPlaybackRequiresUserGesture = false
            settings.domStorageEnabled = true
            
            // Add JavaScript interface for receiving events
            addJavascriptInterface(TalentSproutBridge(), "TalentSproutNative")
            
            webChromeClient = object : WebChromeClient() {
                override fun onPermissionRequest(request: PermissionRequest) {
                    runOnUiThread { request.grant(request.resources) }
                }
            }
            
            // Inject event forwarding script after page loads
            webViewClient = object : WebViewClient() {
                override fun onPageFinished(view: WebView?, url: String?) {
                    view?.evaluateJavascript("""
                        window.addEventListener('message', function(event) {
                            if (event.data && event.data.type && 
                                event.data.type.startsWith('talentsprout:')) {
                                TalentSproutNative.onEvent(JSON.stringify(event.data));
                            }
                        });
                    """.trimIndent(), null)
                }
            }
            
            loadUrl("https://www.talentsprout.ai/embed/interview/$interviewId")
        }
        setContentView(webView)
    }
    
    inner class TalentSproutBridge {
        @JavascriptInterface
        fun onEvent(jsonData: String) {
            val json = JSONObject(jsonData)
            val type = json.getString("type")
            val data = json.optJSONObject("data")
            
            runOnUiThread {
                when (type) {
                    "talentsprout:ready" -> onInterviewReady()
                    "talentsprout:started" -> onInterviewStarted(
                        data?.optString("sessionId") ?: ""
                    )
                    "talentsprout:completed" -> onInterviewCompleted(
                        data?.optString("sessionId") ?: "",
                        data?.optString("candidateId"),
                        data?.optBoolean("success") ?: false
                    )
                }
            }
        }
    }
    
    private fun onInterviewReady() { /* Widget loaded */ }
    private fun onInterviewStarted(sessionId: String) { /* Interview began */ }
    private fun onInterviewCompleted(sessionId: String, candidateId: String?, success: Boolean) {
        // Navigate to results or thank you screen
        finish()
    }
}

// AndroidManifest.xml - Add these permissions:
// <uses-permission android:name="android.permission.CAMERA" />
// <uses-permission android:name="android.permission.RECORD_AUDIO" />
// <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

import React, { useRef, useEffect, useCallback } from 'react';
import { WebView } from 'react-native-webview';
import { Platform, PermissionsAndroid } from 'react-native';

interface InterviewScreenProps {
  interviewId: string;
  onReady?: () => void;
  onStarted?: (sessionId: string) => void;
  onCompleted?: (data: { sessionId: string; candidateId?: string; success: boolean }) => void;
}

export function InterviewScreen({ 
  interviewId, 
  onReady, 
  onStarted, 
  onCompleted 
}: InterviewScreenProps) {
  const webViewRef = useRef(null);

  // Request permissions on Android
  useEffect(() => {
    if (Platform.OS === 'android') {
      PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.CAMERA,
        PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      ]);
    }
  }, []);

  // Script to forward postMessage events to React Native
  const injectedJavaScript = `
    window.addEventListener('message', function(event) {
      if (event.data && event.data.type && event.data.type.startsWith('talentsprout:')) {
        window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
      }
    });
    true;
  `;

  // Handle messages from WebView
  const handleMessage = useCallback((event) => {
    try {
      const { type, data } = JSON.parse(event.nativeEvent.data);
      
      switch (type) {
        case 'talentsprout:ready':
          onReady?.();
          break;
        case 'talentsprout:started':
          onStarted?.(data?.sessionId);
          break;
        case 'talentsprout:completed':
          onCompleted?.(data);
          break;
      }
    } catch (e) {
      console.warn('Failed to parse WebView message:', e);
    }
  }, [onReady, onStarted, onCompleted]);

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: `https://www.talentsprout.ai/embed/interview/${interviewId}` }}
      injectedJavaScript={injectedJavaScript}
      onMessage={handleMessage}
      mediaPlaybackRequiresUserAction={false}
      allowsInlineMediaPlayback={true}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      allowsFullscreenVideo={true}
      androidLayerType="hardware"
      onPermissionRequest={(request) => request.grant()}
      style={{ flex: 1 }}
    />
  );
}

// Usage:
// <InterviewScreen
//   interviewId="YOUR_INTERVIEW_ID"
//   onCompleted={(data) => {
//     navigation.navigate('ThankYou', { sessionId: data.sessionId });
//   }}
// />