This application powers the support site for the Birchwood Bicycle Polo Co., which sells equipment to those who play "the sport of kings." It has three main features:
- Unsatisfied customers can submit support tickets with their phone number and their problem.
- Support agents can call customers' phones from their browser to follow up on support tickets.
- Customers can also use their browser to speak with support agents live when available.
In this tutorial, we'll point out the key bits of code that make this application work. Check out the project README on GitHub to see how to run the code yourself.
The home page of our app displays a form for customers to submit support tickets. We use the Jade Template Engine to power the page.
Ticket model itself has just a few fields.
Now we can create a ticket. Next up, let's work on the dashboard for the support agent.
When a support agent visits
/Dashboard, they see all the support tickets which have been submitted.
callCustomer(). That function kicks off a Voice JS SDK call to the phone number passed as its sole parameter.
Great, now we have an interface good enough for our support agents. Next up, in order to let our agents make calls to their customers through the browser, we need to provide them an access token.
We use the Twilio helper library to generate and configure our tokens. To allow our support agents to call the phone numbers on our tickets, we use the
That method requires an identifier for a
VoiceGrant object with a TwiML Application. Twilio will send a POST request to our backend every time a user makes a browser call with the Voice JS SDK — the TwiML Application tells Twilio which URL to send that request to.
Once we are equipped with our Access Token, the next step is to set up the Twilio Device in the browser.
To use the Twilio Device in a web browser we use the twilio.js library.
We start by retrieving a capability token from the view we defined in the previous step with a POST request through AJAX. Then we enable the Twilio Device for this page by passing our token to
After that the
Twilio.Device.ready() callback will let us know when the browser is ready to make and receive calls.
Now that we have almost everything in place, it's time to see the core of this tutorial. Let's look at how we can let our agents start a call from their browsers.
When our support agent clicks "Call Customer" on a support ticket, this function initiates the call.
Twilio.Device.connect() to begin a new outgoing call. Our backend will tell Twilio how to handle this call. We therefore include a
phoneNumber parameter that we'll use in our
Great! Now our agents are able to make calls to their customers. Next up, let's look at how to connect that call to a phone number.
Whenever one of our users makes a call, Twilio will send a POST request to the URL we set on our TwiML Application - in this case,
We use TwiML to respond to the request and tell Twilio how to handle the call. Twilio will pass along the
phoneNumber parameter from the previous step in its request, which we will then Dial in our TwiML.
call view responds, Twilio completes the connection between our support agent's browser and the customer's phone. Let's go back to the browser and see how this is handled.
We use the
Twilio.Device.connect() callback to update some UI elements to notify our users that they are in a call. This function receives a Connection object, which offers some additional details about the call.
And that's all for our browser-to-phone example. Next up, we will go even further and show a browser-to-browser example.
Support tickets are useful, but sometimes a customer needs help right now. With just a little more work we let customers speak with a support agent live via a browser-to-browser call.
When a customer clicks the Call support button on the home page we again use
Twilio.Device.connect() to initiate the call. This time we don't pass any additional parameters — our backend will route this call to our support agent.
Setting up the browser-to-browser call was rather simple right? Now let's look at how our backend will route this call to our support agent.
To allow our support agents to accept incoming calls we use the
allowClientIncoming method when generating their capability token, passing
support_agent as the client's name:
capability.allowClientIncoming(page == "/dashboard" ? "support_agent" : "customer");
When Twilio sends a POST request to our
/call/connect URL, we can connect the call to our support agent by responding with a <Client> TwiML noun and the
That's how we prepare everything for accepting incoming calls. Now we should go back in the browser and see how to handle the connection this time.
When our support agent's client receives an incoming call, it will trigger the function we defined on the
connection will be in a pending state until we invoke its
.accept() method, which we do in a function bound to the Answer Call button.
We also set a
.accept() callback to update the UI once the call is live.
Great! Now we know how to work on both cases: browser-to-phone and browser-to-browser calls! Next up, we will see what happens when they decide to hang up the call.
In order to finish a call we invoke
Twilio.Device.disconnectAll(), which we wired to the Hang up button in our UI.
We also pass a callback function to
Twilio.Device.disconnect() above, to reset some UI elements.
That's it! Our Express application now powers browser-to-phone and browser-to-browser calls using the Twilio Voice JS SDK.
If you're a Node.js developer working with Twilio, you might also enjoy these tutorials:
Save time and remove distractions by adding call screening and recording to your IVR (interactive voice response) system.
Assign a unique phone number to different advertisements, you can track which ones have the best call rates and get some data about the callers themselves.
Thanks for checking this tutorial out! If you have any feedback to share with us please contact us on Twitter, we'd love to hear it.