Call

Add a hooman voice agent to your website with a embeddable javascript widget.

Quick Start

Get your voice bot up and running in minutes. Simply include our script and initialize the widget with your agent ID. The integration takes just a few lines of code and works across all modern browsers with microphone support.

HTML Integration

<!DOCTYPE html>
<html lang="en">
<body>
    <!-- Your website content -->
    <div id="voice-bot-container">
        <!-- The bot will render itself here -->
    </div>
    
    <!-- Load the Hooman Voice Bot script -->
    <script src="https://core.hoomanlabs.com/scripts/web"></script>
    
    <script>
        // Initialize the voice bot
        const bot = new HoomanVoiceBot({
            agentId: "your-agent-id",
            parent: document.getElementById("voice-bot-container"),
            context: JSON.stringify({ name: "Customer" }),
            onCallId: (callId) => {
                console.log("Call started with ID:", callId);
            }
        });

        // Cleanup when page unloads
        window.addEventListener('beforeunload', () => {
            bot.handleCleanup();
        });
    </script>
</body>
</html>

React Integration

export default function VoiceBotDemo() {
    const botContainerRef = useRef<HTMLDivElement>(null);
    const botRef = useRef<any>(null);
    const [callId, setCallId] = useState<string | null>(null);

    useEffect(() => {
        // Dynamically load the script
        const script = document.createElement("script");
        script.src = "https://core.hoomanlabs.com/scripts/web";
        script.async = true;
        script.onload = () => {
            // @ts-ignore
            if (window.HoomanVoiceBot) {
                // @ts-ignore
                botRef.current = new window.HoomanVoiceBot({
                    agentId: "your-agent-id",
                    parent: botContainerRef.current,
                    context: JSON.stringify({ name: "Customer" }),
                    onCallId: (callId: string) => {
                        console.log("Call started with ID:", callId);
                        setCallId(callId);
                    },
                });
            }
        };
        document.body.appendChild(script);

        // Cleanup
        return () => {
            botRef.current?.handleCleanup();
            document.body.removeChild(script);
        };
    }, []);

    return (
        <div className="w-full h-full">
            <div
                ref={botContainerRef}
                id="hooman-voice-bot-container"
                style={{ width: "100%", height: "100%", position: "relative" }}
            >
                {/* The bot will render itself here */}
            </div>
            {callId && (
                <div className="text-lg text-muted-foreground bottom-5 right-5 absolute">
                    Call ID: {callId}
                </div>
            )}
        </div>
    );
}

Voice Bot Options

The HoomanVoiceBot constructor accepts the following options:

Option	Type	Required	Description
agentId	string	yes	The unique identifier for your AI agent.
parent	HTMLElement	yes	DOM element where the voice bot widget will be rendered
context	string	no	JSON string containing additional context data to pass to the agent (default: "{}")
onCallId	function	no	Callback function that receives the call ID when a conversation starts
fg	string	no	Foreground color for text and UI elements (default: "#DEE2E6")
bg	string	no	Background color for the widget container (default: "#141414")
accent	string	no	Accent color for buttons and highlights (default: "#F80759")
light	boolean	no	If true, inverts the default color scheme for light backgrounds
border	string	no	Border color for the widget container (default: calculated from fg with 15% opacity)

Cleanup

Always call the handleCleanup() method when removing the widget to properly clean up resources:

bot.handleCleanup();

This method performs the following actions:

Closes WebSocket connections
Stops audio contexts
Releases microphone access
Resets the widget to idle state

The voice bot widget has several states that users will experience:

Idle: Initial state showing "click to start" - ready to begin a conversation
Starting: Transition state while establishing connection
Listening: Bot is actively listening for user speech
Thinking: Bot is processing the user's input and generating a response
Speaking: Bot is playing back its response to the user

Compatibility

The voice bot requires:

WebSocket Support: For real-time communication
Web Audio API: For audio processing and playback
MediaRecorder API: For microphone access
AudioWorklet: For real-time audio processing

Supported Browsers:

Chromimum based browsers
Firefox based browsers
Safari based browsers

Domain Whitelisting

Important: Before going live, contact our support team to whitelist your domain for production use.