"use client";
import { useState, useEffect } from "react";
import Script from "next/script";
interface ElevenLabsWidgetProps {
agentId: string;
placeholder?: string;
}
export default function ElevenLabsWidget({
agentId,
placeholder,
}: ElevenLabsWidgetProps) {
const [isActive, setIsActive] = useState(false);
const [scriptLoaded, setScriptLoaded] = useState(false);
// Listen for custom event to activate the widget
useEffect(() => {
const handleActivate = () => {
setIsActive(true);
};
window.addEventListener("elevenlabs-activate", handleActivate);
return () =>
window.removeEventListener("elevenlabs-activate", handleActivate);
}, []);
if (!isActive) {
return (
🎙️
{placeholder || 'Click "Start Conversation Now" to begin'}
Voice AI powered by ElevenLabs
);
}
return (
{/* Load the ElevenLabs script only when activated */}