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