Calls Embedding

import { useEffect, useState } from 'react';

const VoceraCallsEmbed = ({ agentId, theme = 'light' }) => {
const [token, setToken] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const handleMessage = async (event) => {
// Token expired event
if (event.data === 'token_expired') {
try {
await refreshToken(); // See /embed/refreshing-expired-token for implementation
} catch (err) {
setError('Failed to refresh token');
}
}

    };

    const initializeToken = async () => {
      try {
        const newToken = await initToken(); // See /embed/generate-token for implementation
        setToken(newToken);
      } catch (err) {
        setError('Failed to initialize token');
      }
    };

    window.addEventListener('message', handleMessage);
    initializeToken();

    return () => window.removeEventListener('message', handleMessage);

}, [agentId]);

if (error) return <div className="error-message">{error}</div>;
if (!token || isLoading) return <div className="loading-state">Loading...</div>;

return (
<iframe
src={`https://dashboard.cekura.ai/embed/${agentId}/calls?token=${token}&theme=${theme}`}
className="w-full h-[950px] border-0"
allowFullScreen
loading="lazy"
title="Cekura Calls Embed"
/>
);
};

export default VoceraCallsEmbed;