Friday, 13 July 2018

Jabber Custom Tab Popup URL with Calling Number


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

 pops up url as http://www.google.com/customerSearch.html?number=+15131112222, remember you can custom it in tpop.js file to make up whatever format you want.





No comments:

Post a Comment