Lukas Narus
02/21/2025, 11:34 AM123
)
I read that VAPI currently does not handle DTMF digits, so I figured I could use TWIML to handle that and reroute the call to VAPI.
I have two Twilio endpoints now. The example code gathers three digits and redirects the call to VAPI:
/api/twilio/call
import { NextResponse } from "next/server";
const VoiceResponse = require("twilio").twiml.VoiceResponse;
export async function POST(): Promise<Response> {
const twiml = new VoiceResponse();
twiml.gather({
numDigits: 3,
method: "POST",
action: `${process.env.NEXT_PUBLIC_VAPI_SERVER_URL}/api/twilio/gather`,
});
twiml.redirect(
{
method: "POST",
},
"https://api.vapi.ai/twilio/inbound_call",
);
console.log("twiml", twiml.toString());
return new NextResponse(twiml.toString(), {
headers: {
"Content-Type": "text/xml",
},
});
}
/api/twilio/gather
import { NextResponse } from "next/server";
const VoiceResponse = require("twilio").twiml.VoiceResponse;
export async function POST(req: Request): Promise<Response> {
const formData = await req.formData();
console.log("Digits", formData.get("Digits"));
const twiml = new VoiceResponse();
twiml.redirect(
{
method: "POST",
},
"https://api.vapi.ai/twilio/inbound_call",
);
return new NextResponse(twiml.toString(), {
headers: {
"Content-Type": "text/xml",
},
});
}
*Problem*: after I gather digits, call status changes from ringing
to in-progress
. That leads to a 400
error from VAPI:
{
"message": [
"CallStatus must be one of the following values: ringing"
],
"error": "Bad Request",
"statusCode": 400
}
How can I solve this issue. Any other solutions for passing the id to the app is helpful.Vapi
02/22/2025, 11:49 AMShubham Bajaj
02/22/2025, 11:55 AMShubham Bajaj
02/22/2025, 11:55 AM