From Bright Pattern Documentation
< 5.3:Embedded-agent-desktop-sdk-specification | ExampleSDK(Redirected from 5.3:Embedded-agent-desktop-sdk-specification/ExampleSDK/Sample Code)
Sample Code and Example
This section provides a functional example of the SDK, along with sample code for a webpage that includes all the Embedded Agent Desktop API methods and events that are called from Bright Pattern's embedded Agent Desktop widget.
Try It Now
You can give the SDK a spin by copying the following URL into your web browser's address field and replacing the placeholder "corp" with the name of your Bright Pattern Contact Center instance:
https://corp.brightpattern.com/agentdesktop/AgentDesktopSdkTest.jsp
Code
This sample code is provided for reference only, as an example of what you can do with the SDK and the API it incorporates. You should copy all and save it as HTML for viewing in your web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AgentDesktop SDK Example</title><!--This is a test HTML page.-->
<script type="text/javascript" src="libs/servicepattern-sdk-v1.js"></script>//The API in JavaScript. You paste the script on the webpage.
</head>
<body>
<iframe id="repeater" style="position:absolute; right: 8px; width: 30%; height: 90%;"></iframe>
//You can adjust the appearance of the Agent Desktop widget by tweaking iframe properties. Repeater is the Agent Desktop widget.
<button onclick="bpspat.api.getState(log)">Get State</button>
//Gets the agent state. In this example, simple HTML buttons are used for executing the Outpage JS API events. The buttons handle the events.
<br>
<br>
<button onclick="bpspat.api.setStatus('READY')">Go To Ready</button>
//Sets agent state to "Ready".
<br>
<br>
<button onclick="bpspat.api.logout()">Logout</button>
//Logs out agent.
<br>
<br>
<button onclick="bpspat.api.muteCallRecordings()">Mute Call Recordings</button>
//Mutes call recordings.
<button onclick="bpspat.api.unmuteCallRecordings()">Unmute Call Recordings</button>
//Unmutes call recordings.
<button onclick="bpspat.api.muteScreenRecordings()">Mute Screen Recordings</button>
//Mutes screen recordings.
<button onclick="bpspat.api.unmuteScreenRecordings()">Unmute Screen Recordings</button>
//Unmutes screen recordings.
<br>
<br>
<input id="service" type="text" placeholder="Service name"/>
<button onclick="bpspat.api.selectService(document.getElementById('service').value)">Change Service by Name</button>
//Selects the name of the contact center service.
<br>
<br>
<input id="number" type="text" placeholder="Dial number"/>
//Parameters of bpspat.api.dialNumber() event.
<button onclick="bpspat.api.dialNumber(document.getElementById('number').value)">Dial</button>
//Dials phone number. Note that you have to declare the phone number as the "input id" parameter value above.
<br>
<br>
<input id="item" type="text" placeholder="Interaction Id, see Logs"/>
//Parameters of bpspat.api.terminateInteraction() event.
<br>
<br>
<button onclick="bpspat.api.terminateInteraction(document.getElementById('item').value)">Terminate</button>
//Ends the interaction. Note that you have to declare the interaction ID number as the "input id" parameter value above.
<button onclick="bpspat.api.completeInteraction(document.getElementById('item').value)">Complete</button>
//Marks the interaction as complete. Note that you have to declare the interaction ID number as the "input id" parameter value above.
<br>
<br>
<button onclick="bpspat.api.getCallRecordingStatus(document.getElementById('item').value)">Get Call Recording Status</button>
//Gets call recording status using the interaction ID number. Note that you have to declare the interaction ID number as the "input id" above.
<button onclick="bpspat.api.startCallRecording(document.getElementById('item').value)">Start Call Recording</button>
//Starts call recording using the interaction ID number. Note that you have to declare the interaction ID number as the "input id" above.
<button onclick="bpspat.api.stopCallRecording(document.getElementById('item').value)">Stop Call Recording</button>
//Stops call recording using the interaction ID number. Note that you have to declare the interaction ID number as the "input id" above.
<button onclick="bpspat.api.muteCallRecording(document.getElementById('item').value)">Mute Call Recording</button>
//Mutes call recording of the specified interaction ID.
<button onclick="bpspat.api.unmuteCallRecording(document.getElementById('item').value)">Unmute Call Recording</button>
//Unmutes call recording of the specified interaction ID.
<br>
<br>
<button onclick="bpspat.api.getScreenRecordingStatus(document.getElementById('item').value)">Get Screen Recording Status</button>
//Gets screen recording status of the specified interaction ID.
<button onclick="bpspat.api.muteScreenRecording(document.getElementById('item').value)">Mute Screen Recording</button>
//Mutes screen recording of the specified interaction ID.
<button onclick="bpspat.api.unmuteScreenRecording(document.getElementById('item').value)">Unmute Screen Recording</button>
//Unmutes screen recording of the specified interaction ID.
<button onclick="bpspat.api.stopScreenRecording(document.getElementById('item').value)">Stop Screen Recording</button>
//Stops screen recording of the specified interaction ID.
<br>
<br>
<input id="transfer_number" type="text" placeholder="Number"/>
//Parameters of bpspat.api.singleStepTransfer() event and bpspat.api.singleStepConference() event.
<button onclick="bpspat.api.singleStepTransfer(document.getElementById('transfer_number').value)">Single Step Transfer</button>
//Transfers the active call to a specified phone number. Note that you have to specify the phone number as the "transfer_number" parameter in the input id above.
<button onclick="bpspat.api.singleStepConference(document.getElementById('transfer_number').value)">Single Step Conference</button>
//Initiates a conference call with a specified phone number. Note that you have to specify the phone number as the "transfer_number" parameter in the input id above.
<br>
<br>
<input id="dispositionItem" type="text" placeholder="Item_id"/>
//Parameters of bpspat.api.setDispositionByName() event.
<input id="dispositionCode" type="text" placeholder="Disposition code"/>
//Parameters of bpspat.api.setDisposition() event.
<button onclick="bpspat.api.setDisposition(document.getElementById('dispositionItem').value, document.getElementById('dispositionCode').value)">Set Disposition By Code</button>
//Sets disposition of interaction by code (string).
<button onclick="bpspat.api.setDispositionByName(document.getElementById('dispositionItem').value, document.getElementById('dispositionCode').value)">Set Disposition By Name</button>
//Sets disposition of interaction by disposition name (string).
<br>
<br>
<input id="variableName" type="text" placeholder="Variable name"/>
//Parameters of bpspat.api.postVariable() event.
<input id="variableValue" type="text" placeholder="Variable value"/>
<button onclick="bpspat.api.postVariable(document.getElementById('dispositionItem').value, document.getElementById('variableName').value, document.getElementById('variableValue').value)">Set variable</button>
<div id="log">Logs...</div>
<script type="text/javascript">
//initiate script with origin of AgentDesktop embedded on the page
window.bpspat.api.init(window.location.href.substring(0, window.location.href.indexOf("/agentdesktop/AgentDesktopSdkTest.jsp")));
//remove suffix, pass origin
document.getElementById("repeater").src = window.location.href.replace("AgentDesktopSdkTest", "UniversalRepeater");
function log(data) {
let div = document.createElement("div");
div.innerHTML = JSON.stringify(data);
document.getElementById("log").appendChild(div);
}
//Event handlers
window.bpspat.api.addAgentLoginHandler(log);
window.bpspat.api.addStatusChangeHandler(log);
window.bpspat.api.addInteractionRenderedHandler(log);
window.bpspat.api.addInteractionCompletedHandler(log);
window.bpspat.api.addInboundCallOfferedHandler(log);
window.bpspat.api.addInboundCallAnsweredHandler(log);
window.bpspat.api.addOutboundCallDialingHandler(log);
window.bpspat.api.addOutboundCallConnectedHandler(log);
window.bpspat.api.addCallEndedHandler(log);
window.bpspat.api.addCallHeldHandler(log);
window.bpspat.api.addCallResumedHandler(log);
window.bpspat.api.addBlindTransferHandler(log);
window.bpspat.api.addConsultTransferHandler(log);
window.bpspat.api.addCallRecordingStatusHandler(log);
window.bpspat.api.addScreenRecordingStatusHandler(log);
</script>
</body>
</html>