The Voxeo team unveiled Phono just a few weeks ago. Phono is an open-source SDK to embed telephones and instant messaging services in your web pages. With Phono, you can (among other things) add click-to-call buttons to your call center or your applications hosted on one of Voxeo’s platforms (and you will eventually be able to host your own server-side infrastructure soon).
To get a feel of how easy it is to embed these services on a web page, I decided to create an IM-like interface and a click-to-call button to a simple prototype application I developed some time ago. The voice application is VoiceXML-based and runs on Voxeo’s Evolution platform, while the IM application runs on IMified and uses grammarserver.com to interpret textual sentences. (Both applications are run by the same code, except for the presentation part. But what the applications does is not relevant to what follows.)
In a matter of minutes, I was able to come up with an IM widget that looks like this:
(Please, no comments on the UI. If I was trying to be paid for my artistic skills, I’d be bankrupt by now…)
The code
The HTML code for this page is quite straightforward:
<html>
<head>
<title>Phono Demo</title>
<link type="text/css" rel="stylesheet" href="im.css" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="http://s.phono.com/releases/0.1/jquery.phono.js"></script>
<script src="im.js"></script>
</head>
<body>
<div id="im_box">
<h3 align=center>SiteWatch Application</h3>
<div id="dialog" style="">
</div>
<input type="text" id="message" onkeydown="processKey(event)" disabled="true">
</div>
<button id="click2call" disabled="true" onclick="callApp()">Call Me!</button>
</body>
</html>
The real meat is in im.js, which I will now describe.
The file starts with the following code:
var PHONO_OPTIONS = {
apiKey: MY_API_KEY,
onReady: function() {
$("#message")[0].disabled = false;
$("#click2call")[0].disabled = false;
$("#message").focus();
},
messaging: {
onMessage: function(event) {
addInteraction('SiteWatch', event.message.body, 'server');
}
}
};
var phono = $.phono(PHONO_OPTIONS);
This code takes care of initializing the phono object. Once it is properly initialized and ready, the input area and the click-to-call button are both enabled. If something goes wrong during the initialization, they will remain disabled.
The next section handles the sending of messages to the application:
function processKey(event) {
if (event.keyCode == 13) {
sendMessage();
return false;
} else {
return true;
}
}
function sendMessage() {
var msg = $('#message').val();
if (msg == '') return;
$('#message').val("");
phono.messaging.send(MY_IM_ADDRESS, msg);
addInteraction('Me', msg, 'client');
}
The processKey function is called when a key is pressed in the text input area. If the return key is pressed, the message is sent to the remote IM address (here MY_IM_ADDRESS).
The function that displays both the outgoing and the incoming messages is :
function addInteraction(who, msg, cls) {
var dialogDiv = $('#dialog');
dialogDiv.append($("<div class='msg_" + cls + "'><b>"
+ who + ":</b> " + msg + "</div>"));
dialogDiv[0].scrollTop = dialogDiv[0].scrollHeight;
}
Finally, the code that takes care of the click-to-call button is here:
var call = null;
function callApp() {
if (call == null) {
call = phono.phone.dial("app:MY_VXML_APP", {
onAnswer: function() {
$("#click2call").text("Hangup");
},
onHangup: function() {
call = null;
$("#click2call").text("Call me!");
}
});
} else {
call.hangup();
}
}
Can that be simpler?
Ok, I must admit my first version was not as clean as this one. But it was functionally equivalent. And it was only 50 lines long (HTML and JavaScript included).
Conclusion
The Phono API is simple, yet powerful. The fact that it does not provide a standard UI is a very good thing too. This will let developers innovate and use Phono in very creative ways.
But there’s a single feature that IMHO will drive a lot of innovation: the session ID. Once the Phono object is properly initialized, it has a unique ID that is used as the caller ID when a phone call is made from the web page. And the ID is accessible from the phono object. Which means that the ID can be sent to the application server so both the HTML and the voice applications can share some data and communicate with each other. I’m pretty sure this will open the door to some really cool multi-channel AND multi-modal applications.
Update: Here is the CSS file that I used to create the screen shot above:
#im_box {
width: 300px;
border: 1px solid black;
padding: 0px;
background-color: #ddd;
}
#dialog {
height: 300;
overflow: auto;
font-size: 10pt;
font-family: Arial;
padding: 5px;
}
#message {
width: 300px;
border: 1px solid;
margin: 1px;
}
h3 {
border-bottom: 1px solid;
margin-top: 0px;
background-color: #eee;
}
.msg_client {
margin: 5px;
border: 1px solid;
padding: 3px;
background-color: white;
}
.msg_client b {
color: blue;
}
.msg_server {
margin: 5px;
margin-left: 15px;
border: 1px solid;
padding: 3px;
background-color: white;
}
.msg_server b {
color: red;
}
Update 2 (2010/11/01) : The whole source code is available on github.
13 Comments
Dominique,
Thanks for taking the time to publish such a fantastic example of using the PhonoSDK as a chat application!
Could you also post your CSS file? Seriously, some of us are even more challenged with CSS
Cheers,
@ChrisMatthieu
chris@phono.com
Hi Dominique,
Thanks for taking the time to write such an awesome example on how to use the PhonoSDK for IM chat! Could you post the CSS file too?
Thanks,
Chris
@chrismattieu Thanks for your comment. I just added the CSS file.
Dominique,
VERY cool example! Thanks for posting about it!
Dan
Hi Dominique,
after embeding HTML code in post on my blog, I was wondering which server to use for im.js and CSS file. I am on my first project with applications, so I will appreciate your answer.
Thanks
Hi!
I’d say this depends on many factors, like your choice of operating system, whether you just want to host files or if it must also support more dynamic applications, your familiarity with programming languages, etc. Of course, the two most popular ones are certainly Apache and IIS (from Microsoft).
Thanks for fast response.
Using WIN 7. Have limited programming languages ability and for now just to host files. As for the start which one is easier to build up this application?
Then IIS would probably do.
Is any option with web servers more secure? If so can you suggest one? Thanks