The “Call Me” concept isn’t new but it’s low-hanging fruit that many don’t take advantage of. Using Amazon Connect, we’ll create a simple UI to improve the caller experience while saving 46% on our telephony costs (assuming we’re making US-destined calls with a US East/West instance) by diverting inbound toll-free calls to outbound DID calls. This is an extension of the “Placing Outbound Calls Using Amazon Connect API” post I did a couple months ago. That post should be your starting point if the code examples below aren’t lining up for you.
The Benefits
The result of a “Call Me” UI is a streamlined caller experience whereby the point of conversion (whether that’s a sale, lead, support request, or other) is merged with a “Call Me” experience that allows you to control the population they speak to and how they get to that population. Beyond the caller experience side (where they benefit from not having to repeat their issue multiple times, not losing their self-service history once they contact, etc), there’s a financial benefit (at least with Amazon Connect). As the Call Me experience is outbound and DID dialing, the costs per minute are ~46% lower than inbound toll-free dialing:
Beyond the immediate telephony cost savings and user experience improvement, there’s also the added benefit of transfer reduction and better staff tiering as you know the customer-selected issue before they call (and can route to the correct population/tier based on that issue selection). Additionally, there’s likely a reduction in caller identification, authentication, etc. It’s a win-win that takes very little effort to implement.
What we’re doing
- Creating a simple form to allow the customer to enter their phone number and also pass some basic contextual attributes that we’ll present to the agent.
- Setup a contact flow to deliver a custom greeting based on contact attributes we pass via the outbound call.
- Placing an outbound call to the customer.
- Surfacing the contact attributes to the agent via the Streams API (assumes you already have this installed).
You can download the full demo here.
Caller Experience Demonstration:
Agent Experience Demonstration:
Step 1: Creating the “Call Me” UI/Form
To make this look a bit spiffier than just generic forms, I’ll use the Cerulean Bootstrap theme.
We’ll include hidden fields to mimic the following attributes:
- Last page the user was on before trying to contact
- The authentication status of the user (if they’re authenticated, no need to go through this step on the call)
- The VIP status of the user (are they searching for expensive items, a very loyal customer, etc?)
And we’ll surface the following fields to the user to verify accuracy and collect additional information up front:
- Their phone number/the number we should call
- The issue they’re calling about
<form id="callMeForm" method="POST" action="handler.callme.php">
<input type="hidden" value="http://example.com/help/lostpassword" id="lastPage" name="lastPage">
<input type="hidden" value="false" id="authenticatedStatus" name="authenticatedStatus">
<input type="hidden" value="true" id="vipStatus" name="vipStatus">
<fieldset>
<div class="form-group">
<label for="issueSelected">What can we help you with?</label>
<select class="form-control" id="issueSelected" name="issueSelected">
<option>Pre-Purchase</option>
<option>Purchase Experience</option>
<option>Post-Purchase</option>
<option>Other</option>
</select>
</div>
<div class="form-group">
<label class="col-form-label" for="phoneNumber">We'll call you at:</label>
<input type="text" class="form-control" placeholder="+15555555555" id="phoneNumber" name="phoneNumber">
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Call Me Now</button>
</fieldset>
</form>
Step 2: Placing the outbound call
Starting with a blank contact flow, we’ll set it to:
- Detect the value of the “VIP” attribute we set
- If VIP=true, we’ll play a special prompt
- If VIP<>true, we’ll play a standard, more generic prompt.
- Locate the caller’s name (via stored attribute) and pass it to the contact flow to greet the caller by name.
- After greeting, terminate the contact.
The full contact flow:
In order to play the caller’s name as part of the prompt, we’ll reference the user-defined attribute we set in step 2 (see referenced code example zip file): “Hello VIP caller $.Attributes.CustomerFirstName“.
Step 3: Placing the Outbound Call to the Caller
Using the snippet from the “Placing Outbound Calls Using Amazon Connect API” post, we’ll simply add in an associative array of key/values which will be available for reference within the contact flow (ie greeting by name based on VIP status) and also stored in the contacts trace record:
//Include AWS SDK
require '/home/bitnami/vendor/autoload.php';
//New Connect client
$client = new Aws\Connect\ConnectClient([
'region' => 'us-west-2', //the region of your Connect instance
'version' => 'latest',
'credentials' => [
'key' => '', //IAM user key
'secret' => '', //IAM user secret
]
]);
//Capture form fields - should do some additonal sanitation and validation here but this will suffice as a proof of concept
$lastPage=$_POST['lastPage'];
$authenticatedStatus=$_POST['authenticatedStatus'];
$vipStatus=$_POST['vipStatus'];
$issueSelected=$_POST['issueSelected'];
$phoneNumber=$_POST['phoneNumber'];
$customerFirstName="Kevin";
//Place the call
$result = $client->startOutboundVoiceContact([
'Attributes' => array("LastPageViewed"=>"$lastPage",
"Authenticated"=>"$authenticatedStatus",
"VIP"=>"$vipStatus",
"IssueSelected"=>"$issueSelected",
"CustomerFirstName"=>"$customerFirstName"),
'ContactFlowId' => '', // REQUIRED
'DestinationPhoneNumber' => "$phoneNumber", // REQUIRED
'InstanceId' => '', // REQUIRED
'QueueId' => '', // Use either QueueId OR SourcePhoneNumber. SourcePhoneNumber must be claimed in your Connect instnace.
//'SourcePhoneNumber' => '', // Use either QueueId OR SourcePhoneNumber. SourcePhoneNumber must be claimed in your Connect instnace.
]);
echo "<pre>";
print_r($result);
echo "</pre>";
Step 4: Displaying the Connect contact attributes for the agent
For this, we’ll use the Streams API (assuming you already have this setup and in place). Using the same styling from the Caller side demo, we’ll create an agent UI. I’ve plugged in the various API references below so I believe it’s pretty straight forward to follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Call Me Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./_variable.css">
<link rel="stylesheet" href="./_bootswatch.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style type="text/css">
.ccp {
width: 350px;
height: 465px;
padding: 0px;
}
.ccp iframe {
border: none;
}
</style>
</head>
<body>
<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<div class="container">
<a href="../" class="navbar-brand">Call Me Demo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#" target="_blank">user</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="forms">Incoming Call</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div id="ccpDiv" class="ccp" >
<!-- your contact control panel will display here -->
</div>
</div>
<div class="col-lg-8">
<div id="connectAttributesDiv">
<!-- the contact attributes will display here -->
</div>
</div>
</div>
<script src="../amazon-connect-streams/amazon-connect-v1.2.0-34-ga.js"></script> <!-- replace this with your streams JS file -->
<script>
window.contactControlPanel = window.contactControlPanel || {};
var ccpUrl = "https://<YOUR Connect CCP URL HERE.awsapps.com/connect/ccp#/"; //Plug in your Connect CCP address here
//Contact Control Panel https://github.com/aws/amazon-connect-streams/blob/master/Documentation.md#connectcoreinitccp
connect.core.initCCP(ccpDiv, {
ccpUrl: ccpUrl,
loginPopup: true,
softphone: {
allowFramedSoftphone: true
}
});
//Subscribe a method to be called on each incoming contact
connect.contact(eventListener); //https://github.com/aws/amazon-connect-streams/blob/master/Documentation.md#connectcontact
//The function to call on each incoming contact
function eventListener(contact) {
window.contactControlPanel.contact = contact;
updateAttributeElement(contact.getAttributes()); //https://github.com/aws/amazon-connect-streams/blob/master/Documentation.md#contactgetattributes
contact.onEnded(clearAttributeElement); //https://github.com/aws/amazon-connect-streams/blob/master/Documentation.md#contactonended
}
//Loops through attributes object and prints out the corresponding key:value
function updateAttributeElement(msg){
for (var key in msg) {
if (msg.hasOwnProperty(key)) {
var connectAttributesDiv = document.getElementById("connectAttributesDiv");
var newAttribute = document.createElement('div');
newAttribute.innerHTML = '<strong>' + key + '</strong>: ' + msg[key]['value'] + '<br />';
while (newAttribute.firstChild) {
connectAttributesDiv.appendChild(newAttribute.firstChild);
}
}
}
}
//Clears the previous contact attrbitues onEnded (disconnect) of contact
function clearAttributeElement(){
document.getElementById("connectAttributesDiv").innerHTML = "";
}
</script>
</body>
</html>
The end result is a “Call Me” framework that can be used to capture pass session attributes through to the contact experience:
