TaCode Tuesday: How to Include a "Free Call" Feature on Your Website

Posted by Pedram Mohammadi on January 24, 2017

Yay for Tuesday!   TaCODE Tuesday means means your favorite developer at Zang is here to deliver free snippets of code for use in your very own text/voice apps along with hilarious taco puns. Did you know that 77% of online customers want to talk to a real person before making a purchase? Let us help you make it easy for them by using Zang to create a “free call” feature for your website. Here's your code to git 'er done!

Let's Taco 'Bout Your Customer's Experience

Competition is high in e-commerce: same products with the same prices – customers can choose any site to buy from and it wouldn’t make a difference. However, if there is something unique about the website, like free shipping, good customer service, flash sales, or discount coupons, customers may keep on coming back.

One thing is for sure, the quality of customer service can make or break a company. In fact, A DialogTech study showed 77 percent of online customers wanted to talk to a real person before making a purchase because 58 percent of the time, their questions couldn’t be answered by the information provided by the site they want to buy from.

Because of this, providing a phone number that customers can call to clarify product specifications can cut back on the amount of refunds or returns an e-commerce site must deal with. In fact, about 15 percent of sales loss for one e-commerce site could be attributed to the fact that customers didn’t have a phone number to call for more information.

Phone Number E-Commerce Strategy

Utilizing phones to increase sales and improve customer satisfaction should be part of an online business’ overall marketing and retention strategy.  In fact, there are three ways you can leverage it:

  1. Make it easy for customers to call. Provide a toll-free number or better yet, give out free-calls! Place your phone number strategically on your website so that customers will find it easy to reach you.  You can also include them in your emails and digital marketing materials.
  2. Utilize the information from these calls to find out more about your customers. Functioning much like Google Analytics or AdWords, tracking where the call originated from, the profile of the customer who made the call, and most importantly the objective of the call, would help improve customer service practices.
  3. A cost-efficient call center staffed with people who really know the products and its customers will help in fostering loyalty and driving sales. One way of doing this is starting with the right technology stack. Building a virtual call center is a good start – where instead of building your IVR system on-premise, you can opt to subscribe to cloud based applications or create your own systems through cloud-based VOIP/cPaaS such as Zang.

 

In this week’s TaCode Tuesday blog, we will show you how to create and add a “free call” feature to your already existing PHP website. This feature is represented by a call button that will enable customers to contact your support straight from your website free of any call charges.

The mind map below shows some strategic places where you can place the free call button. Mainly presented as a “call to action,” this will make it easy for users to reach sales or customer service.

Figure 1:  Some strategic places to put the “Free Call” button

 

Let’s start coding!

Basic Requirements:

  • Intermediate knowledge of PHP
  • Intermediate knowledge of JavaScript
  • Intermediate knowledge of cURL
  • Basic HTML
  • Basic knowledge of Zang APIs. Not subscribed yet? Start here.
  • Zang Phone Number

 

Step 1: Identify strategic places where you can put the Free Call button to maximize its value. You can refer to the mind-map above, or use third-party services to find other pages. For this example, let’s put the call button on the Product Details page. The customer in this scenario wants to have more information about the product before making a purchase.

Let’s start by creating an HTML page with a call button to click.

 

<!DOCTYPE html>

<html>

<body>

<div id="demo">

 <h2>Call us for free</h2>

 <button type="button" onclick="freeCall()">Free call</button>

</div>

</body>

</html>

 

Step 2: Create a "call trigger" function that will launch the Zang dialer connecting to a live agent to ask more information about the product. For this, we have two scenarios:

First scenario: A registered user who is already logged-in makes a call.

Second scenario: An unregistered user wants to make a call. Here, since the customer is not yet a member, you may want him or her to sign-up first so they become a sales lead. Upon clicking the call button, a Registration Form will pop-up prompting him or her to enter their details.

 

Step 2.1 Let us go with the first scenario. Start with a JavaScript Ajax to handle the button. A JavaScript enabled “click to call” hyperlink or form button on your site makes it easy to invoke your customer service hotline.

//javascript

<script language="javascript" type="text">

 

<script>

function freeCall() {

 var xhttp = new XMLHttpRequest();

 xhttp.onreadystatechange = function() {

   if (this.readyState == 4 && this.status == 200) {

     document.getElementById("demo").innerHTML =

     this.responseText;

   }

 };

 xhttp.open("POST", "free_call.php?", true);

 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

 xhttp.send("mode=free");

 xhttp.send();

}

</script>

 

Step 2.2 Create a PHP file that will respond to your Ajax request.

<?php

// get the variable from ajax post

if (($_REQUEST['mode']) == 'free' ) {

// CURL initialiser starts here

}

?>

 

Step 2.3 Inside your PHP file invoke Zang call API via cURL.

<?php

//after extracting $_POST data from the Ajax post on step 3 initialise your CURL

 

$url = 'https://api.zang.io/v2/Accounts/{AccountSID}/Calls.json';

 

//custom create your time via php mktime and datetime function

//Wed, 13 Jul 2016 15:25:01 -0000

$date_updated = mktime({hour},{minute},{second},{month},{day},{year},{is_dst});

 

//Wed, 13 Jul 2016 15:25:01 -0000

$date_created = mktime({hour},{minute},{second},{month},{day},{year},{is_dst});

 

//build your JSON string as required by the Zang Api for "make a call"

$JSON_fields = array(

'date_updated' => urlencode($date_updated),

'parent_call_sid' => urlencode({PARENT_CALL_SID}),

'duration' => urlencode({INT_DURATION}),

'from' => "{+15555555555}",

'to' => "{+19999999999}",

'caller_id_blocked' => {false},

'answered_by' => "nobody",

'sid': "{CallSid}",

  'recordings_count': "",

  'price': "0.00",

  'api_version': "v2",

  'status': "queued",

  'direction': "outbound-api",

  'start_time': null,

  'date_created': "{date_created}",

  'subresource_uris': {

   'notifications': "/v2/Accounts/{AccountSid}/Calls/{CallSid}/Notifications",

   'recordings': "/v2/Accounts/{AccountSid}/Calls/{CallSid}/Recordings"

 },

 'forwarded_from': "",

 'uri': "/v2/Accounts/{AccountSid}/Calls/{CallSid}",

 'account_sid': "{AccountSid}",

 'duration_billed': 0,

 'end_time': null,

 'phone_number_sid': ""

);

 

$data_string = json_encode($JSON_fields);  

 

//open connection

$ch = curl_init();

 

//set the url, number of POST vars, POST data

curl_setopt($ch,CURLOPT_URL, $url);

curl_setopt($ch,CURLOPT_POST, count($fields));

curl_setopt($ch,CURLOPT_POSTFIELDS, $data_string);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                                                      

curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                                                          

   'Content-Type: application/json',                                                                                

   'Content-Length: ' . strlen($data_string))                                                                       

);                                                                                                                   

 

//execute post

$result = curl_exec($ch);

 

//close connection

curl_close($ch);

?>

 

Step 2.4 Use PHP to create your Zang InboundXML handler for the call to be redirected to your customer service.

<?php

 

echo '<Response>

<Say>Thank you for using ABC Shop Free Call.</Say>

 <Dial action="{http://webhookr.com/interpreter-voice-sample}">4125551680</Dial>

 <Say> Please wait while we connect you to our Customer Service hotline</Say>

<Hangup/>

</Response>';

 

?>

 

Step 2.5 Wire all things together.

<?php

if (($_REQUEST['mode']) == 'free' ) {

try {

       //insert the code from step 4

} catch (Exception $e) {

        // Failed calls will throw

       return $e;

   }

else {

echo 'Problem initiating call. Please try again later.'

}

?>

 

Step 3: Fetch relevant information about the customer and the nature of his call from your already existing database and send it to customer service at the same time the call is made. There are two ways to do this.

The first option is to create a web service that contains customer information that the CRM system of your contact center will receive every time they receive the "free call" **  

The second option is to send an email directly to a common inbox which the agent will look at every time they receive the "free call." The email will contain customer information that is beneficial to successfully complete the call. For this purpose, let us push basic customer information like Customer ID, Name, Location, and Order Number.

 

Step 3.1 Extract the information details of the user from the database

<?php

$link = mysqli_connect("localhost", "my_user", "my_password", "world");

 

/* check connection */

if (mysqli_connect_errno()) {

   printf("Connect failed: %s\n", mysqli_connect_error());

   exit();

}

 

//where $user_id is the Id of the currently logged profile

 

/* Select queries return a resultset */

if ($result = mysqli_query($link, "SELECT * FROM Tbl_Customer WHERE Tbl_Customer.Id=".$user_id))

{

   printf("Select returned %d rows.\n", mysqli_num_rows($result));

   while ($row=mysqli_fetch_row($result))

   { //fetch row

    printf ("%s (%s)\n",$row[0],$row[1]);

    //use the fetch rows item to send it to the customer agent

    sendProfile($row[0],$row[1]),$row[2];

   }

   /* free result set */

   mysqli_free_result($result);

}

 

mysqli_close($link);

 

?>

 

Step 3.2 Create a function that will send the information of the user to the call center agent's email

<?php

function sendProfile($customer_name, $customer_location,$customer_ordernumber)

{step

$to      = '{customer.agent@mycallcenterdomain.com}'; // example email address

$subject = 'Free Call: Customer 343539834';

$message = 'Customer 343539834, Doe John, located in Downey Los Angeles  

             California ZIP 90240, Order No.8473';

$headers = 'From: customer.agent@mycallcenterdomain.com ' . "\r\n" .

    'Reply-To: customer.agent@ mycallcenterdomain.com ' . "\r\n" .

    'X-Mailer: PHP/' . phpversion();

$mail_flag = mail($to, $subject, $message, $headers);

if ($mail_flag) {

echo 'Email has been sent.';

} else {

echo 'Sending email failed.'

}

}

?>

 

A Seamless Process

Once the agent picks up the call and the customer information email is successfully sent, the process is already complete. You also have the option to record and transcribe the call that took place, which is something we’ll cover in a future TaCode Tuesday post. If you want to be notified when it’s published, hit subscribe! In the meantime, our technical support team will be happy to assist you if you need help using this code for your own project.



Topics: Ideas, TaCode Tuesday, cPaaS