Skip to content

Notes on creating a bundle to do web calls in Retell

This is based on the RetellAI webcall documentation as of March 8, 2025. If you are reading this at a significantly later date, it is possible this process will not work.

The general process to use webcalls without running a Node server requires you to use a bundled version of the Retell JS Client SDK. You can either create it yourself, or use an already-created bundle. To do it yourself:

  • Create a bundle of the npm package retell-client-js-sdk. You can do this using parcel as follows:

    • Install the latest versions of npm and nodejs
    • Create a directory and create a npm project with # npm init -y
    • Use npm to install retell-client-js-sdk
    • create src/index.js
    src/index.js
    import { RetellWebClient } from 'retell-client-js-sdk';

// Initialize Retell Web Client globally
window.retellWebClient = new RetellWebClient();
    • create the bundle using # npx parcel build src/index.js --out-dir dist
    • copy the bundle to your webserver

Alternatively, if you wish to use a pre-created bundle, you can use the one I have created. It is accessible via Github, with source file available on JSDelivr. As of the date of these docs, the current bundles are here: js and minified.

  • In either case, build a front end that loads the created bundle and calls your backend server to fetch an access token. Here's an example:

    example.html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Start Web Call</title>
    <script src="https://cdn.jsdelivr.net/gh/reecesel/retell-client-js-sdk@main/dist/retell-bundle-2.0.6.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        button {
            padding: 15px 30px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>Start a Web Call</h1>
    <p>Click the button below to start or stop a web call.</p>

    <button id="start-web-call">Start Web Call</button>

    <script>
        const retellWebClient = window.retellWebClient;
        let isCallInProgress = false;  // Track call status

        // Button click handler
        document.getElementById('start-web-call').addEventListener('click', async function() {
            if (isCallInProgress) {
                await stopCall();  // Stop call if in progress
            } else {
                await startCall();  // Start call if not in progress
            }
        });

        // Start the call
        async function startCall() {
            const agentId = "your_agent_id_here"; // Replace with actual agent ID

            // Get access token from the backend
            const response = await fetch('https://example-backend-server.org/create-web-call', {
                method: 'POST',
                body: JSON.stringify({ agent_id: agentId }),
                headers: { 'Content-Type': 'application/json' }
            });

            if (!response.ok) {
                console.error('Error fetching the access token.');
                return;
            }

            const data = await response.json();
            const accessToken = data.access_token;

            try {
                await retellWebClient.startCall({ accessToken });
                isCallInProgress = true;  // Update call status
                document.getElementById('start-web-call').textContent = "Stop Web Call";  // Change button text
                document.getElementById('start-web-call').style.backgroundColor = "#f44336";  // Change button color to red
            } catch (error) {
                console.error("Error starting the call:", error);
            }
        }

        // Stop the call
        async function stopCall() {
            try {
                await retellWebClient.stopCall();
                isCallInProgress = false;  // Update call status
                document.getElementById('start-web-call').textContent = "Start Web Call";  // Reset button text
                document.getElementById('start-web-call').style.backgroundColor = "#4CAF50";  // Reset button color to green
            } catch (error) {
                console.error("Error stopping the call:", error);
            }
        }
    </script>
</body>
</html>

  • Create a backend endpoint that will fetch the access token

    • Here is a simple example of a FastAPI endpoint that will accomplish this:
    fastapi_snippet.py
    class WebCallRequest(BaseModel):
    agent_id: str  # Expecting agent_id to be a string in the body

@app.post("/create-web-call")
async def create_web_call(request: WebCallRequest):
    """
    Endpoint to create a web call using the Retell API.
    """
    # Initialize the Retell client
    client = Retell(api_key=RETELL_API_KEY)

    try:
        # Call the Retell API to create a web call
        web_call_response = client.call.create_web_call(
            agent_id=request.agent_id  # Use agent_id from the request body
        )

        # Return the response from Retell
        return {
            "agent_id": web_call_response.agent_id,
            "access_token": web_call_response.access_token,
            "call_id": web_call_response.call_id,
            "call_status": web_call_response.call_status
        }

    except Exception as e:
        # Handle any errors that occur
        raise HTTPException(status_code=500, detail=str(e))