Browser Calls

Learn how to use Twilio Client to make browser-to-phone and browser-to-browser calls with ease. The unsatisfied customers of the Birchwood Bicycle Polo Co. need your help!

Start Tutorial

What does this thing do?

This Laravel web application shows how you can use Twilio Client to make browser-to-phone and browser-to-browser calls.

Browser Calls home page

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.

Let's get started! Click the right arrow above to advance to the next code snippet.

See also:

Submit a support ticket

The home page of our app displays a form for customers to submit support tickets. We render a form template as part of the home page and handle the form submission in this controller.

The Ticket model itself has just a few fields. Here's the schema migration used to create it:

    'tickets', function (Blueprint $table) {


See also:

The support dashboard

When a support agent visits /support/dashboard, they see all the support tickets which have been submitted.

Browser Calls support dashboard

Each ticket also has a "Call Customer" button which invokes a JavaScript function we wrote named callCustomer(). That function kicks off a Twilio Client call to the phone number passed as its sole parameter.

Generate a capability token

Before our users can make calls with Twilio Client in their browser, we need to provide them with a capability token.

We use the twilio-php helper library to generate and configure our capability tokens. To allow our support agents to call the phone numbers on our tickets, we use the allowClientOutgoing() method.

That method requires an identifier for a TwiML Application. Twilio will send a POST request to our backend every time a user makes a Twilio Client call — the TwiML Application tells Twilio which URL to send that request to.

See also:

Set up Twilio Client

To use Twilio Client 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 an AJAX request. We then enable Twilio Client for this page by passing our token to Twilio.Device.setup().

The Twilio.Device.ready() callback lets us know when the browser is ready to make and receive calls.

See also:

Call a customer (browser-to-phone)

When our support agent clicks "Call Customer" on a support ticket, this function initiates the call.

We use Twilio.Device.connect() to begin a new outgoing call. Our backend will tell Twilio how to handle this call, so we include a phoneNumber parameter that we'll use in our newCall view.

Let's look at that view next.

See also:

Connect the 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, /support/call.

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.

See also:

The call is live

After our call view responds, Twilio completes the connection between our support agent's browser and the customer's phone.

We use the Twilio.Device.connect() callback to update some UI elements and make it clear our user is in a call. This function receives a Connection object, which offers some additional details about the call.

See also:

Call a support agent (browser-to-browser)

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.

Browser Calls call support

When a customer clicks "Call support" 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.

See also:

Connect the call to the support agent's client

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:


When Twilio sends a POST request to our newCall view, we can connect the call to our support agent by responding with a Client TwiML noun and the support_agent name.

See also:

Answer the call

When our support agent's client receives an incoming call, it will trigger the function we defined on the Twilio.Device.incoming() callback.

The incoming 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.

See also:

End a call

To end a call we invoke Twilio.Device.disconnectAll(), which we wired to the "Hang up" button in our UI.

We also define a callback function with Twilio.Device.disconnect(), above, to reset some UI elements.

See also:

Check if a support agent is available

If a customer calls support but no support agent is online, their call will go unanswered. To help avoid this frustration, we display a message above the "Call support" button when no agent is available:

Browser Calls support unavailable

We use Twilio.Device.presence() to update this message when the support agent's availability changes.

See also:

Where to next?

That's it! Our Laravel application now powers browser-to-phone and browser-to-browser calls using Twilio Client.

If you're a PHP developer working with Twilio, you might also enjoy these tutorials:


Put a button on your web page that connects visitors to live support or sales people via telephone.

Automated Survey

Instantly collect structured data from your users with a survey conducted over a voice call or SMS text messages.

Thanks for checking this tutorial out! If you have any feedback to share with us, we'd love to hear it. Contact the Twilio Developer Education Team to let us know what you think.