Viene ora mostrato il codice di un semplice widget che permette di effettuare o abbattere una chiamata telefonica e visualizza gli eventi ricevuti da AgentDesktop relativi ai contatti assegnati all'operatore.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>AgentDesktop Widget Example - Reitek S.p.A.</title>
<!-- Font-Awesome -->
<link href="./../libs/Font-Awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Bootstrap -->
<link href="./../libs/Bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script type="text/javascript" src="./../libs/jQuery/jquery-1.11.3.min.js"></script>
<script>
jQuery.noConflict();
</script>
<!-- Bootstrap -->
<script src="./../libs/Bootstrap-3.3.5/js/bootstrap.min.js"></script>
<!-- AgentDesktop Widget -->
<script type="text/javascript" src="./../widget/agentdesktop_widget.js"></script>
<script type="text/javascript">
jQuery( document ).ready(function() {
AGENTDESKTOP.WIDGET.unbindContactCallback(WidgetContactCallback);
AGENTDESKTOP.WIDGET.bindContactCallback(WidgetContactCallback);
jQuery("#btnChiama").off("click");
jQuery("#btnChiama").unbind("click");
jQuery("#btnChiama").unbind();
jQuery("#btnChiama").on("click", function(e) {
var Destination = "";
var RegExprObj = null;
var isMatch = false;
Destination = jQuery("#txtComposizione").val();
Destination = Destination.replace(/ /g, '');
Destination = Destination.replace(/-/g, '');
Destination = Destination.replace(/\//g, '');
Destination = Destination.replace(/\./g, '');
RegExprObj = new RegExp("^[+0123456789]+$", "i");
isMatch = RegExprObj.test(Destination);
if (isMatch == true) {
if (Destination.length > 0) {
AGENTDESKTOP.CONTACT.MakeCall(Destination,"","","","");
}
} else {
AGENTDESKTOP.ALERT.Notify("Numerazione non valida", "Il numero telefonico selezionato contiene caratteri non validi.", "fa fa-tty fa-2x", 2);
}
});
jQuery("#btnAggancia").off("click");
jQuery("#btnAggancia").unbind("click");
jQuery("#btnAggancia").unbind();
jQuery("#btnAggancia").on("click", function(e) {
AGENTDESKTOP.CONTACT.Hangup();
});
});
function WidgetContactCallback(jQuery_eventType, data) {
try {
var ContactObj = JSON.parse(data);
jQuery("#ContactCallBackData").text( AGENTDESKTOP.WIDGET.GetTimeStamp() + " : " + data );
} catch (err_WidgetContactCallback) {
}
}
</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="well" style="margin-bottom: 0px;">
<div class="panel panel-primary" style="height: 160px;">
<div class="panel-heading">
<h3 class="panel-title"><span class="fa fa-phone fa-2x"></span> Nuova chiamata</h3>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="txtComposizione" class="control-label col-xs-2">Composizione:</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="txtComposizione" placeholder="numerazione da chiamare">
</div>
</div>
</form>
<div class="col-md-12 text-center">
<button id="btnChiama" type="button" class="btn btn-success">
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> Chiama
</button>
<button id="btnAggancia" type="button" class="btn btn-danger">
<span class="fa fa-times fa-1x" aria-hidden="true"></span> Aggancia
</button>
</div>
</div>
</div>
</div>
<br/>
<div class="well" style="margin-bottom: 0px;">
<div class="panel panel-primary" style="height: 230px;">
<div class="panel-heading">
<h3 class="panel-title"><span class="fa fa-bell-o fa-2x"></span> Ricezione evento da AgentDesktop</h3>
</div>
<div class="panel-body">
<code style="-ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;">Qui vengono visualizzati gli eventi relativi ai contatti assegnati all'operatore.</code>
<br/>
<code id="ContactCallBackData" style="-ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;">Evento</code>
</div>
</div>
</div>
</body>
</html>
Analizziamo il codice nel dettaglio.
Nella sezione head del documento html, dopo l'inclusione di utili librerie esterne come Font Awesome, jQuery e Bootstrap, è fondamentale importare il modulo
<script type="text/javascript" src="./../widget/agentdesktop_widget.js"></script>
per poter aver a disposizione il namespace AGENTDESKTOP e poter richiamare le API. Nel successivo tag script è contenuto il cuore della logica di funzionamento del widget. Al caricamento del documento, viene immediatamente chiamata
AGENTDESKTOP.WIDGET.bindContactCallback(WidgetContactCallback)
che effettua la bind della funzione WidgetContactCallback al fine di ricevere le notifiche sui contatti in gestione. Questa funzione, definita prima della chiusura del tag script, visualizza semplicemente nel riquadro "Ricezione evento da AgentDesktop" l'oggetto evento così come ricevuto da AgentDesktop. Ad ogni notifica di evento ricevuta, il testo nel riquadro varia dinamicamente di conseguenza. Si noti che nella funzione viene chiamata l'API
AGENTDESKTOP.WIDGET.GetTimeStamp()
per mostrare data e ora correnti. Al click dell'operatore sul pulsante "Chiama", viene verificata la numerazione inserita nel campo input "Composizione" e se contiene un numero telefonico valido, viene fatta partire una nuova chiamata tramite l'API
AGENTDESKTOP.CONTACT.MakeCall(Destination,"","","","").
Nel caso in cui il campo input sia vuoto o non contenga un numero di telefono valido, viene visualizzata una finestra informativa per un tempo di 2 secondi contenente il messaggio "Il numero telefonico selezionato contiene caratteri non validi.":
AGENTDESKTOP.ALERT.Notify("Numerazione non valida", "Il numero telefonico selezionato contiene caratteri non validi.", "fa fa-tty fa-2x", 2).
Infine, al click dell'operatore sul pulsante "Aggancia", viene abbattuta la chiamata in corso (nel caso sia attiva) tramite l'API:
AGENTDESKTOP.CONTACT.Hangup().
Il risultato finale del widget integrato in AgentDesktop è mostrato nella figura sottostante. 
Page Comparison
General
Content
Integrations