Transfer Widget - Code Set

Integration

Transfer widget is created a web component meaning as long as you have the library (app-session-controller.js) in the script section of html i.e.

<script src="app-session-controller.js"></script>

In order instantiate the widget it needs to be included where required in html.

<app-session-controller initiator="A6000" target="A6001" catiapiurl="https://192.168.1.166/wp_cati_api" catiapisocketurl="https://192.168.1.166" catiapisocketpath="/wp_cati_api/socket.io" diallerapiurl="https://192.168.1.166/wp_dialler_api"></app-session-controller>

Widget takes following parameters

initiator={predefined agent name}
target={predefined target agent name}
catiapiurl={url to Invade's cati api (provided by Invade)} 
catiapisocketurl={url to Invade's cati api for socket connections (provided by Invade)} 
catiapisocketpath={socket connection path (provided by Invade)}
diallerapiurl={url to Invade's dialler api (provided by Invade)}

Look and feel

When no “Initiator” & “New target” is not set

Clicking on “Initiator” and “New target” will present a list of logged on agents

When “Initiator” and “New target” is set

When both initiator and target are set and Initiator has an active call the transfer can be initiated by clicking “Start” button. It will put a respondent on hold and connect to target telephone number. When connection is established to target the “Agent” button will be colored in green.

If “Respondent“ button clicked in the above state the dialler will connect initiators audio path to respondent and “Respondent” button will turn green.

All three parties can be conferenced in by clicking “Conference” button.

In order to complete the transfer “Complete” button needs to be clicked.

Getting state

<app-session-controller> has real time attributes reflecting transfer states. Those attributes are:

xferstate - representing overall state of transfer
xferprimarystate - representing primary call state
xfersecondarystate - representing secondary call state
asAgent - represents “As agent” selection outcome ('OK' successfully selected, ‘FAIL’ failed selection)
toAgent - represents “To agent” selection outcome ('OK' successfully selected, ‘FAIL’ failed selection)

These attributes can be retrieved by using getAttribute method on the <app-session-controller>

	<label id="state"></label>
	<label id="primaryState"></label>
	<label id="secondaryState"></label>

	setInterval(function() {
		const sessContrl = document.querySelector('#session-controller');
		document.getElementById('state').innerHTML = sessContrl.getAttribute('xferstate');
		document.getElementById('primaryState').innerHTML = sessContrl.getAttribute('xferprimarystate');
		document.getElementById('secondaryState').innerHTML = sessContrl.getAttribute('xfersecondarystate');
	}, 1000);

Requesting agent list refresh

<app-session-controller> can be controlled using external code by referencing the tag.

getAgents - setting this attribute to any value will refresh available agents list

    <button id="getAgentsBtn" onclick="getAgentsFunc()">getAgents</button>

	function getAgentsFunc() {
		const sessContrl = document.querySelector('#session-controller');
		sessContrl.getAgents = "all";
	}

Requesting state change

<app-session-controller> can be controlled using external code by referencing the tag.

States that can be set are:

“start” - initiate the transfer
“cancel” - cancel the transfer
“agent” - set audio path to agent
“respondent” - set audio path to respondent
“conference” - set audio path to conference all parties
“complete” - complete the transfer

	<button id="startBtn" onclick="startFunc()">start</button>
	<button id="cancelBtn" onclick="cancelFunc()">cancel</button>
	<button id="agentBtn" onclick="agentFunc()">agent</button>
	<button id="respondentBtn" onclick="respondentFunc()">respondent</button>
	<button id="conferenceBtn" onclick="conferenceFunc()">conference</button>
	<button id="completeBtn" onclick="completeFunc()">complete</button>

	function startFunc() {
		const sessContrl = document.querySelector('#session-controller');
		sessContrl.setstate = "start";
	}
	
	function cancelFunc() {
		const sessContrl = document.querySelector('#session-controller');
		sessContrl.setstate = "cancel";
	}
	
	function agentFunc() {
		const sessContrl = document.querySelector('#session-controller');
		sessContrl.setstate = "agent";
	}
	
	function respnondentFunc() {
		const sessContrl = document.querySelector('#session-controller');
		sessContrl.setstate = "respondent";
	}
	
	function conferenceFunc() {
		const sessContrl = document.querySelector('#session-controller');
		sessContrl.setstate = "conference";
	}
	
	function completeFunc() {
		const sessContrl = document.querySelector('#session-controller');
		sessContrl.setstate = "complete";
	}