How to Initiate a Follow-Up Call using Click-To-Call

Follow

Overview

Why Initiate a Follow Up Call Immediately

In April 2018, Drift.com conducted a lead response experiment and found that "90% of all companies didn’t respond in under five minutes." And according to research in the Lead Response Management Study by Insidesales.com; "the odds of qualifying a lead if called in 5 minutes versus 30 minutes drop 21 times". This means that speed and timing when responding to a web-generated lead is critical.

Retreaver’s Live Agent Call Initiation enables users on your website to initiate an immediate phone call from your sales team. Connect with a live agent on the line, right away.



How It Works

Retreaver’s Live Agent Call Initiation works in tandem with a web form and is triggered on providing of a lead's phone number and/or submission of that form:

  • A lead visits your web site and fills in their information including phone number as a required field (i.e. Demo request, contact form, white paper registration, etc)
  • On submit, Retreaver triggers a call to your agent(s)
  • If an agent is available and picks up, they are prompted that a new lead is calling and to wait as they are connected. If an agent does not answer, then the call to the lead is simply cancelled and the regular form submission workflow continues.
  • Retreaver then calls the lead as if the agent is calling them.

You may also combine Click-To-Call with a "Call-Me-Back" campaign to ensure calls are always answered. View our "How to ensure calls are answered" article to learn more.


Getting Set Up

Add Your Web Form

On your web or landing page ensure that the form for the Live Agent Call Initiation captures the lead’s phone number.

For this document we are using the following form for the example:

<form id=”myform”>
<input type=”text” id=”name” placeholder=”Name” />
<input type=”text” id=”email” placeholder=”Email” />
<input type=”text” id=”phone_number” placeholder=”Phone Number” />
<input type=”submit” value=”Submit” />
</form>


Configure Retreaver

Start With A Campaign

Create or update a Campaign in Retreaver to use with the Live Agent Call Initiation. Ensure you have at least one agent set to receive calls.

Add a Whisper Prompt. This will message your agent when they first answer the phone. For example:

call-initiation-whisper-prompt.png

Be sure to provide your agent with the context of the caller that will help them speak with the lead.


Turn on Click to Call

From the campaign summary view. Toggle the Click-to-call option to on.

click-to-call-toggle.png


Add a Number Pool

To track the form data with the call, you will need a number pool set to track “per-visitor” (Read more about using number pools)

per-user-number-pool.png


Update & Add Retreaver.js

Use the “Advanced” version of the Retreaver.js for your Landing Page / Website.

advanced-retreaver-js.png


Step 1.
Add data from your form (Name, Email, Phone number in our example) onto the tracking number by using the add_tags and/or replace_tags methods (see the online documentation for retreaver.js).

For example, if using jQuery you could assign the form data with the following:

$('#myform').on('change', function () {
  form_name = $(‘#name’).val();
  form_email = $(‘#email’).val();
  form_phone = $(‘#phone_number’).val();
  number.replace_tags({name: form_name, email: form_email, phone: form_phone});
});

As leads update information in the form, the assigned tracking number is tagged with data as part of the session.


Step 2.
To initiate the call process you will need to bind it to an event (typically the form submission). An example of initiating the phone call on the form’s submit event using jQuery is:

function callInitiated(call) {
    alert('The call was initiated with uuid ' + call.uuid);
}

$('form').on('submit', function () {
    var visitor_phone_number = $('#phone_number').val(),
        visitor_name = $('#name').val();
    
campaign.request_number({}, function (retreaver_number){
retreaver_number.initiate_call(visitor_phone_number, {name: visitor_name}, callInitiated);
}) })


Step 3.
Check your code and add it to the bottom of the <head></head> section of your page.

Here is an example from our "Real-Time Page Tracking" article demonstrating click-to-call implementation.

Script Demo

<script type="text/javascript">
(function () {
var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.async = true;
scriptElement.defer = true;
scriptElement.src = document.location.protocol + '//dist.routingapi.com/jsapi/v1/retreaver.min.js';
scriptElement.onload = scriptElement.onreadystatechange = function () {

Retreaver.configure({
host: 'api.routingapi.com',
prefix: document.location.protocol == 'https:' ? 'https' : 'http'
});

//Initialize Campaign Instance
var campaign = new Retreaver.Campaign({campaign_key: 'SECRET_CAMPAIGN_KEY'});


//Replace numbers on the page using auto_replace_numbers
campaign.auto_replace_numbers(function (number) {


//Initialize Variables to store form values
var first_name, last_name, email, phone_number, zip, product_interest;

//Assign form values to Retreaver tags
function updateTags() {
first_name = $("input[id*='firstname']").val();
last_name = $("input[id*='lastname']").val();
email = $("input[id*='email']").val();
phone_number = $("input[id*='phone']").val();
zip = $("input[id*='state']").val();
product_interest = $("select[id*='product']").val();

//update tags associated with displayed number, key:value
//key is created within retreaver platform,
//value is pulled from our previously stored variables
number.replace_tags({
first_name: first_name,
last_name: last_name,
email: email,
phone_number: phone_number,
caller_zip: zip,
product_interest: product_interest
});
}

//Debounce calls a function based on a supplied timer, used to call update tags
function debounce(func, wait, immediate) {
var timeout;
return function () {
var context = this, args = arguments;

var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};

var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
}
}

//calls updateTags function every 0.250 seconds
var debounced = debounce(updateTags, 250);

//Ontop of timed updating, anytime the form is altered/submitted, run updateTags function again
$('form').change(debounced).submit(updateTags);
$('input').keyup(debounced);
debounced();

});//end of auto replace numbers

//Click-To-Call Functionality Starts here
$('form').on('submit', function () {

//Store form values
visitor_first_name = $("input[id*='firstname']").val(),

visitor_last_name = $("input[id*='lastname']").val(),

visitor_email = $("input[id*='email']").val(),

visitor_phone_number = $("input[id*='phone']").val(),

visitor_zip = $("input[id*='state']").val(),

visitor_interest = $("select[id*='product']").val();

//Fetch a campaign number to initiate a call with
campaign.request_number({}, function (retreaver_number) {

//Initiate a call using a requested number, pass tags in "key:value" format
retreaver_number.initiate_call(visitor_phone_number, {

first_name: visitor_first_name,

last_name: visitor_last_name,

email: visitor_email,

phone_number: visitor_phone_number,

caller_zip: visitor_zip,

product_interest: visitor_interest

}, callInitiated); //Initiate Call

}) //Campaign.request_number

});//On Form Submit

//Callback function used to notify form filler of impending call
function callInitiated() {

alert("Your form has been successfully submitted, An agent will call you shortly.");
}

//Click-To-Call Functionality Ends here

};//On load

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(scriptElement);

})();

</script>


Adding Tags

Your Retreaver.js will be assigning data to the number as tags. To make tags available as tokens and view them in reporting, create them using Tags in Retreaver.

new-tag.png 

Testing Your Calls

You’ll want to test the process and calls in stages. For our example the following steps can help you troubleshoot set up:

  1. Make sure the agent receiving the call in the campaign is your phone number (Pause others if needed).
  2. Load your web page and enter in a name, email and phone number.
  3. Open your Numbers list in Retreaver. You should see a number in the list that has been tagged with the name and email.   If you do not see a number with tags. Check that you are adding tags to the number correctly in your script and that you named your tags the same as the values in the Retreaver.js.
  4. Submit the form. This should trigger a call into the campaign that routes to your number in step 1.
  5. Answer the phone. Confirm the whisper has been played and that the lead is then called.

After your test review the call log to confirm the data you captured.

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.