Twilio Client Javascript Quickstart

Ready to add voice communication to your web application with Twilio's JavaScript Browser client? You'll need to run an app on the server side (in your choice of language) and do some front-end work, but this quickstart will... quickly... show you the ropes.

Let's get cracking!

Gather Twilio Account Information

The first thing we need to do is grab all the necessary information from our Twilio account. To set up our back-end for Twilio Client, we will need four values from our account:

Config Value Description
Account SID Your primary Twilio account identifier - find this in the console here.
Auth Token Used to authenticate - just like the above, you'll find this here.
TwiML App SID The TwiML application with a voice URL configured to access your server running this app - create one in the console here. Also, you will need to configure the Voice "REQUEST URL" on the TwiML app once you've got your server up and running.
Twilio Phone # A Twilio phone number in E.164 format - you can get one here

Download, Configure, and Run the Starter App

Choose a download for your server-side language of choice. If you're primarily a front-end developer and don't have a strong preference,Node.js or Ruby will probably get you up and running the fastest.the fastest.

Follow the instructions in the README for each starter application to configure and run it on your machine, using the four values we created above:

Expose Your Server to the World

Once you've got your server up and running, you will need to host it somewhere Twilio can access it. You can host your app with a web hosting provider, or you can run it locally and use something like ngrok to create a tunnel to your development machine with a publicly accessible URL. See the README above for the specific ngrok instructions for your preferred platform.

Configure Your TwiML App

Now, configure the Voice "REQUEST URL" on your TwiML App to hit the voice URL on your server. Again, see the README above for platform-specific instructions.

TwilioClientRequestUrl.png

Explore the Starter App

Time to have some fun! When you visit the homepage of the starter application, you should see a page which looks like this:

TwilioClientQuickstart.png

You have been assigned a random client name and are ready to make phone calls. Type in a phone number to make a call, or type in the client name of another user. Try opening the app in another browser window and calling yourself. (Have fun with the audio feedback!)

The HTML and CSS in the starter application aren't very complex, but the JavaScript driving this application has some very important jobs: 

  1. Fetch a Capability Token from the server via Ajax
  2. Initialize the Twilio Client JavaScript library
  3. Handle UI events to to make phone calls
  4. Handle Twilio Client events to display status messages

Get Help

Need some extra help with the Client? Tweet at us or contact support and we'll get you running quickly. Have some fun with Twilio Client in the browser, and make sure to let us know what you're building!

 

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.