This article was originally posted on the Telestax blog as “How I Became a Rockstar Thanks to Telestax and Voxbone Part 2”. Part 1 of this series which introduces the Smart Dispatch application is available here.
Assuming you’ve read part 1, you now know what Smart Dispatch is and what is it for. So let’s dive into the code! Below, I’ve created a simple diagram that explains how the app works.
Workflow:
- User lands on webpage and authenticates using LinkedIn
- Webpage launches LinkedIn authentication and retrieves the user info to store in context variable
- Webpage uses location info from user to query Agent API based on user location
- SIP call to Restcomm instance with context header passed
- Restcomm directs call to Agent’s SIP client, records call, and sends information gathered to agent on hangup
Here is how the different parts are built:
1. Setting up the Dashboard & API
A. Create user
/* POST to Add User Service */ router.post('/adduser', function(req, res) { // Set our internal DB variable var db = req.db; // Get our form values. These rely on the "name" attributes var userFirstName = req.body.firstname; var userLastName = req.body.lastname; var userSegment = req.body.segment; var userPhone = req.body.number; var userDid = req.body.did; var userEmail = req.body.email; // Set our collection var collection = db.get('usercollection'); // Submit to the DB collection.insert({ "firstname" : userFirstName, "lastname" : userLastName, "segment" : userSegment, "number" : userPhone, "did" : userDid, "email" : userEmail }, function (err, doc) { if (err) { // If it failed, return error res.send("There was a problem adding the information to the database."); } else { // If it worked, set the header so the address bar doesn't still say /adduser res.location("userlist"); // And forward to success page res.redirect("/dashboard"); } }); });
B. Display user (JSON API)
router.get('/userlist:location', function(req, res) { var db = req.db; var urlParts = url.parse(req.url, true, true); var pathname = urlParts.pathname; var location = pathname.slice(10); console.log(segment); var collection = db.get('usercollection'); collection.findOne({location: location},function(e,docs){ res.send({ "userlist" : docs }); }); });
{"userlist":{"_id":"552a70de61817d46c06b162d","firstname":"Agent","lastname":"Man","location":"be","number":"32479810399","did":"+883510080047","email":"agent.man@gmail.com"}}
C. Other routes
2. Setting up the WebRTC Call Client
A. Authenticate with Linkedin, I use passport for that (more info here)
Don’t forget to set the appropriate permissions in order to access all the profile info you will need. I used:
scope: ['r_emailaddress', 'r_basicprofile', 'r_contactinfo’], profileFields: ['id', 'first-name', 'last-name', 'email-address', 'headline', 'phone-numbers', 'location', 'positions']
Then you can set all your context variables to the profile info like so:
var showprofile = profile, displayName = profile.name.givenName + ' ' + profile.name.familyName, phoneNumber = profile._json.phoneNumbers.values[0].phoneNumber, location = profile._json.location.country.code, email = profile._json.emailAddress, position = profile._json.positions.values[0].title, company = profile._json.positions.values[0].company.name;
B. Set up the getData() function called when authentication is done:
function getData(location){ request("http://where-your-api-is-hosted.com/userlist:"+location, function(error, response, body) { body = JSON.parse(body); var did = body.userlist.did; var agentNumber = body.userlist.number; var agentEmail = body.userlist.email; }); };
C. Set up the Voxbone WebRTC-SIP SDK to call
var context = {'clientName': userName, 'clientPhone': userPhone, 'agentNum': agentNum, 'userEmailAddress': userEmailAddress, 'userPos': userPos, 'userCo': userCo, 'userLoc': userLoc, 'pageurl': pageurl, 'agentEmailAddress': agentEmailAddress}
//Caller ID voxbone.WebRTC.configuration.uri = userPhone + "@voxbone.com"; //Display Name voxbone.WebRTC.configuration.display_name = userName; //Context info voxbone.WebRTC.context = JSON.stringify(context); //And finally call the right agent’s SIP URI voxbone.WebRTC.call(agentNum);
3. Setting up Restcomm
Now that you can send a call with context using a Voxbone phone number to a SIP URI, just link the phone number to your Restcomm’s instance URI (How to configure SIP URI with Voxbone). Here’s what my Restcomm App look like: