What is the method for establishing a callback for call status using the Twilio Voice JavaScript SDK?

Currently, I am in the process of utilizing the Twilio Programmable Voice JavaScript SDK to initiate an outbound call with a statusCallback and statusCallbackEvent in order to update another system once the call is finished.

Below is the snippet of my code.

async function makeOutgoingCall() {
 const params = {
   // fetching the phone number to dial from the DOM
   To: phoneNumberInput.value,
   CallerId: myCallerId,
   statusCallback: OutBoundCallbackURL,
   statusCallbackEvent: 'completed'
 };

console.log(params);

if (device) {
  log(`Attempting to call ${params.To} from caller id: ${params.CallerId} ...`);

  // Twilio.Device.connect() yields a Call object
  const call = await device.connect({ params });
    dtmf_1.onclick = function(){call.sendDigits('1')};
    dtmf_2.onclick = function(){call.sendDigits('2')};
    dtmf_3.onclick = function(){call.sendDigits('3')};
    dtmf_4.onclick = function(){call.sendDigits('4')};
    dtmf_5.onclick = function(){call.sendDigits('5')};
    dtmf_6.onclick = function(){call.sendDigits('6')};
    dtmf_7.onclick = function(){call.sendDigits('7')};
    dtmf_8.onclick = function(){call.sendDigits('8')};
    dtmf_9.onclick = function(){call.sendDigits('9')};
    dtmf_0.onclick = function(){call.sendDigits('0')};
    dtmf_s.onclick = function(){call.sendDigits('*')};
    dtmf_h.onclick = function(){call.sendDigits('#')};

  /*
   * append listeners to the Call
   * "accepted" indicates the call has been successfully connected and the state is now "open"
   */
  call.on('accept', updateUIAcceptedOutgoingCall);
  call.on('disconnect', updateUIDisconnectedOutgoingCall);
  call.on('cancel', updateUIDisconnectedOutgoingCall);
  call.on('reject', updateUIDisconnectedOutgoingCall);

  outgoingCallHangupButton.onclick = () => {
    log('Hanging up ...');
    call.disconnect();
  };
} else {
  log('Unable to initiate call.');
}
}

I am aiming for it to return TwiML in the following format:

<Response>
<Dial answerOnBridge="true" callerId="+19876543210">
    <Number
     statusCallbackEvent="completed"
     statusCallback="https://myapp.com/calls/events"
     statusCallbackMethod="POST">
        +12349013030
    </Number>
</Dial>
</Response>

Unfortunately, it is instead returning the following:

<Response>
<Dial answerOnBridge="true" callerId="+19876543210">
    <Number>+1123456789</Number>
</Dial>
</Response>

I have been unable to locate a comprehensive list of potential parameters for device.connect(). I am unsure if that's the aspect I need to modify.

Could someone provide assistance with this issue?

Answer №1

To update the response in this TwiML, you'll likely need to make changes on the server side. Start by tracing back from where you generate the Twilio Access Token that the client initially uses to register with Twilio. Find the server and specific handler responsible for creating the TwiML response.

For example, if an outgoingApplicationSid is used to create the voice grant in the access token, locate the corresponding TwiML app in the Twilio console and follow the Voice Request URL it's configured with to find the server that handles the response creation.


Based on some assumptions:

  1. It seems like you may have used TwilioDevEd/voice-javascript-sdk-node as a starting point for your project.
  2. If assumption 1 is correct, you probably set up a TwiML app in the Twilio console with a Voice Request URL pointing to your locally running node server using ngrok as instructed in the README.

If these assumptions hold true, search for the voiceResponse handler in your project and update the twiml.dial() call to customize the generated TwiML.

When Twilio requests your TwiML app, it includes all parameters passed to the connect method in the request body. It seems that your existing program uses the To and CallerId parameters. You'll also need to include the statusCallback and statusCallbackEvent parameters in the dial, like this:

const { statusCallback, statusCallbackEvent, CallerId, To } = req.body;
const twiml = new VoiceResponse();
const dial = twiml.dial({ callerId: CallerId });
dial.number({ statusCallback, statusCallbackEvent }, To);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Detecting race conditions in React functional components promises

There's an INPUT NUMBER box that triggers a promise. The result of the promise is displayed in a nearby DIV. Users can rapidly click to increase or decrease the number, potentially causing race conditions with promises resolving at different times. T ...

Deliver Compressed Files following Angular CLI --Prod Configuration

After using the Angular CLI's command to minify my basic Angular app, a dist folder was generated with the project folder and minified files. However, when I run ng serve, it always serves the unminified development files, whether it's in the roo ...

Utilizing dynamic, MongoDB-inspired expressions to eliminate specific elements from an array

In the process of creating a lightweight database similar to MongoDB, I am incorporating an object-oriented query language where references can be functions or object references: foo.users.find( args ); foo.users.remove( args ); The 'args' para ...

Verify the accuracy of quiz responses with PHP and AJAX

I am working on a picture quiz that has one input field for each image. I am looking for a solution to verify if the value entered into the input field matches the correct answer. If it does match, I need to perform certain operations like adding or removi ...

I am looking to update the background color of the material UI helper text

In the image below, you can see that my background color is gray and my text field color is white. When an error is shown, the text field's white color extends and the password error message doesn't look good. I want the text field to remain whit ...

The URL dynamically updates as the Angular application loads on GitHub Pages

Encountering an unusual issue when trying to access my angular website on GitHub pages. The URL unexpectedly changes upon opening the page. Please check it out at this link: The original expected URL should be However, as the page loads, the URL gets alt ...

Creating a drop-down menu that aligns perfectly under the bar in Material-UI: What you need to know

While working with Material-UI, I encountered a problem with my drop-down menu. Every time I click on it, it covers the bar instead of appearing below it (see image links below). https://i.stack.imgur.com/1Y8CL.jpg https://i.stack.imgur.com/emf87.jpg Is ...

Troubleshooting Problems with IndexOf in Javascript/Google Apps Script

Although I've found similar questions about the IndexOf function, none of the answers have resolved my specific issue. In my case, I have a large 2D array containing names and ID codes from a spreadsheet, which I read into an array named rIdr in my a ...

Ways to refresh a page after clicking a button inside the modal box

As a beginner in PHP and JavaScript, I am facing an issue with refreshing the page view_create_journals.php when clicking on the change button in the modal. I have added a function to the change button but it doesn't seem to be working. I'm reall ...

Can you provide guidance on implementing StyledComponents within the app folder of Next.js version 13?

Quoting information from the Next.js documentation: Attention: CSS-in-JS libraries that rely on runtime JavaScript are currently not compatible with Server Components. The following libraries are supported in Client Components within the app directory: s ...

Unable to retrieve AJAX response

I've been working on a page where I'm using AJAX to fetch data based on the selection of radio buttons. The three options available are 'Unapproved', 'Approved' and 'All'. My goal is to display the corresponding user ...

Seeking assistance in comprehending the method for styling table data using inline CSS in a JavaScript file

I am currently using a JavaScript file that was created for me to update form data based on user selections and display radio buttons along with the corresponding costs. Although the inline CSS in this script works perfectly fine in Chrome and Firefox, it ...

What are the steps to crafting a basic JavaScript or jQuery function within CodeIgniter?

I'm currently working on creating a basic JavaScript function within CodeIgniter that is triggered when a radio button is clicked. <input type="radio" name="amount" value="<?php echo $plan['amount']; ?>" onclick="fn()" /> The J ...

When invoking a Javascript function within an onclick event, make sure to avoid creating a new

There's a function named save in my code that is responsible for saving data from a timer. The Model class looks like this: var Schema = mongoose.Schema; var Timer = new Schema({ Time: {type: Number}, Desc: {type: String}, Doc: {type: S ...

Utilize a display value while maintaining the v-model binding in Vue.js

Can't seem to figure this one out. I'm using Quasar Framework, but it seems like more of a Vue issue. I have a multiple-select UI component with a list of objects as options that I want to display. The v-model will bind to the currently selected ...

Issue with Vue.js: document.querySelector is returning a null value even though the element clearly exists

I'm currently working on implementing a responsive navbar following Kevin Powell's tutorial, but I've run into an issue. For some reason, when I try to select the element with the class 'primary-navigation' using 'const primar ...

Adjust the quantity of divs shown depending on the value entered in a text input field

It seems like I am on the right track, but there is something simple that I am missing. I'm currently utilizing the jQuery knob plugin to update the input field. $('document').ready(function() { $(".knob").knob({ c ...

Incorporating Numerous Location Pointers in Angular-google-maps

I've been struggling to show multiple map markers in my Angular project. I have a service called retsAPI that queries a local MLS database for home listings, and I'm attempting to display these items on a Google map. Below is my controller code. ...

Using only CSS to reverse the order of Bootstrap rows within a forEach statement in a .php file

I am facing a challenge in reversing rows within a forEach statement. For instance, in the first row, the content's div (title, text) should be on the left side and the image on the right side. In the second row, it should be reversed, with the image ...

Receiving Nothing But Null Values from MongoDB

Why is my code returning null? async function run() { try { await client.connect(); const productsCollection = client.db("inventory").collection("items"); // Retrieve All Products app.get('/products', asyn ...