Click To Call with Ruby and Rails
Jarod Reyes
Published on 2018-03-28
Wish your users could get in touch as easily as they can surf? It's your lucky day!
Let's go over the steps necessary to implement click-to-call in a Ruby on Rails application.
- A website visitor submits a web form with a phone number.
- Your web application receives the submission and initiates an HTTP request to Twilio asking to initiate an outbound call.
- Twilio receives the request and initiates a call to the user's phone number.
- The user picks up the call.
- After the call connects, we provide TwiML instructions to connect the user to our sales or support teams.
What We Will Learn
This tutorial demonstrates how to initialize a call using the Twilio REST API and how to create a call using the TwiML Say verb.
Setup Our Environment
To create our click-to-call application we need to setup our environment first.
Let's put our Twilio credentials in a place where our application can access them. For the purposes of this tutorial, we'll use environment variables that our application can read.
You can find your Twilio credentials in the console.
For more instructions on how to run the application refer to the app's README file.
Loading Code Samples...
Language
require 'twilio-ruby'
require 'pry'
class TwilioController < ApplicationController
# Before we allow the incoming request to connect, verify
# that it is a Twilio request
before_action :load_credentials, only: [:call, :connect]
before_action :authenticate_twilio_request, only: [:connect]
# Render home page
def index
render 'index'
end
# Handle a POST from our web form and connect a call via REST API
def call
contact = Contact.new
contact.user_phone = params[:userPhone]
contact.sales_phone = params[:salesPhone]
# Validate contact
if contact.valid?
@client = Twilio::REST::Client.new @twilio_sid, @twilio_token
# Connect an outbound call to the number submitted
@call = @client.calls.create(
to: contact.user_phone,
from: @twilio_number,
url: "#{@api_host}/connect/#{contact.encoded_sales_phone}" # Fetch instructions from this URL when the call connects
)
# Let's respond to the ajax call with some positive reinforcement
@msg = { message: 'Phone call incoming!', status: 'ok' }
else
# Oops there was an error, lets return the validation errors
@msg = { message: contact.errors.full_messages, status: 'ok' }
end
respond_to do |format|
format.json { render json: @msg }
end
end
# This URL contains instructions for the call that is connected with a lead
# that is using the web form.
def connect
# Our response to this request will be an XML document in the "TwiML"
# format. Our Ruby library provides a helper for generating one
# of these documents
response = Twilio::TwiML::VoiceResponse.new do |r|
r.say('Thanks for contacting our sales department. Our '\
'next available representative will take your call.', voice: 'alice')
r.dial number: params[:sales_number]
end
render xml: response.to_s
end
# Authenticate that all requests to our public-facing TwiML pages are
# coming from Twilio. Adapted from the example at
# http://twilio-ruby.readthedocs.org/en/latest/usage/validation.html
# Read more on Twilio Security at https://www.twilio.com/docs/security
private
def authenticate_twilio_request
if twilio_req?
return true
else
response = Twilio::TwiML::VoiceResponse.new do|r|
r.hangup
end
render xml: response.to_s, status: :unauthorized
false
end
end
def twilio_req?
# Helper from twilio-ruby to validate requests.
validator = Twilio::Security::RequestValidator.new(@twilio_token)
# the POST variables attached to the request (eg "From", "To")
# Twilio requests only accept lowercase letters. So scrub here:
post_vars = params.reject { |k, _| k.downcase == k }
twilio_signature = request.headers['HTTP_X_TWILIO_SIGNATURE']
validator.validate(request.url, post_vars, twilio_signature)
end
def load_credentials
# Define our Twilio credentials as instance variables for later use
@twilio_sid = ENV['TWILIO_ACCOUNT_SID']
@twilio_token = ENV['TWILIO_AUTH_TOKEN']
@twilio_number = ENV['TWILIO_NUMBER']
@api_host = ENV['API_HOST']
end
end
app/controllers/twilio_controller.rb
Excellent work. Now let's check out the user facing web form.
Set Up The Web Form
We need to build a nice user facing web form for our website.
No need to overthink this, the real goal is to POST the user's and sales team's phone numbers to your controller.
Loading Code Samples...
Language
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click To Call Tutorial</title>
<link rel="icon" type="image/png" href="/img/favicon.png">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" type="text/css">
<%= stylesheet_link_tag 'application' %>
</head>
<body>
<div class="container">
<h1>Click To Call</h1>
<p>Click To Call converts your website's users into engaged customers by creating an easy way for your customers to contact your sales and support teams right on your website.</p>
<p>Here's an example of how it's done!</p>
<hr>
<div class="row">
<div class="col-md-12">
<form id="contactform" role="form" action="#" method="POST">
<div class="form-group">
<h3>Call Sales</h3>
<p class="help-block">
Are you interested in impressing your friends and confounding your enemies? Enter your phone number below, and our team will contact you right away.
</p>
</div>
<label>Your number</label>
<div class="form-group">
<input class="form-control" type="text" name="userPhone" id="userPhone"
placeholder="(651) 555-7889">
</div>
<label>Sales team number</label>
<div class="form-group">
<input class="form-control" type="text" name="salesPhone" id="salesPhone"
placeholder="(651) 555-7889">
</div>
<button type="submit" class="btn btn-default">Contact Sales</button>
</form>
</div>
</div>
</div><!-- /page -->
</body>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
</html>
app/views/twilio/index.erb
So what does this form need?
- An input for the phone number
- Another for the sales team number
- A submit button.
Since the page doesn't need to render new content after clicking, we've decided to implement the POST action via AJAX using jQuery. Let's take a look at that next.
Submit the Form with AJAX
To make the click to call feature more seamless we used Ajax to send the form asynchronously.
This code shows one way you could implement this functionality using jQuery:
- Watch for the user "submitting" the form element.
- Submit that form data to our controller.
- Let the user know if the submission was successful or not.
This is a pretty common implementation of jQuery's $.ajax() method, but notice that we are returning the response message when the call has connected.
Loading Code Samples...
Language
// Execute JavaScript on page load
$(function() {
$('#userPhone, #salesPhone').intlTelInput({
responsiveDropdown: true,
autoFormat: true,
utilsScript: 'assets/intl-phone/libphonenumber/build/utils.js'
});
var $form = $('#contactform'),
$submit = $('#contactform input[type=submit]');
// Intercept form submission
$form.on('submit', function(e) {
// Prevent form submission and repeat clicks
e.preventDefault();
$submit.attr('disabled', 'disabled');
// Submit the form via ajax
$.ajax({
url:'/call',
method:'POST',
data: $form.serialize()
}).done(function(data) {
alert(data.message);
}).fail(function() {
alert('There was a problem calling you - please try again later.');
}).always(function() {
$submit.removeAttr('disabled');
});
});
});
app/assets/javascripts/app.js
Now that we have the front-end done, let's build a controller that will receive this data and call the user.
Initiate the Client Object
First we initiate a @client object with our Account SID and Auth Token.
This is essentially our Ruby REST API handler, which we could use to send SMS (or a myriad of other things). For now, we just need it to get access to account.calls, which is the object that we're going to use to create phone calls.
Loading Code Samples...
Language
require 'twilio-ruby'
require 'pry'
class TwilioController < ApplicationController
# Before we allow the incoming request to connect, verify
# that it is a Twilio request
before_action :load_credentials, only: [:call, :connect]
before_action :authenticate_twilio_request, only: [:connect]
# Render home page
def index
render 'index'
end
# Handle a POST from our web form and connect a call via REST API
def call
contact = Contact.new
contact.user_phone = params[:userPhone]
contact.sales_phone = params[:salesPhone]
# Validate contact
if contact.valid?
@client = Twilio::REST::Client.new @twilio_sid, @twilio_token
# Connect an outbound call to the number submitted
@call = @client.calls.create(
to: contact.user_phone,
from: @twilio_number,
url: "#{@api_host}/connect/#{contact.encoded_sales_phone}" # Fetch instructions from this URL when the call connects
)
# Let's respond to the ajax call with some positive reinforcement
@msg = { message: 'Phone call incoming!', status: 'ok' }
else
# Oops there was an error, lets return the validation errors
@msg = { message: contact.errors.full_messages, status: 'ok' }
end
respond_to do |format|
format.json { render json: @msg }
end
end
# This URL contains instructions for the call that is connected with a lead
# that is using the web form.
def connect
# Our response to this request will be an XML document in the "TwiML"
# format. Our Ruby library provides a helper for generating one
# of these documents
response = Twilio::TwiML::VoiceResponse.new do |r|
r.say('Thanks for contacting our sales department. Our '\
'next available representative will take your call.', voice: 'alice')
r.dial number: params[:sales_number]
end
render xml: response.to_s
end
# Authenticate that all requests to our public-facing TwiML pages are
# coming from Twilio. Adapted from the example at
# http://twilio-ruby.readthedocs.org/en/latest/usage/validation.html
# Read more on Twilio Security at https://www.twilio.com/docs/security
private
def authenticate_twilio_request
if twilio_req?
return true
else
response = Twilio::TwiML::VoiceResponse.new do|r|
r.hangup
end
render xml: response.to_s, status: :unauthorized
false
end
end
def twilio_req?
# Helper from twilio-ruby to validate requests.
validator = Twilio::Security::RequestValidator.new(@twilio_token)
# the POST variables attached to the request (eg "From", "To")
# Twilio requests only accept lowercase letters. So scrub here:
post_vars = params.reject { |k, _| k.downcase == k }
twilio_signature = request.headers['HTTP_X_TWILIO_SIGNATURE']
validator.validate(request.url, post_vars, twilio_signature)
end
def load_credentials
# Define our Twilio credentials as instance variables for later use
@twilio_sid = ENV['TWILIO_ACCOUNT_SID']
@twilio_token = ENV['TWILIO_AUTH_TOKEN']
@twilio_number = ENV['TWILIO_NUMBER']
@api_host = ENV['API_HOST']
end
end
app/controllers/twilio_controller.rb
Now we'll take a look at making phone calls.
Making a Phone Call
Next we'll use the REST API to make an outgoing phone call which requires us to pass a From number, To number and a URL Parameter that tells Twilio what to do after it connects the call to our user.
Loading Code Samples...
Language
require 'twilio-ruby'
require 'pry'
class TwilioController < ApplicationController
# Before we allow the incoming request to connect, verify
# that it is a Twilio request
before_action :load_credentials, only: [:call, :connect]
before_action :authenticate_twilio_request, only: [:connect]
# Render home page
def index
render 'index'
end
# Handle a POST from our web form and connect a call via REST API
def call
contact = Contact.new
contact.user_phone = params[:userPhone]
contact.sales_phone = params[:salesPhone]
# Validate contact
if contact.valid?
@client = Twilio::REST::Client.new @twilio_sid, @twilio_token
# Connect an outbound call to the number submitted
@call = @client.calls.create(
to: contact.user_phone,
from: @twilio_number,
url: "#{@api_host}/connect/#{contact.encoded_sales_phone}" # Fetch instructions from this URL when the call connects
)
# Let's respond to the ajax call with some positive reinforcement
@msg = { message: 'Phone call incoming!', status: 'ok' }
else
# Oops there was an error, lets return the validation errors
@msg = { message: contact.errors.full_messages, status: 'ok' }
end
respond_to do |format|
format.json { render json: @msg }
end
end
# This URL contains instructions for the call that is connected with a lead
# that is using the web form.
def connect
# Our response to this request will be an XML document in the "TwiML"
# format. Our Ruby library provides a helper for generating one
# of these documents
response = Twilio::TwiML::VoiceResponse.new do |r|
r.say('Thanks for contacting our sales department. Our '\
'next available representative will take your call.', voice: 'alice')
r.dial number: params[:sales_number]
end
render xml: response.to_s
end
# Authenticate that all requests to our public-facing TwiML pages are
# coming from Twilio. Adapted from the example at
# http://twilio-ruby.readthedocs.org/en/latest/usage/validation.html
# Read more on Twilio Security at https://www.twilio.com/docs/security
private
def authenticate_twilio_request
if twilio_req?
return true
else
response = Twilio::TwiML::VoiceResponse.new do|r|
r.hangup
end
render xml: response.to_s, status: :unauthorized
false
end
end
def twilio_req?
# Helper from twilio-ruby to validate requests.
validator = Twilio::Security::RequestValidator.new(@twilio_token)
# the POST variables attached to the request (eg "From", "To")
# Twilio requests only accept lowercase letters. So scrub here:
post_vars = params.reject { |k, _| k.downcase == k }
twilio_signature = request.headers['HTTP_X_TWILIO_SIGNATURE']
validator.validate(request.url, post_vars, twilio_signature)
end
def load_credentials
# Define our Twilio credentials as instance variables for later use
@twilio_sid = ENV['TWILIO_ACCOUNT_SID']
@twilio_token = ENV['TWILIO_AUTH_TOKEN']
@twilio_number = ENV['TWILIO_NUMBER']
@api_host = ENV['API_HOST']
end
end
app/controllers/twilio_controller.rb
In this case Twilio needs to DIAL in the Agent once the call has been placed. We'll discuss this more in future steps.
The Connect Endpoint
Twilio makes a request to our application when the call is created using the REST API. This means that we need to create an endpoint that is publicly available for Internet requests.
Loading Code Samples...
Language
require 'twilio-ruby'
require 'pry'
class TwilioController < ApplicationController
# Before we allow the incoming request to connect, verify
# that it is a Twilio request
before_action :load_credentials, only: [:call, :connect]
before_action :authenticate_twilio_request, only: [:connect]
# Render home page
def index
render 'index'
end
# Handle a POST from our web form and connect a call via REST API
def call
contact = Contact.new
contact.user_phone = params[:userPhone]
contact.sales_phone = params[:salesPhone]
# Validate contact
if contact.valid?
@client = Twilio::REST::Client.new @twilio_sid, @twilio_token
# Connect an outbound call to the number submitted
@call = @client.calls.create(
to: contact.user_phone,
from: @twilio_number,
url: "#{@api_host}/connect/#{contact.encoded_sales_phone}" # Fetch instructions from this URL when the call connects
)
# Let's respond to the ajax call with some positive reinforcement
@msg = { message: 'Phone call incoming!', status: 'ok' }
else
# Oops there was an error, lets return the validation errors
@msg = { message: contact.errors.full_messages, status: 'ok' }
end
respond_to do |format|
format.json { render json: @msg }
end
end
# This URL contains instructions for the call that is connected with a lead
# that is using the web form.
def connect
# Our response to this request will be an XML document in the "TwiML"
# format. Our Ruby library provides a helper for generating one
# of these documents
response = Twilio::TwiML::VoiceResponse.new do |r|
r.say('Thanks for contacting our sales department. Our '\
'next available representative will take your call.', voice: 'alice')
r.dial number: params[:sales_number]
end
render xml: response.to_s
end
# Authenticate that all requests to our public-facing TwiML pages are
# coming from Twilio. Adapted from the example at
# http://twilio-ruby.readthedocs.org/en/latest/usage/validation.html
# Read more on Twilio Security at https://www.twilio.com/docs/security
private
def authenticate_twilio_request
if twilio_req?
return true
else
response = Twilio::TwiML::VoiceResponse.new do|r|
r.hangup
end
render xml: response.to_s, status: :unauthorized
false
end
end
def twilio_req?
# Helper from twilio-ruby to validate requests.
validator = Twilio::Security::RequestValidator.new(@twilio_token)
# the POST variables attached to the request (eg "From", "To")
# Twilio requests only accept lowercase letters. So scrub here:
post_vars = params.reject { |k, _| k.downcase == k }
twilio_signature = request.headers['HTTP_X_TWILIO_SIGNATURE']
validator.validate(request.url, post_vars, twilio_signature)
end
def load_credentials
# Define our Twilio credentials as instance variables for later use
@twilio_sid = ENV['TWILIO_ACCOUNT_SID']
@twilio_token = ENV['TWILIO_AUTH_TOKEN']
@twilio_number = ENV['TWILIO_NUMBER']
@api_host = ENV['API_HOST']
end
end
app/controllers/twilio_controller.rb
Next we'll show how to validate a request from Twilio.
Validating a Twilio Request
TwiML sometimes can contain sensitive user information such as phone numbers. If you're revealing sensitive information at a route, you'll want to make sure you're talking to Twilio.
So, let's check that the request is made by Twilio before doing any operation on the /Connect endpoint.
The authenticate_twilio_request method provides a mechanism to confirm that the request your application is receiving is actually coming from Twilio.
Loading Code Samples...
Language
require 'twilio-ruby'
require 'pry'
class TwilioController < ApplicationController
# Before we allow the incoming request to connect, verify
# that it is a Twilio request
before_action :load_credentials, only: [:call, :connect]
before_action :authenticate_twilio_request, only: [:connect]
# Render home page
def index
render 'index'
end
# Handle a POST from our web form and connect a call via REST API
def call
contact = Contact.new
contact.user_phone = params[:userPhone]
contact.sales_phone = params[:salesPhone]
# Validate contact
if contact.valid?
@client = Twilio::REST::Client.new @twilio_sid, @twilio_token
# Connect an outbound call to the number submitted
@call = @client.calls.create(
to: contact.user_phone,
from: @twilio_number,
url: "#{@api_host}/connect/#{contact.encoded_sales_phone}" # Fetch instructions from this URL when the call connects
)
# Let's respond to the ajax call with some positive reinforcement
@msg = { message: 'Phone call incoming!', status: 'ok' }
else
# Oops there was an error, lets return the validation errors
@msg = { message: contact.errors.full_messages, status: 'ok' }
end
respond_to do |format|
format.json { render json: @msg }
end
end
# This URL contains instructions for the call that is connected with a lead
# that is using the web form.
def connect
# Our response to this request will be an XML document in the "TwiML"
# format. Our Ruby library provides a helper for generating one
# of these documents
response = Twilio::TwiML::VoiceResponse.new do |r|
r.say('Thanks for contacting our sales department. Our '\
'next available representative will take your call.', voice: 'alice')
r.dial number: params[:sales_number]
end
render xml: response.to_s
end
# Authenticate that all requests to our public-facing TwiML pages are
# coming from Twilio. Adapted from the example at
# http://twilio-ruby.readthedocs.org/en/latest/usage/validation.html
# Read more on Twilio Security at https://www.twilio.com/docs/security
private
def authenticate_twilio_request
if twilio_req?
return true
else
response = Twilio::TwiML::VoiceResponse.new do|r|
r.hangup
end
render xml: response.to_s, status: :unauthorized
false
end
end
def twilio_req?
# Helper from twilio-ruby to validate requests.
validator = Twilio::Security::RequestValidator.new(@twilio_token)
# the POST variables attached to the request (eg "From", "To")
# Twilio requests only accept lowercase letters. So scrub here:
post_vars = params.reject { |k, _| k.downcase == k }
twilio_signature = request.headers['HTTP_X_TWILIO_SIGNATURE']
validator.validate(request.url, post_vars, twilio_signature)
end
def load_credentials
# Define our Twilio credentials as instance variables for later use
@twilio_sid = ENV['TWILIO_ACCOUNT_SID']
@twilio_token = ENV['TWILIO_AUTH_TOKEN']
@twilio_number = ENV['TWILIO_NUMBER']
@api_host = ENV['API_HOST']
end
end
app/controllers/twilio_controller.rb
So it's from us... great! Let's look at the TwiML in further detail, next.
Generate TwiML
TwiML is a set of verbs and nouns written in XML that Twilio reads as instructions.
In this case our instructions inform Twilio to SAY something to the user and then DIAL the support agent's number so the customer can talk to him or her.
In order to make writing TwiML easy, many of the helper libraries have methods that generate TwiML for you. In this case we use twilio-ruby to create a TwiML response that will instruct Twilio to SAY something.
Loading Code Samples...
Language
require 'twilio-ruby'
require 'pry'
class TwilioController < ApplicationController
# Before we allow the incoming request to connect, verify
# that it is a Twilio request
before_action :load_credentials, only: [:call, :connect]
before_action :authenticate_twilio_request, only: [:connect]
# Render home page
def index
render 'index'
end
# Handle a POST from our web form and connect a call via REST API
def call
contact = Contact.new
contact.user_phone = params[:userPhone]
contact.sales_phone = params[:salesPhone]
# Validate contact
if contact.valid?
@client = Twilio::REST::Client.new @twilio_sid, @twilio_token
# Connect an outbound call to the number submitted
@call = @client.calls.create(
to: contact.user_phone,
from: @twilio_number,
url: "#{@api_host}/connect/#{contact.encoded_sales_phone}" # Fetch instructions from this URL when the call connects
)
# Let's respond to the ajax call with some positive reinforcement
@msg = { message: 'Phone call incoming!', status: 'ok' }
else
# Oops there was an error, lets return the validation errors
@msg = { message: contact.errors.full_messages, status: 'ok' }
end
respond_to do |format|
format.json { render json: @msg }
end
end
# This URL contains instructions for the call that is connected with a lead
# that is using the web form.
def connect
# Our response to this request will be an XML document in the "TwiML"
# format. Our Ruby library provides a helper for generating one
# of these documents
response = Twilio::TwiML::VoiceResponse.new do |r|
r.say('Thanks for contacting our sales department. Our '\
'next available representative will take your call.', voice: 'alice')
r.dial number: params[:sales_number]
end
render xml: response.to_s
end
# Authenticate that all requests to our public-facing TwiML pages are
# coming from Twilio. Adapted from the example at
# http://twilio-ruby.readthedocs.org/en/latest/usage/validation.html
# Read more on Twilio Security at https://www.twilio.com/docs/security
private
def authenticate_twilio_request
if twilio_req?
return true
else
response = Twilio::TwiML::VoiceResponse.new do|r|
r.hangup
end
render xml: response.to_s, status: :unauthorized
false
end
end
def twilio_req?
# Helper from twilio-ruby to validate requests.
validator = Twilio::Security::RequestValidator.new(@twilio_token)
# the POST variables attached to the request (eg "From", "To")
# Twilio requests only accept lowercase letters. So scrub here:
post_vars = params.reject { |k, _| k.downcase == k }
twilio_signature = request.headers['HTTP_X_TWILIO_SIGNATURE']
validator.validate(request.url, post_vars, twilio_signature)
end
def load_credentials
# Define our Twilio credentials as instance variables for later use
@twilio_sid = ENV['TWILIO_ACCOUNT_SID']
@twilio_token = ENV['TWILIO_AUTH_TOKEN']
@twilio_number = ENV['TWILIO_NUMBER']
@api_host = ENV['API_HOST']
end
end
app/controllers/twilio_controller.rb
And that's a wrap! Next let's look at some other easy to add features for your application.
Where to next?
Ruby, Rails, and Twilio - is there anything more exciting? Here are two more easy and fun tutorials in Ruby:
Automated Survey with Ruby and Rails
Instantly collect structured data from your users with a survey conducted over a voice call or SMS text messages.
Send SMS and MMS Messages in Ruby
Send SMS alerts to a list of system administrators when something goes wrong on your server.
Did this help?
Thanks for checking this tutorial out! Tweet to us @twilio and 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.
Loading Code Samples...
require 'twilio-ruby'
require 'pry'
class TwilioController < ApplicationController
# Before we allow the incoming request to connect, verify
# that it is a Twilio request
before_action :load_credentials, only: [:call, :connect]
before_action :authenticate_twilio_request, only: [:connect]
# Render home page
def index
render 'index'
end
# Handle a POST from our web form and connect a call via REST API
def call
contact = Contact.new
contact.user_phone = params[:userPhone]
contact.sales_phone = params[:salesPhone]
# Validate contact
if contact.valid?
@client = Twilio::REST::Client.new @twilio_sid, @twilio_token
# Connect an outbound call to the number submitted
@call = @client.calls.create(
to: contact.user_phone,
from: @twilio_number,
url: "#{@api_host}/connect/#{contact.encoded_sales_phone}" # Fetch instructions from this URL when the call connects
)
# Let's respond to the ajax call with some positive reinforcement
@msg = { message: 'Phone call incoming!', status: 'ok' }
else
# Oops there was an error, lets return the validation errors
@msg = { message: contact.errors.full_messages, status: 'ok' }
end
respond_to do |format|
format.json { render json: @msg }
end
end
# This URL contains instructions for the call that is connected with a lead
# that is using the web form.
def connect
# Our response to this request will be an XML document in the "TwiML"
# format. Our Ruby library provides a helper for generating one
# of these documents
response = Twilio::TwiML::VoiceResponse.new do |r|
r.say('Thanks for contacting our sales department. Our '\
'next available representative will take your call.', voice: 'alice')
r.dial number: params[:sales_number]
end
render xml: response.to_s
end
# Authenticate that all requests to our public-facing TwiML pages are
# coming from Twilio. Adapted from the example at
# http://twilio-ruby.readthedocs.org/en/latest/usage/validation.html
# Read more on Twilio Security at https://www.twilio.com/docs/security
private
def authenticate_twilio_request
if twilio_req?
return true
else
response = Twilio::TwiML::VoiceResponse.new do|r|
r.hangup
end
render xml: response.to_s, status: :unauthorized
false
end
end
def twilio_req?
# Helper from twilio-ruby to validate requests.
validator = Twilio::Security::RequestValidator.new(@twilio_token)
# the POST variables attached to the request (eg "From", "To")
# Twilio requests only accept lowercase letters. So scrub here:
post_vars = params.reject { |k, _| k.downcase == k }
twilio_signature = request.headers['HTTP_X_TWILIO_SIGNATURE']
validator.validate(request.url, post_vars, twilio_signature)
end
def load_credentials
# Define our Twilio credentials as instance variables for later use
@twilio_sid = ENV['TWILIO_ACCOUNT_SID']
@twilio_token = ENV['TWILIO_AUTH_TOKEN']
@twilio_number = ENV['TWILIO_NUMBER']
@api_host = ENV['API_HOST']
end
end
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click To Call Tutorial</title>
<link rel="icon" type="image/png" href="/img/favicon.png">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" type="text/css">
<%= stylesheet_link_tag 'application' %>
</head>
<body>
<div class="container">
<h1>Click To Call</h1>
<p>Click To Call converts your website's users into engaged customers by creating an easy way for your customers to contact your sales and support teams right on your website.</p>
<p>Here's an example of how it's done!</p>
<hr>
<div class="row">
<div class="col-md-12">
<form id="contactform" role="form" action="#" method="POST">
<div class="form-group">
<h3>Call Sales</h3>
<p class="help-block">
Are you interested in impressing your friends and confounding your enemies? Enter your phone number below, and our team will contact you right away.
</p>
</div>
<label>Your number</label>
<div class="form-group">
<input class="form-control" type="text" name="userPhone" id="userPhone"
placeholder="(651) 555-7889">
</div>
<label>Sales team number</label>
<div class="form-group">
<input class="form-control" type="text" name="salesPhone" id="salesPhone"
placeholder="(651) 555-7889">
</div>
<button type="submit" class="btn btn-default">Contact Sales</button>
</form>
</div>
</div>
</div><!-- /page -->
</body>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
</html>
// Execute JavaScript on page load
$(function() {
$('#userPhone, #salesPhone').intlTelInput({
responsiveDropdown: true,
autoFormat: true,
utilsScript: 'assets/intl-phone/libphonenumber/build/utils.js'
});
var $form = $('#contactform'),
$submit = $('#contactform input[type=submit]');
// Intercept form submission
$form.on('submit', function(e) {
// Prevent form submission and repeat clicks
e.preventDefault();
$submit.attr('disabled', 'disabled');
// Submit the form via ajax
$.ajax({
url:'/call',
method:'POST',
data: $form.serialize()
}).done(function(data) {
alert(data.message);
}).fail(function() {
alert('There was a problem calling you - please try again later.');
}).always(function() {
$submit.removeAttr('disabled');
});
});
});
require 'twilio-ruby'
require 'pry'
class TwilioController < ApplicationController
# Before we allow the incoming request to connect, verify
# that it is a Twilio request
before_action :load_credentials, only: [:call, :connect]
before_action :authenticate_twilio_request, only: [:connect]
# Render home page
def index
render 'index'
end
# Handle a POST from our web form and connect a call via REST API
def call
contact = Contact.new
contact.user_phone = params[:userPhone]
contact.sales_phone = params[:salesPhone]
# Validate contact
if contact.valid?
@client = Twilio::REST::Client.new @twilio_sid, @twilio_token
# Connect an outbound call to the number submitted
@call = @client.calls.create(
to: contact.user_phone,
from: @twilio_number,
url: "#{@api_host}/connect/#{contact.encoded_sales_phone}" # Fetch instructions from this URL when the call connects
)
# Let's respond to the ajax call with some positive reinforcement
@msg = { message: 'Phone call incoming!', status: 'ok' }
else
# Oops there was an error, lets return the validation errors
@msg = { message: contact.errors.full_messages, status: 'ok' }
end
respond_to do |format|
format.json { render json: @msg }
end
end
# This URL contains instructions for the call that is connected with a lead
# that is using the web form.
def connect
# Our response to this request will be an XML document in the "TwiML"
# format. Our Ruby library provides a helper for generating one
# of these documents
response = Twilio::TwiML::VoiceResponse.new do |r|
r.say('Thanks for contacting our sales department. Our '\
'next available representative will take your call.', voice: 'alice')
r.dial number: params[:sales_number]
end
render xml: response.to_s
end
# Authenticate that all requests to our public-facing TwiML pages are
# coming from Twilio. Adapted from the example at
# http://twilio-ruby.readthedocs.org/en/latest/usage/validation.html
# Read more on Twilio Security at https://www.twilio.com/docs/security
private
def authenticate_twilio_request
if twilio_req?
return true
else
response = Twilio::TwiML::VoiceResponse.new do|r|
r.hangup
end
render xml: response.to_s, status: :unauthorized
false
end
end
def twilio_req?
# Helper from twilio-ruby to validate requests.
validator = Twilio::Security::RequestValidator.new(@twilio_token)
# the POST variables attached to the request (eg "From", "To")
# Twilio requests only accept lowercase letters. So scrub here:
post_vars = params.reject { |k, _| k.downcase == k }
twilio_signature = request.headers['HTTP_X_TWILIO_SIGNATURE']
validator.validate(request.url, post_vars, twilio_signature)
end
def load_credentials
# Define our Twilio credentials as instance variables for later use
@twilio_sid = ENV['TWILIO_ACCOUNT_SID']
@twilio_token = ENV['TWILIO_AUTH_TOKEN']
@twilio_number = ENV['TWILIO_NUMBER']
@api_host = ENV['API_HOST']
end
end
require 'twilio-ruby'
require 'pry'
class TwilioController < ApplicationController
# Before we allow the incoming request to connect, verify
# that it is a Twilio request
before_action :load_credentials, only: [:call, :connect]
before_action :authenticate_twilio_request, only: [:connect]
# Render home page
def index
render 'index'
end
# Handle a POST from our web form and connect a call via REST API
def call
contact = Contact.new
contact.user_phone = params[:userPhone]
contact.sales_phone = params[:salesPhone]
# Validate contact
if contact.valid?
@client = Twilio::REST::Client.new @twilio_sid, @twilio_token
# Connect an outbound call to the number submitted
@call = @client.calls.create(
to: contact.user_phone,
from: @twilio_number,
url: "#{@api_host}/connect/#{contact.encoded_sales_phone}" # Fetch instructions from this URL when the call connects
)
# Let's respond to the ajax call with some positive reinforcement
@msg = { message: 'Phone call incoming!', status: 'ok' }
else
# Oops there was an error, lets return the validation errors
@msg = { message: contact.errors.full_messages, status: 'ok' }
end
respond_to do |format|
format.json { render json: @msg }
end
end
# This URL contains instructions for the call that is connected with a lead
# that is using the web form.
def connect
# Our response to this request will be an XML document in the "TwiML"
# format. Our Ruby library provides a helper for generating one
# of these documents
response = Twilio::TwiML::VoiceResponse.new do |r|
r.say('Thanks for contacting our sales department. Our '\
'next available representative will take your call.', voice: 'alice')
r.dial number: params[:sales_number]
end
render xml: response.to_s
end
# Authenticate that all requests to our public-facing TwiML pages are
# coming from Twilio. Adapted from the example at
# http://twilio-ruby.readthedocs.org/en/latest/usage/validation.html
# Read more on Twilio Security at https://www.twilio.com/docs/security
private
def authenticate_twilio_request
if twilio_req?
return true
else
response = Twilio::TwiML::VoiceResponse.new do|r|
r.hangup
end
render xml: response.to_s, status: :unauthorized
false
end
end
def twilio_req?
# Helper from twilio-ruby to validate requests.
validator = Twilio::Security::RequestValidator.new(@twilio_token)
# the POST variables attached to the request (eg "From", "To")
# Twilio requests only accept lowercase letters. So scrub here:
post_vars = params.reject { |k, _| k.downcase == k }
twilio_signature = request.headers['HTTP_X_TWILIO_SIGNATURE']
validator.validate(request.url, post_vars, twilio_signature)
end
def load_credentials
# Define our Twilio credentials as instance variables for later use
@twilio_sid = ENV['TWILIO_ACCOUNT_SID']
@twilio_token = ENV['TWILIO_AUTH_TOKEN']
@twilio_number = ENV['TWILIO_NUMBER']
@api_host = ENV['API_HOST']
end
end
require 'twilio-ruby'
require 'pry'
class TwilioController < ApplicationController
# Before we allow the incoming request to connect, verify
# that it is a Twilio request
before_action :load_credentials, only: [:call, :connect]
before_action :authenticate_twilio_request, only: [:connect]
# Render home page
def index
render 'index'
end
# Handle a POST from our web form and connect a call via REST API
def call
contact = Contact.new
contact.user_phone = params[:userPhone]
contact.sales_phone = params[:salesPhone]
# Validate contact
if contact.valid?
@client = Twilio::REST::Client.new @twilio_sid, @twilio_token
# Connect an outbound call to the number submitted
@call = @client.calls.create(
to: contact.user_phone,
from: @twilio_number,
url: "#{@api_host}/connect/#{contact.encoded_sales_phone}" # Fetch instructions from this URL when the call connects
)
# Let's respond to the ajax call with some positive reinforcement
@msg = { message: 'Phone call incoming!', status: 'ok' }
else
# Oops there was an error, lets return the validation errors
@msg = { message: contact.errors.full_messages, status: 'ok' }
end
respond_to do |format|
format.json { render json: @msg }
end
end
# This URL contains instructions for the call that is connected with a lead
# that is using the web form.
def connect
# Our response to this request will be an XML document in the "TwiML"
# format. Our Ruby library provides a helper for generating one
# of these documents
response = Twilio::TwiML::VoiceResponse.new do |r|
r.say('Thanks for contacting our sales department. Our '\
'next available representative will take your call.', voice: 'alice')
r.dial number: params[:sales_number]
end
render xml: response.to_s
end
# Authenticate that all requests to our public-facing TwiML pages are
# coming from Twilio. Adapted from the example at
# http://twilio-ruby.readthedocs.org/en/latest/usage/validation.html
# Read more on Twilio Security at https://www.twilio.com/docs/security
private
def authenticate_twilio_request
if twilio_req?
return true
else
response = Twilio::TwiML::VoiceResponse.new do|r|
r.hangup
end
render xml: response.to_s, status: :unauthorized
false
end
end
def twilio_req?
# Helper from twilio-ruby to validate requests.
validator = Twilio::Security::RequestValidator.new(@twilio_token)
# the POST variables attached to the request (eg "From", "To")
# Twilio requests only accept lowercase letters. So scrub here:
post_vars = params.reject { |k, _| k.downcase == k }
twilio_signature = request.headers['HTTP_X_TWILIO_SIGNATURE']
validator.validate(request.url, post_vars, twilio_signature)
end
def load_credentials
# Define our Twilio credentials as instance variables for later use
@twilio_sid = ENV['TWILIO_ACCOUNT_SID']
@twilio_token = ENV['TWILIO_AUTH_TOKEN']
@twilio_number = ENV['TWILIO_NUMBER']
@api_host = ENV['API_HOST']
end
end
require 'twilio-ruby'
require 'pry'
class TwilioController < ApplicationController
# Before we allow the incoming request to connect, verify
# that it is a Twilio request
before_action :load_credentials, only: [:call, :connect]
before_action :authenticate_twilio_request, only: [:connect]
# Render home page
def index
render 'index'
end
# Handle a POST from our web form and connect a call via REST API
def call
contact = Contact.new
contact.user_phone = params[:userPhone]
contact.sales_phone = params[:salesPhone]
# Validate contact
if contact.valid?
@client = Twilio::REST::Client.new @twilio_sid, @twilio_token
# Connect an outbound call to the number submitted
@call = @client.calls.create(
to: contact.user_phone,
from: @twilio_number,
url: "#{@api_host}/connect/#{contact.encoded_sales_phone}" # Fetch instructions from this URL when the call connects
)
# Let's respond to the ajax call with some positive reinforcement
@msg = { message: 'Phone call incoming!', status: 'ok' }
else
# Oops there was an error, lets return the validation errors
@msg = { message: contact.errors.full_messages, status: 'ok' }
end
respond_to do |format|
format.json { render json: @msg }
end
end
# This URL contains instructions for the call that is connected with a lead
# that is using the web form.
def connect
# Our response to this request will be an XML document in the "TwiML"
# format. Our Ruby library provides a helper for generating one
# of these documents
response = Twilio::TwiML::VoiceResponse.new do |r|
r.say('Thanks for contacting our sales department. Our '\
'next available representative will take your call.', voice: 'alice')
r.dial number: params[:sales_number]
end
render xml: response.to_s
end
# Authenticate that all requests to our public-facing TwiML pages are
# coming from Twilio. Adapted from the example at
# http://twilio-ruby.readthedocs.org/en/latest/usage/validation.html
# Read more on Twilio Security at https://www.twilio.com/docs/security
private
def authenticate_twilio_request
if twilio_req?
return true
else
response = Twilio::TwiML::VoiceResponse.new do|r|
r.hangup
end
render xml: response.to_s, status: :unauthorized
false
end
end
def twilio_req?
# Helper from twilio-ruby to validate requests.
validator = Twilio::Security::RequestValidator.new(@twilio_token)
# the POST variables attached to the request (eg "From", "To")
# Twilio requests only accept lowercase letters. So scrub here:
post_vars = params.reject { |k, _| k.downcase == k }
twilio_signature = request.headers['HTTP_X_TWILIO_SIGNATURE']
validator.validate(request.url, post_vars, twilio_signature)
end
def load_credentials
# Define our Twilio credentials as instance variables for later use
@twilio_sid = ENV['TWILIO_ACCOUNT_SID']
@twilio_token = ENV['TWILIO_AUTH_TOKEN']
@twilio_number = ENV['TWILIO_NUMBER']
@api_host = ENV['API_HOST']
end
end
require 'twilio-ruby'
require 'pry'
class TwilioController < ApplicationController
# Before we allow the incoming request to connect, verify
# that it is a Twilio request
before_action :load_credentials, only: [:call, :connect]
before_action :authenticate_twilio_request, only: [:connect]
# Render home page
def index
render 'index'
end
# Handle a POST from our web form and connect a call via REST API
def call
contact = Contact.new
contact.user_phone = params[:userPhone]
contact.sales_phone = params[:salesPhone]
# Validate contact
if contact.valid?
@client = Twilio::REST::Client.new @twilio_sid, @twilio_token
# Connect an outbound call to the number submitted
@call = @client.calls.create(
to: contact.user_phone,
from: @twilio_number,
url: "#{@api_host}/connect/#{contact.encoded_sales_phone}" # Fetch instructions from this URL when the call connects
)
# Let's respond to the ajax call with some positive reinforcement
@msg = { message: 'Phone call incoming!', status: 'ok' }
else
# Oops there was an error, lets return the validation errors
@msg = { message: contact.errors.full_messages, status: 'ok' }
end
respond_to do |format|
format.json { render json: @msg }
end
end
# This URL contains instructions for the call that is connected with a lead
# that is using the web form.
def connect
# Our response to this request will be an XML document in the "TwiML"
# format. Our Ruby library provides a helper for generating one
# of these documents
response = Twilio::TwiML::VoiceResponse.new do |r|
r.say('Thanks for contacting our sales department. Our '\
'next available representative will take your call.', voice: 'alice')
r.dial number: params[:sales_number]
end
render xml: response.to_s
end
# Authenticate that all requests to our public-facing TwiML pages are
# coming from Twilio. Adapted from the example at
# http://twilio-ruby.readthedocs.org/en/latest/usage/validation.html
# Read more on Twilio Security at https://www.twilio.com/docs/security
private
def authenticate_twilio_request
if twilio_req?
return true
else
response = Twilio::TwiML::VoiceResponse.new do|r|
r.hangup
end
render xml: response.to_s, status: :unauthorized
false
end
end
def twilio_req?
# Helper from twilio-ruby to validate requests.
validator = Twilio::Security::RequestValidator.new(@twilio_token)
# the POST variables attached to the request (eg "From", "To")
# Twilio requests only accept lowercase letters. So scrub here:
post_vars = params.reject { |k, _| k.downcase == k }
twilio_signature = request.headers['HTTP_X_TWILIO_SIGNATURE']
validator.validate(request.url, post_vars, twilio_signature)
end
def load_credentials
# Define our Twilio credentials as instance variables for later use
@twilio_sid = ENV['TWILIO_ACCOUNT_SID']
@twilio_token = ENV['TWILIO_AUTH_TOKEN']
@twilio_number = ENV['TWILIO_NUMBER']
@api_host = ENV['API_HOST']
end
end