Jabber Custom Tab Popup URL with
Calling Number
This article is to explain the codes that makes Jabber pop
up a window in an URL+ Caller ID format pointing your web CRM application. The codes
use Javascript to monitor the state of TelephonyConversationEvent and automatically have a popup.
The custom tab is hosted in whatever a web server. And Tpop.js has a
reliance on json2.js to parse data in TelephoneyConversationEvent
json object. So please download it and put it to the ./js folder
index.html
<!doctype
html>
<html
lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
content="">
<meta name="author"
content="">
<link rel="icon"
href="favicon.ico">
<title>YOUR_APPLICTION_NAME</title>
<!-- Bootstrap core CSS -->
<link
href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template
-->
<link
href="css/sticky-footer.css" rel="stylesheet">
<script
type="text/javascript" src="js/tpop.js"></script>
<script
type="text/javascript" src="js/json2.js"></script>
</head>
</head>
<body
onload="OnLoadMethods()">
<table
class="table table-striped">
<thead>
<tr>
<th
scope="col">Status</th>
<th scope="col">Caller
ID</th>
</tr>
</thead>
<tbody>
<tr>
<th id="state"
scope="row"> --- </th>
<td id="callerid"> --- </td>
</tr>
</tbody>
</table>
</body>
</html>
Tpop.js
function OnPresenceStateChanged (jid,
basicPresence, localizedPresence)
{
var
cell = document.getElementById(jid)
cell.innerText
= basicPresence.concat(", ",localizedPresence);
}
function
OnTelephonyConversationStateChanged(json)
{
var
callerid = document.getElementById("callerid");
var
state = document.getElementById("state");
var
conversation = JSON.parse(json);
if
(conversation.acceptanceState == "Pending" &&
conversation.state == "Started") {
state.innerText
= conversation.acceptanceState + "/" + conversation.state +
"-> about to screen pop";
for
(var i=0; i<conversation.remoteParticipants.length; i++) {
callerid.innerText
= conversation.remoteParticipants[i].translatedNumber;
window.open("http://www.google.com/customerSearch.html?number="
+ conversation.remoteParticipants[i].translatedNumber);
}
}
}
function SubscribePresence()
{
window.external.SubscribePresence('john.doe@abc.com');
}
function OnLoadMethods()
{
SubscribePresence();
OnTelephonyConversationStateChanged();
}
Demo
