Hi, I am looking to initiate a call from my backend server and have the frontend start it using the callid. The flow would be something like: Step 1. Initiate a call from my backend (by making a post request to /call api endpoint) Step 2. Pass this callId to the frontend Step 3. The frontend starts or joins the call using this callId. vapi.start() takes in assistantId, but does not seems to take a callId. Is there a way to achieve this? Or can the frontend start the call using some metadata? If yes, what metadata to use?

I'd also be very interested in hearing about this.

Currently, the Vapi Web SDK does not support joining an existing call from the browser using a `callId`; it only allows starting new calls with an

assistantId

or configuration. If your goal is to monitor or control a server-initiated call, you can use the

listenUrl

and

controlUrl

from the backend response, but not join as a participant. Could you clarify if your frontend user needs to actively participate in the call, or just monitor/control it? This will help suggest the best approach for your use case. Sources: - [Web SDK documentation](https://docs.vapi.ai/sdk/web#start) - [Call Features documentation](https://docs.vapi.ai/calls/call-features#obtaining-urls-for-call-control-and-listen)

I would want the frontend user to actively participate in the call and to be able to end the call whenever the user wants.

Currently, the Vapi Web SDK does not support joining an existing call from the browser using a

callId

. The

.start()

method only allows you to initiate a new call with an

assistantId

or configuration object. There is no supported way for a frontend user to join a server-initiated call as an active participant. For now, only monitoring or controlling a call via `listenUrl`/`controlUrl` is possible, not joining as a participant. See: [Web SDK documentation](https://docs.vapi.ai/sdk/web#start) Sources: - [Web SDK documentation](https://docs.vapi.ai/sdk/web#start) - [Call Features documentation](https://docs.vapi.ai/calls/call-features#obtaining-urls-for-call-control-and-listen)

Then how do we protect the public api key from being exposed on the client side? If both the agent-id and the public-key is exposed on the client side then its a huge security risk.

To protect your API key, generate a short-lived JWT on your backend and use it to initialize the Vapi Web SDK on the client:

js
import Vapi from "@vapi-ai/web";
const vapi = new Vapi("your-jwt-here");

This way, your public API key stays hidden, and you can control token scope and expiry for added security. See: [Web SDK documentation](https://docs.vapi.ai/sdk/web#usage) Source: - [Web SDK documentation](https://docs.vapi.ai/sdk/web#usage)

^^

Thanks. I am using vanila javascript so i am following the documentation as mentioned here https://github.com/VapiAI/client-sdk-html-script-tag so i will look into how I can use a short lived jwt. I tried an alternate way - restricting the Allowed Origins to a given url when creating the Public Key. But when i tested it from a local file (using file:// url ), it still works. Allowed Origin setting is being ignored.

Currently, the Vapi Web SDK does not support joining an existing call from the browser using a `callId`; only new calls can be started with an

assistantId

or configuration. Monitoring or controlling a call via `listenUrl`/`controlUrl` is possible, but active participation from the frontend is not supported ([Web SDK documentation](https://docs.vapi.ai/sdk/web#start)). Clarifying question: Would monitoring or controlling the call from the frontend (without active participation) meet your needs, or is real-time participation by the frontend user essential for your use case? Sources: - [Web SDK documentation](https://docs.vapi.ai/sdk/web#start) - [Call Features documentation](https://docs.vapi.ai/calls/call-features#obtaining-urls-for-call-control-and-listen)

Yeah, that would be great.