From Bright Pattern Documentation
Jump to: navigation, search
Line 12: Line 12:
  
 
<syntaxhighlight lang="HTML">
 
<syntaxhighlight lang="HTML">
    <!DOCTYPE html>
+
<!DOCTYPE html>
    <html lang="en">
+
<html lang="en">
 
+
    <head>
    <head>
+
        <meta charset="UTF-8">
        <meta charset="UTF-8">
+
        <title>AgentDesktop SDK Example</title><!--This is a test HTML page.-->
        <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>
        <script type="text/javascript" src="libs/servicepattern-sdk-v1.js"></script>//The API in JavaScript. You paste the script on the webpage.
+
    <body>
    </head>
+
        <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.
    <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>
        <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.
+
//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>
        <br>
+
        <br>
        <button onclick="bpspat.api.setStatus('READY')">Go To Ready</button>//Sets agent state to "Ready".
+
        <button onclick="bpspat.api.setStatus('READY')">Go To Ready</button>
        <br>
+
//Sets agent state to "Ready".
        <br>
+
        <br>
        <button onclick="bpspat.api.logout()">Logout</button>//Logs out agent.
+
        <br>
        <br>
+
        <button onclick="bpspat.api.logout()">Logout</button>
        <br>
+
//Logs out agent.
        <button onclick="bpspat.api.muteCallRecordings()">Mute Call Recordings</button>//Mutes call recordings.
+
        <br>
        <button onclick="bpspat.api.unmuteCallRecordings()">Unmute Call Recordings</button>//Unmutes call recordings.
+
        <br>
        <button onclick="bpspat.api.muteScreenRecordings()">Mute Screen Recordings</button>//Mutes screen recordings.
+
        <button onclick="bpspat.api.muteCallRecordings()">Mute Call Recordings</button>
        <button onclick="bpspat.api.unmuteScreenRecordings()">Unmute Screen Recordings</button>//Unmutes screen recordings.
+
//Mutes call recordings.
        <br>
+
        <button onclick="bpspat.api.unmuteCallRecordings()">Unmute Call Recordings</button>
        <br>
+
//Unmutes call recordings.
        <input id="service" type="text" placeholder="Service name" />
+
        <button onclick="bpspat.api.muteScreenRecordings()">Mute Screen Recordings</button>
        <button onclick="bpspat.api.selectService(document.getElementById('service').value)">Change Service by Name</button>//Selects the name of the contact center service.
+
//Mutes screen recordings.
        <br>
+
        <button onclick="bpspat.api.unmuteScreenRecordings()">Unmute Screen Recordings</button>
        <br>
+
//Unmutes screen recordings.
        <input id="number" type="text" placeholder="Dial number" />//Parameters of bpspat.api.dialNumber() event.
+
        <br>
        <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="service" type="text" placeholder="Service name"/>
        <br>
+
        <button onclick="bpspat.api.selectService(document.getElementById('service').value)">Change Service by Name</button>
        <input id="item" type="text" placeholder="Interaction Id, see Logs" />//Parameters of bpspat.api.terminateInteraction() event.
+
//Selects the name of the contact center service.
        <br>
+
        <br>
        <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.
+
        <input id="number" type="text" placeholder="Dial number"/>
        <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.
+
//Parameters of bpspat.api.dialNumber() event.
        <br>
+
        <button onclick="bpspat.api.dialNumber(document.getElementById('number').value)">Dial</button>
        <br>
+
//Dials phone number. Note that you have to declare the phone number as the "input id" parameter value above.
        <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.
+
        <br>
        <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.
+
        <br>
        <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.
+
        <input id="item" type="text" placeholder="Interaction Id, see Logs"/>
        <button onclick="bpspat.api.muteCallRecording(document.getElementById('item').value)">Mute Call Recording</button>//Mutes call recording of the specified interaction ID.
+
//Parameters of bpspat.api.terminateInteraction() event.
        <button onclick="bpspat.api.unmuteCallRecording(document.getElementById('item').value)">Unmute Call Recording</button>//Unmutes call recording of the specified interaction ID.
+
        <br>
        <br>
+
        <br>
        <br>
+
        <button onclick="bpspat.api.terminateInteraction(document.getElementById('item').value)">Terminate</button>
        <button onclick="bpspat.api.getScreenRecordingStatus(document.getElementById('item').value)">Get Screen Recording Status</button>//Gets screen recording status of the specified interaction ID.
+
//Ends the interaction. Note that you have to declare the interaction ID number as the "input id" parameter value above.
        <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.completeInteraction(document.getElementById('item').value)">Complete</button>
        <button onclick="bpspat.api.unmuteScreenRecording(document.getElementById('item').value)">Unmute Screen Recording</button>//Unmutes screen recording of the specified interaction ID.
+
//Marks the interaction as complete. Note that you have to declare the interaction ID number as the "input id" parameter value above.
        <button onclick="bpspat.api.stopScreenRecording(document.getElementById('item').value)">Stop Screen Recording</button>//Stops screen recording of the specified interaction ID.
+
        <br>
        <br>
+
        <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.
        <input id="transfer_number" type="text" placeholder="Number" />//Parameters of bpspat.api.singleStepTransfer() event and bpspat.api.singleStepConference() event.
+
        <button onclick="bpspat.api.startCallRecording(document.getElementById('item').value)">Start Call Recording</button>
        <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.
+
//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.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.
+
        <button onclick="bpspat.api.stopCallRecording(document.getElementById('item').value)">Stop Call Recording</button>
        <br>
+
//Stops call recording using the interaction ID number. Note that you have to declare the interaction ID number as the "input id" above.
        <br>
+
        <button onclick="bpspat.api.muteCallRecording(document.getElementById('item').value)">Mute Call Recording</button>
        <input id="dispositionItem" type="text" placeholder="Item_id" />//Parameters of bpspat.api.setDispositionByName() event.
+
//Mutes call recording of the specified interaction ID.
        <input id="dispositionCode" type="text" placeholder="Disposition code" />//Parameters of bpspat.api.setDisposition() event.
+
        <button onclick="bpspat.api.unmuteCallRecording(document.getElementById('item').value)">Unmute Call Recording</button>
 
+
//Unmutes call recording of the specified interaction ID.
        <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).
+
        <br>
 
+
        <br>
        <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).
+
        <button onclick="bpspat.api.getScreenRecordingStatus(document.getElementById('item').value)">Get Screen Recording Status</button>
 
+
//Gets screen recording status of the specified interaction ID.
        <br>
+
        <button onclick="bpspat.api.muteScreenRecording(document.getElementById('item').value)">Mute Screen Recording</button>
        <br>
+
//Mutes screen recording of the specified interaction ID.
        <input id="variableName" type="text" placeholder="Variable name" />//Parameters of bpspat.api.postVariable() event.
+
        <button onclick="bpspat.api.unmuteScreenRecording(document.getElementById('item').value)">Unmute Screen Recording</button>
        <input id="variableValue" type="text" placeholder="Variable value" />
+
//Unmutes screen recording of the specified interaction ID.
        <button onclick="bpspat.api.postVariable(document.getElementById('dispositionItem').value, document.getElementById('variableName').value, document.getElementById('variableValue').value)">Set variable</button>
+
        <button onclick="bpspat.api.stopScreenRecording(document.getElementById('item').value)">Stop Screen Recording</button>
 
+
//Stops screen recording of the specified interaction ID.
        <div id="log">Logs...</div>
+
        <br>
 
+
        <br>
        <script type="text/javascript">
+
            //initiate script with origin of AgentDesktop embedded on the page
+
        <input id="transfer_number" type="text" placeholder="Number"/>
            window.bpspat.api.init(window.location.href.substring(0, window.location.href.indexOf("/agentdesktop/AgentDesktopSdkTest.jsp"))); //remove suffix, pass origin
+
//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>
            document.getElementById("repeater").src = window.location.href.replace("AgentDesktopSdkTest", "UniversalRepeater");
+
//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>
            function log(data) {
+
//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.
                let div = document.createElement("div");
+
        <br>
                div.innerHTML = JSON.stringify(data);
+
        <br>
                document.getElementById("log").appendChild(div);
+
        <input id="dispositionItem" type="text" placeholder="Item_id"/>
            }
+
//Parameters of bpspat.api.setDispositionByName() event.
            //Event handlers
+
        <input id="dispositionCode" type="text" placeholder="Disposition code"/>
            window.bpspat.api.addAgentLoginHandler(log);
+
//Parameters of bpspat.api.setDisposition() event.
            window.bpspat.api.addStatusChangeHandler(log);
+
            window.bpspat.api.addInteractionRenderedHandler(log);
+
        <button onclick="bpspat.api.setDisposition(document.getElementById('dispositionItem').value, document.getElementById('dispositionCode').value)">Set Disposition By Code</button>
            window.bpspat.api.addInteractionCompletedHandler(log);
+
//Sets disposition of interaction by code (string).
            window.bpspat.api.addInboundCallOfferedHandler(log);
+
            window.bpspat.api.addInboundCallAnsweredHandler(log);
+
        <button onclick="bpspat.api.setDispositionByName(document.getElementById('dispositionItem').value, document.getElementById('dispositionCode').value)">Set Disposition By Name</button>
            window.bpspat.api.addOutboundCallDialingHandler(log);
+
//Sets disposition of interaction by disposition name (string).
            window.bpspat.api.addOutboundCallConnectedHandler(log);
+
            window.bpspat.api.addCallEndedHandler(log);
+
        <br>
            window.bpspat.api.addCallHoldedHandler(log);
+
        <br>
            window.bpspat.api.addCallResumedHandler(log);
+
        <input id="variableName" type="text" placeholder="Variable name"/>
            window.bpspat.api.addBlindTransferHandler(log);
+
//Parameters of bpspat.api.postVariable() event.
            window.bpspat.api.addConsultTransferHandler(log);
+
        <input id="variableValue" type="text" placeholder="Variable value"/>
            window.bpspat.api.addCallRecordingStatusHandler(log);
+
        <button onclick="bpspat.api.postVariable(document.getElementById('dispositionItem').value, document.getElementById('variableName').value, document.getElementById('variableValue').value)">Set variable</button>
            window.bpspat.api.addScreenRecordingStatusHandler(log);
+
        </script>
+
        <div id="log">Logs...</div>
    </body>
+
 
+
        <script type="text/javascript">
    </html>
+
            //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.addCallHoldedHandler(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>
 
</syntaxhighlight>
 
</syntaxhighlight>
 
 
  
  

Revision as of 21:09, 25 March 2019

• 5.19 • 5.3 • 5.8

<translate>

Sample Code

The following is an example of a webpage that includes all the JS Outpage API methods and events that are called from Bright Pattern's embedded Agent Desktop widget. This sample code is provided for reference only, as an example of what you can do with the SDK and the API it includes.

For more information, please see the API Reference and Use Cases sections of this guide:


 <!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.addCallHoldedHandler(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>



</translate>

< Previous | Next >