Skip to Content
React/Next.js SDK

Installation Documentaion For React Based Frameworks

This component provides a minimal React implementation of the AGENQ Voice Agent widget. It dynamically loads the AGENQ SDK from a CDN and mounts the widget on demand through a toggle button.

Developers can activate or deactivate the agent from the UI or programmatically through a simple method call.

Component: VoiceAgent.tsx

import { useEffect, useRef, useState } from "react";
 
declare global {
  interface Window {
    renderAGENQWidget?: (containerId: string, options: object) => void;
    voiceAgent?: { toggleAgent: () => void };
  }
}
 
export default function VoiceAgent() {
  const [active, setActive] = useState(false);
  const [scriptLoaded, setScriptLoaded] = useState(false);
  const containerRef = useRef<HTMLDivElement | null>(null);
 
  // Load AGENQ SDK script once
  useEffect(() => {
    const url =
      "https://cdn.agenqglobal.com/cdn/clientsdk/agenq-client-sdk-groupbenifitz-prod-a-001.iife.js";
    const existing = document.querySelector(`script[src="${url}"]`);
 
    if (!existing) {
      const script = document.createElement("script");
      script.src = url;
      script.async = true;
 
      script.onload = () => {
        console.log("AGENQ script loaded successfully.");
        setScriptLoaded(true);
      };
 
      script.onerror = () => console.error("Failed to load AGENQ script:", url);
      document.body.appendChild(script);
    } else {
      setScriptLoaded(true);
    }
 
    // Expose instance globally for console access
    window.voiceAgent = {
      toggleAgent: () => toggleAgent(),
    };
 
    // Cleanup when component unmounts
    return () => {
      if (containerRef.current) containerRef.current.innerHTML = "";
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
  // Activate / Deactivate Agent
  const toggleAgent = () => {
    const nextActive = !active;
    setActive(nextActive);
 
    if (nextActive && scriptLoaded) {
      if (containerRef.current) {
        containerRef.current.innerHTML = "";
        window.renderAGENQWidget?.("agent-container", {});
        console.log("Agent activated.");
      }
    } else {
      if (containerRef.current) {
        containerRef.current.innerHTML = "";
        console.log("Agent deactivated.");
      }
    }
  };
 
  return (
    <div className='voice-agent'>
      <button onClick={toggleAgent} className='btn'>
        {active ? "Deactivate" : "Activate"}
      </button>
 
      <div
        id='agent-container'
        ref={containerRef}
        style={{ display: active ? "block" : "none" }}></div>
    </div>
  );
}

Usage

Import and use the component inside your React application:

import VoiceAgent from "./VoiceAgent";
 
function App() {
  return (
    <div>
      <VoiceAgent />
    </div>
  );
}
 
export default App;

Notes on usage

  1. The widget loads dynamically from the AGENQ CDN and initializes only upon activation.

  2. The SDK script is loaded once during component initialization for optimal performance.

  3. Developers can also control the agent programmatically from the browser console:

    window.voiceAgent.toggleAgent();

Notes

  • The SDK script loads only once per page load.
  • The container (#agent-container) is cleared when the widget is deactivated or destroyed.
  • Exposing the component globally (window.voiceAgent) enables remote or programmatic activation for testing and debugging.
  • This implementation ensures efficient performance, minimal DOM pollution, and clean teardown.
Last updated on
Introduction