Quick start

Installation

Include the required SDK scripts in your HTML file:

<script src="https://sdk.hidoba.com/audio.js"></script>
<script src="https://sdk.hidoba.com/sdk.js"></script>

If you need conversation history support, include the history.js script as well:

<script src="https://sdk.hidoba.com/history.js"></script>

Choose Your Authentication Method

Before implementing your first call, you need to choose between two authentication methods. See Call Initiation Methods for detailed comparison.

Client-Side Initiation: Quick setup, API key in browser (suitable for development/prototyping)
Server-Side Initiation: Secure setup, API key on server (recommended for production)

Client-Side Initiation Example
Server-Side Initiation Example

Here's a complete example using client-side authentication:

<!DOCTYPE html>
<html>
<head>
    <title>Voice Call - Client-Side</title>
    <script src="https://sdk.hidoba.com/audio.js"></script>
    <script src="https://sdk.hidoba.com/sdk.js"></script>
</head>
<body>
    <button id="callButton">Call</button>
    <button id="hangUpButton" disabled>Hang Up</button>
    <div>Status: <span id="statusText">Ready</span></div>

    <script>
        // Configuration
        const API_KEY = "YOUR_API_KEY";
        const PARTNER = "github:partner";
        const CHARACTER = "character";

        // Define callbacks
        const callbacks = {
            onCallStart: () => {
                console.log("Call starting...");
                document.getElementById('callButton').disabled = true;
                document.getElementById('hangUpButton').disabled = false;
            },
            onStatusUpdate: (status) => {
                console.log(status);
                document.getElementById('statusText').textContent = status;
            },
            onCallError: () => {
                console.log("Call error");
                document.getElementById('statusText').textContent = "Error";
                document.getElementById('callButton').disabled = false;
                document.getElementById('hangUpButton').disabled = true;
            },
            onHangUp: () => {
                console.log("Call ended");
                document.getElementById('statusText').textContent = "Call ended";
                document.getElementById('callButton').disabled = false;
                document.getElementById('hangUpButton').disabled = true;
            },
            onConnected: () => {
                console.log("Connected!");
                document.getElementById('statusText').textContent = "Connected";
            }
        };

        // Create CallManager
        const callManager = new CallManager(callbacks);

        // Button event handlers
        document.getElementById('callButton').onclick = () => {
            callManager.handleCall2(PARTNER, CHARACTER, API_KEY);
        };
        
        document.getElementById('hangUpButton').onclick = () => {
            callManager.hangUp();
        };
    </script>
</body>
</html>

Here's a complete example using server-side authentication:

<!DOCTYPE html>
<html>
<head>
    <title>Voice Call - Server-Side</title>
    <script src="https://sdk.hidoba.com/audio.js"></script>
    <script src="https://sdk.hidoba.com/sdk.js"></script>
</head>
<body>
    <button id="callButton">Call</button>
    <button id="hangUpButton" disabled>Hang Up</button>
    <div>Status: <span id="statusText">Ready</span></div>

    <script>
        // Define callbacks
        const callbacks = {
            onCallStart: () => {
                console.log("Call starting...");
                document.getElementById('callButton').disabled = true;
                document.getElementById('hangUpButton').disabled = false;
            },
            onStatusUpdate: (status) => {
                console.log(status);
                document.getElementById('statusText').textContent = status;
            },
            onCallError: () => {
                console.log("Call error");
                document.getElementById('statusText').textContent = "Error";
                document.getElementById('callButton').disabled = false;
                document.getElementById('hangUpButton').disabled = true;
            },
            onHangUp: () => {
                console.log("Call ended");
                document.getElementById('statusText').textContent = "Call ended";
                document.getElementById('callButton').disabled = false;
                document.getElementById('hangUpButton').disabled = true;
            },
            onConnected: () => {
                console.log("Connected!");
                document.getElementById('statusText').textContent = "Connected";
            }
        };

        // Mock backend function - this simulates what your server would do
        async function getSignedUrl() {
            // This is a mock of your backend call - in production, this would be on your server
            const API_KEY = "YOUR_API_KEY"; // This should be on your server, not in client code
            const CHARACTER = "github:partner/character";
            
            const response = await fetch('https://backend.funtimewithaisolutions.com/v2/calls', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-Api-Key': API_KEY,
                },
                body: new URLSearchParams({
                    character: CHARACTER
                })
            });

            if (!response.ok) {
                const errorText = await response.text();
                throw new Error(`Failed to create call: ${response.status} ${errorText}`);
            }

            const callData = await response.json();
            return callData.data.signedUrl;
        }

        // Create CallManager
        const callManager = new CallManager(callbacks);

        // Button event handlers
        document.getElementById('callButton').onclick = async () => {
            try {
                // Get signed URL (in production, this would be a call to your backend)
                const signedUrl = await getSignedUrl();
                
                // Use signed URL with SDK
                await callManager.handleCall2(null, null, signedUrl);
                
            } catch (error) {
                console.error('Failed to start call:', error);
                document.getElementById('statusText').textContent = 'Failed to start call';
            }
        };
        
        document.getElementById('hangUpButton').onclick = () => {
            callManager.hangUp();
        };
    </script>
</body>
</html>

Next Steps

For Client-Side Implementation:

Replace YOUR_API_KEY, PARTNER, and CHARACTER with your actual credentials
See SDK Setup for credential setup and configuration

For Server-Side Implementation:

Implement server-side endpoint using Backend API Reference
See Call Initiation Methods for security considerations

Additional Features:

Device Management: See SDK Reference for microphone/speaker selection
Conversation History: See Features for real-time transcript display
Advanced Configuration: See SDK Setup for detailed setup options

Installation​

Choose Your Authentication Method​

Next Steps​

For Client-Side Implementation:​

For Server-Side Implementation:​

Additional Features:​