Questa sezione ha il compito di illustrare un esempio di integrazione che fa uso della lilbreria AgentDesktop Widget SDK al fine di poter gestire ed essere notificato dei contatti proposti all'operatore e poterne intercettare le relative notifiche all'interno della propria web-application.
Ricordiamo inoltre che AgentDesktop dispone di un Widget di esempio che illustra con del codice esemplificativo la maggior parte di situazioni e problematiche che l’integratore dovrà affrontare nel corso della realizzazione di un Widget personalizzato. Il Widget è presente in ogni distribuzione di AgentDesktop al seguente indirizzo: /AD/widget/agentdesktop_widget_sample.html
Figura 1 - La interfaccia principale del Widget di esempio che illustra l’utilizzo delle API suddividendole per categoria di appartenenza
Inclusione della libreria Javascript AgentDesktop Widget SDK all'interno della propria pagina:
<!-- AgentDesktop SDK Widget --> <script type="text/javascript" src="/AD/widget/agentdesktop_widget.js"></script>
Registrazione di una propria funzione al fine di essere notificato degli eventi in corso sulla barra telefonica:
// Bind Contacts/Agents Events AGENTDESKTOP.WIDGET.unbindContactCallback(WidgetContactCallback); AGENTDESKTOP.WIDGET.bindContactCallback(WidgetContactCallback);
La funzione “WidgetContactCallback” verrà richiamata dalla libreria SDK automaticamente ogni qual volta si avrà una qualsiasi attività sia a livello di barra telefonica (ingresso di una chiamata, cambio di stato del contatto) oppure ogni volta che l’operatore modificherà la sua presenza sul media telefonico richiedendo per esempio la pausa o la login.
Gestione dello Stato Logico dell’Operatore
Gli eventi notificati ad AgentDesktop verso il Widget hanno una struttura JSON in cui la proprietà “event” descrive l’evento stesso. Possiamo per esempio ipotizzare una prima integrazione che riesca ad intercettare il cambiamento di stato dell’operatore al fine di poter contestualizzare la propria pagina del CRM in accordo alla disponibilità dell’agente loggato.
function WidgetContactCallback(jQuery_eventType, data) { var DataObj = null; DataObj = JSON.parse(data); if (DataObj.event == "AGENT:LOGGEDIN") { // Operatore loggato } if (DataObj.event == "AGENT:PAUSE") { // Operatore in pausa } if (DataObj.event == "AGENT:LOGGEDOUT") { // Operatore appena sloggatosi }
Gestione della assegnazione di un nuovo contatto all’operatore
Un altro scenario di integrazione è rappresentato dalla notifica sull’ingresso di un nuovo contatto telefonico schedulato dal sistema CTI ed assegnato all’operatore. In questo caso l’evento POPUP determina il primo momento utile di presa in carico di un contatto da parte dell'operatore.
if (DataObj.media_type.toUpperCase() == "TELEPHONY") { // Gestisco solo gli eventi telefonici ed escludo le tipologie di contatto chat e multimediale if (DataObj.event.toUpperCase() == "POPUP") { // Primo evento utile per la presa in carico di un contatto if (DataObj.isACD == true) { // Gestico solo le telefonate schedulate dal sistema verso l'operatore } } }
Gestione di una chiamata manuale
E' possibile individuare una chiamata gestita dal CTI rispetto ad una chiamata effettuata manualmente dall’operatore. In questo caso andremo ad intercettare il primo evento utile di impegno della linea telefonica. ovverosia l’evento CONNECTIONSTARTED.
Una nuova proprietà denominata “job_type” ci informa sulla origine del contatto. Nel caso sia valorizzata a “manual” significa che la telefonata è frutto di una esplicita richiesta da parte dell’operatore e non è gestita direttamente dal sistema ContaCT7.
if (DataObj.media_type.toUpperCase() == "TELEPHONY") { // Censimento delle CHIAMATE MANUALI richieste direttamente dall'operatore via AgentDesktop Toolbar o via API if (DataObj.event.toUpperCase() == "CONNECTIONSTARTED") { if ( (DataObj.isACD == false) && (DataObj.job_type == "manual") ) { } } }
Comporre una chiamata manuale uscente
E' possibile eseguire una chiamata uscente andando ad intercettare l’evento “click” di un pulsante definito nella propria web-app. Nell’handler dell’evento si andrà a richiamare la API di AgentDesktop “MakeCall”.
// Make Call jQuery("#btnMakeCall").click( function() { AGENTDESKTOP.CONTACT.MakeCall( jQuery("#inputDestinationNumber").val() ); } ); // Hangup Call jQuery("#btnHangup").click( function() { AGENTDESKTOP.CONTACT.Hangup(); } );
Visualizzazione di messaggi di errore
E' possibile visualizzare tramite la interfaccia grafica di AgentDesktop dei messaggi di errore relativi al funzionamento del proprio Widget.
Per esempio al click dell'operatore sul pulsante "Make Call", viene verificata la numerazione inserita nel campo input "Destination Number”" e 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 4 secondi :
//Visualizzazione come finestra di dialogo centrale AGENTDESKTOP.ALERT.Notify("Numerazione non valida", "Il numero telefonico selezionato contiene caratteri non validi.", "fa fa-tty fa-2x", 4);