Step 1 - Setup Twilio Credentials and TwiML App
We need to setup twilio credentials. We can find account ID and auth token from our account information.
When the call is made using browser then the phone that is receiving the call has to see a number from which the call is coming. So now we need to setup a Twilio verified number. This number will be used to place the outgoing calls from. How to setup a verified number can be found here.
When our app make a call from the browser using twilio-js client, Twilio first creates a new call connection from our Browser to Twilio. It then sends a request back to our server to get information about what to do next. We can respond by asking twilio to call a number, say something to the person after a call is connected, record a call etc.
Sending of this instructions is controlled by setting up a TwiML application. This application provides information about the end point on our server, where twilio should send the request to fetch instructions. TwiML is a set of instructions, that we can use to tell Twilio what to do in different cases like when an outbound phone call is made or when an inbound SMS message is received.
Given below is an example that will say a short message
How are you today? in a call.
The TwiML app can be created here. Once the app is configured then we will get
We need to configure following information in our Rails Application:
Step 2 - Generate capability token to be used by twilio-js
We define a
TwilioTokenGeneratorService for this purpose.
As you can see, we first define a new
Twilio::Util::Capability instance and pass credentials to it.
We then call
allow_client_outgoing method and pass the client Sid to it. This is the identifier for the TwiML application we have previously created on Twilio.
allow_client_outgoing gives permission to the client to make outbound calls from Twilio.
Finally we call the
generate method to create a token from the capability object.
Step 3 - Define view elements and pass token to it
The generated token will now be passed to the Twilio JS client for connecting with Twilio. In our App we define
index action in this controller. This action takes care of setting the capability token. Our index view consists of
two buttons- to place and hangup a call, a number input field, call logs, and data field to pass capability token to the
Step 4 - Define coffeescript bindings to handle TwilioDevice connection to Twilio
Next we setup coffeescript bindings to handle initialization of
TwilioDevice and making use of entered number
to place calls Twilio. We are taking care of various events like
TwilioDevice instance. More information about
TwilioDevice usage can be found here.
If we now load this page, we should be able to see our app saying its ready to take calls.
Step 5 - Define TwiML Response Generator Service
The final step before we place calls from our App is to handle callbacks from Twilio and return
TwiML response. For
this we are going to define
TwilioCallTwiMLGeneratorService which takes care of generating this response. More information
about how we need to define the response and individual fields can be found from Twilio’s docs.
What we need to define is a response as below:
We are making use of two elements here -
Dial, which makes Twilio place a call using defined
as the number from which the call is made, which is displayed on the callee’s phone. Note that this is the same verified
number that we had specified before. Then we specify
Number which is the number, to which we want to place the call to.
which we use to generate the response as above.
We define our
TwilioCallTwiMLGeneratorService to take in a phone number as parameter. It creates an instance of
Twilio::TwiML::Response and tapping on this instance we provide
Dial element with a
:callerId value, and the
to place the call to. We validate the number before passing it back, and return an error if the number is invalid.
Step 6 - Send TwiML response on Twilio callback
We are now set to define twilio’s callback handler. This will be handled by the
create_call action in
Twilio will be sending this endpoint a
POST request along with some information specified here.
We make use of
phone_number being passed to us by Twilio and pass it along to the
return us with valid
TwiML response. Since
TwiML is a flavor of
XML, we make using
render xml to return the response.
create_call endpoint will be used by Twilio API, we need to skip
authenticity token check for this action.
Finally we need to specify the callback url in our
TwiML App on Twilio. For testing this locally, we can make use of a
https://ngrok.com/, to expose this endpoint.
Our service is now ready to place calls. The complete Rails application code that we have created can be found here.
Happy calling everyone!