Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

API CTI  – Shuttle 2.4.0 onwards

You can integrate xCALLY Shuttle with any kind of external Web Applications you like (external custom CRM, Ticketing solution, ERP etc…).


Info
titleCompatibility

The example template was written in Javascript, but the integration can be written in other languages


The template.js file contains the basic elements to create your Custom CTI Integration through the realtime xCally Shuttle connection, thus providing the possibility to manage and autofill your external applications with the data about the call, like the caller number or the agent who answered the call and more. You can automatically open a CTI form or pop-up, and view the call/ticket/crm data on to the xCALLY Shuttle supervisor Realtime Dashboards.

The service need to connect to xcally-realtime service through the socket to receive event notification. At the meantime, the service will be able to send command and notification to agents and user sending actions to the socket.


Info
titleSecure connection

If Secure Connection is enabled, use https://localhost:8888 for socket connection, otherwise use http://localhost:98888 


You can download the template.js file herefile here and the service file here

Attachments
uploadfalse
oldfalse

Important: after the download, remember to rename the template.js file!


xcally API - CTI CustomImage RemovedImage Added

 


Event Ringing

...

The ringing event is dispatched following a ring event on an agent for a queue call

Code Block
languagejs
event.ringing = function(data) {
 console.log('ringing');
 wakeup('http://www.google.it', data.peer, 'new_tab');
};


This is the data sample for ringing event

Code Block
languagejs
titleData sample
{ 
  event: 'ringing',
  queue: 'CC-SIPPSupport',
  agentname: 'JohnAndrea DoeBianco',
  agentnum: '10071000',
  peer: 'SIP/johnandrea.doebianco',
  direction: 'inbound',
  uniqueid: '14370692641599601698.91494',
  context: 'from-sip',
  extension: '99996000',
  trunk: 'SIP/demo.trunktelephone-000003920000005e',
  callernum: '9981003',
  callername: 'telephone',
  ringing: true,
  sipname: 'andrea.bianco',
  channel: 'SIP/telephone-0000005e' 
}


Event Abandon

...

The abandon event is dispatched following a abandoned event on a queue call

Code Block
languagejs
event.abandon = function(data) {
  console.log('abandon');
};


This is the data sample for abandon event

Code Block
languagejs
titleData sample
{ 
  event: 'abandon',
  queue: 'Support',
  wakeup('https://www.zendesk.com/', data.peer, 'new_window');
};

Event Up

#E6E6FA
Panel
bgColor
 direction: 'unmanaged',
  uniqueid: '1599601824.96',
  callernum: '1003',
  callername: 'telephone',
  channel: 'SIP/telephone-00000060',
  holdtime: '4',
  unmanaged: true
}


Event Up

The up event is dispatched following an answer event on an agent for a queue call

Code Block
languagejs
event.up = function(data) {
  console.log('up');
  wakeup('http://localhost', data.peer, 'new_frame');
};


This is the data sample for up event

Code Block
languagejs
titleData sample
{ 
  event: 'up',
  queue: 'CC-SIPPSupport',
  agentname: 'JohnAndrea DoeBianco',
  agentnum: '10071000',
  peer: 'SIP/johnandrea.doebianco',
  direction: 'inbound',
  uniqueid: '14370692641599601698.91494',
  context: 'from-sip',
  extension: '99996000',
  trunk: 'SIP/demo.trunktelephone-000003920000005e',
  callernum: '998'1003',
  callername: 'telephone',
  holdtime: '2',
  ringtime: '0',
  up: true,
  sipname: 'andrea.bianco',
  channel: 'SIP/telephone-0000005e' 
}

 


Event Hang Up

...

The hang up event is dispatched following an hangup event on an agent for a queue call

Code Block
languagejs
event.hangup = function(data) {
  console.log('hangup');
  wakeup('http://www.google.it', data.peer, 'new_tab');
};

 

Event Outbound

...


...

This is the data sample for hangup event

Code Block
languagejs
titleData sample
{ 
  event: 'hangup',
  queue: 'Support',
  agentname: 'Andrea Bianco',
  agentnum: '1000',
  peer: 'SIP/andrea.bianco',
  direction: 'inbound',
  uniqueid: '1599601698.94',
  context: 'from-sip',
  extension: '6000',
  trunk: 'SIP/telephone-0000005e',
  callernum: '1003',
  callername: 'telephone',
  holdtime: '2',
  ringtime: '0',
  talktime: '2',
  reason: 'agent',
  hangup: true,
  sipname: 'andrea.bianco',
  channel: 'SIP/telephone-0000005e' 
}


Event Outbound

The outbound event is dispatched following the initiation of an outbound call by the agent

Code Block
languagejs
event.outbound = function(data) {
  console.log('outbound');
  wakeup('http://www.zendesk.it', data.peer, 'new_window');
};


 This is the data sample for outbound event

Code Block
languagejs
titleData sample
{ 
  event: 'outbound',
  integrationid: '-1',
  routeid: '1',
  agentname: 'Andrea Bianco',
  agentnum: '1800800800',
  direction: 'outbound',
  uniqueid: '1599601871.98',
  context: 'from-sip',
  extension: '3925926421',
  trunk: 'SIP/123456789@Demo Trunk',
  callernum: '123456789',
  channel: 'SIP/andrea.bianco-00000062',
  peer: 'SIP/andrea.bianco',
  outbound: true,
  sipname: 'andrea.bianco' 
}


Open CTI to an Agent

 

...

bgColor#E6E6FA

...

The wakeup method is used to request the agent to open a web page

Code Block
languagejs
var wakeup = function(url, peer, mode) {

  socket.emit('AgentCTI', {
    url: url,
    peer: peer,
    mode: mode
  });
};

...

mode: how the CTI form will be opened. Values: new_tab, new_window, new_frame 


Push a notification to the Agent

 

...

The notification method is used to send a notification to the agent

Code Block
languagejs
var notification = function(peer, type, title, body) {
  socket.emit('AgentCTINotification', {
    peer: peer,
    type: type,
    title: title,
    body: body
  });
};

where

peer: the Agent interface

...

body: the message of the toast that will be displayed to the Agent 


Push the event into the Integration Realtime section of the Administrator

These data will populate the following section of xCALLY Realtime:

Image Removed

 

...

The pushevent method is used to display trigger action event in Realtime section

Code Block
languagejs
var pushevent = function(appname, data, reference, url) {
  data.time = new Date();
  socket.emit('RealtimeCTI', {
    type: appname,
    channel: data,
    reference: reference,
    url: url
  });
};

 

where

appname: name of the Integration

data: object containing information about the call

reference:  CTI creation id

url: the address of the CTI


Example

 

For each event you can define which action you want the integration to perform. 

In this example we associate to the UP event the CTI opening to an Agent, if the call belongs to the Sales Queue. 

We also pass to the Agent a custom variable called ordernumber that we have created into the Shuttle -> Settings -> Integrations -> Custom variables section.Image AddedordernumberImage Removed

Code Block

...

language
Panel
bgColor
js#E6E6FA
event.up = function(data) {


    var order = customvariables[data.uniqueid]['ordernumber'];


 
  if
   if(data.queue == ‘Sales’){


         wakeup('http://webservice1/sales?ordernumber='+order, data.peer, 'new_frame');}


    }

};

...


};


Add a custom integration service


1. Download the service file ’template’ and save it into the directory /etc/init.d/ of your xCALLY Shuttle server
2. Rename the ‘template’ file with your custom name
3. Open the ’template’ file and change all occurrences of '<name-file>’ with the name of the JavaScript file (template.js) you previously save into /var/www/html
4. Change the permission of the ‘template’ file: chmod 755 /etc/init.d/template (change template with the right name)
5. Add the ’template’ service: chkconfig —add template (change template with the right name)
6. Start the service: service template start (change template with the right name)

With this configuration, your custom service will runs in parallel to xCALLY Shuttle Realtime service.