From Bright Pattern Documentation
Jump to: navigation, search
 
Line 1: Line 1:
 
<translate>
 
<translate>
 
= Start a Conference Call =
 
= Start a Conference Call =
You can use the [[Embedded-agent-desktop-sdk-specification/Methods/singleStepConference |  singleStepConference]] method to have a logged-in agent transfer add another party to his or her active call. For more information about conferencing, see the ''Contact Center Administrator Guide'', section [[Agent-guide/Tutorials/Calls/HowtoHostaConference |  How to Host a Conference]].
+
You can use the [[Embedded-agent-desktop-api-specification/Methods/singleStepConference |  singleStepConference]] method to have a logged-in agent transfer and add another party to his or her active call. For more information about conferencing, see the ''Contact Center Administrator Guide'', section [[Agent-guide/Tutorials/Calls/HowtoHostaConference |  How to Host a Conference]].
  
 
The singleStepConference method can be attached to a web element, such as a button, on your webpage. When clicked, the button will process the API method. Add a field to enter the phone number of the third party to be included in the conference.
 
The singleStepConference method can be attached to a web element, such as a button, on your webpage. When clicked, the button will process the API method. Add a field to enter the phone number of the third party to be included in the conference.
Line 10: Line 10:
 
* Place sample JavaScript into HTML
 
* Place sample JavaScript into HTML
  
== How to Use singleStepConference ==
 
Of course, there are many ways to style your page elements and Agent Desktop widget display. The following is provided for example purposes only.
 
  
# Paste the [[5.3:Embedded-agent-desktop-sdk-specification/UseCases/Transfer#Sample_Code |
+
== Sample Code ==
sample code]] into the body of your HTML file. This is the bare minimum that you need for the SDK to work. Make sure you replace "<tenant>" with the name of your Agent Desktop web server.<br /><br />
+
In this sample code, the methods are attached to button elements.
# Save and open the page in your web browser. Make sure the agent is logged in and "Ready."<br /><br />
 
# The call comes in.<br /><br />[[File:Conference1-53.PNG|800px|center|Incoming call]]<br /><br />
 
# The agent answers.<br /><br />[[File:Conference2-53.PNG|800px|center|Agent answers call]]<br /><br />
 
# Enter the phone number (e.g., "1020") of the person who you want to include in the conference, and click '''Single Step Conference''' to dial it.<br /><br />
 
# When the other person accepts the call, the conference begins and you see all parties in the Active Interactions List.<br /><br />[[File:Conference4-53.PNG|800px|center|Conference call with supervisor Christy, agent Jeffery, and customer Tracy]]
 
  
 +
Copy this sample code for pasting into your HTML file. This is the bare minimum that you need for the SDK to work. Make sure you replace "<tenant>" with the name of your Agent Desktop web server (e.g., "example.brightpattern.com").
  
== Sample Code ==
+
<syntaxhighlight lang="javascript">
 
  <script type="text/javascript" src="https://<tenant>.brightpattern.com/agentdesktop/libs/servicepattern-sdk-v1.js">  
 
  <script type="text/javascript" src="https://<tenant>.brightpattern.com/agentdesktop/libs/servicepattern-sdk-v1.js">  
 
  </script>
 
  </script>
 
   
 
   
  <iframe id="repeater" style="position:absolute; right: 8px; width: 300px; height: 700px;" src="https://<tenant>.brightpattern.com/agentdesktop/UniversalRepeater.jsp"></iframe>//The Agent Desktop widget ("repeater") and display properties. In the source, replace "<tenant>" with your actual Agent Desktop web server name.
+
  <iframe id="repeater" style="position:absolute; right: 8px; width: 300px; height: 700px;" src="https://<tenant>.brightpattern.com/agentdesktop/UniversalRepeater.jsp"></iframe>
 
   
 
   
 
  <button onclick="bpspat.api.getState(log)">Get State</button>
 
  <button onclick="bpspat.api.getState(log)">Get State</button>
  <<nowiki />br>
+
  <br>
  <<nowiki />br>
+
  <br>
  <input id="transfer_number" type="text" placeholder="Number"/>//Field for entering phone number
+
  <input id="transfer_number" type="text" placeholder="Number"/>
 
  <button onclick="bpspat.api.singleStepConference(document.getElementById('transfer_number').value)">Single Step Conference</button>//Button with singleStepConference method attached
 
  <button onclick="bpspat.api.singleStepConference(document.getElementById('transfer_number').value)">Single Step Conference</button>//Button with singleStepConference method attached
  <<nowiki />br>
+
  <br>
  <<nowiki />br>
+
  <br>
  <<nowiki />div id="log">Logs...</div>//Logs section.
+
  <div id="log">Logs...</div>
  <<nowiki />br>
+
  <br>
  <<nowiki />br>
+
  <br>
  <script type="text/javascript">//Uses the log function to place requested data on the page.
+
  <script type="text/javascript">
  window.bpspat.api.init("https://<tenant>.brightpattern.com");//The window.bpspat.api object will appear on an external webpage ONLY when this part is included in the script. Replace "<tenant>" with your actual Agent Desktop web server name.
+
  window.bpspat.api.init("https://<tenant>.brightpattern.com");
 
  function log(data) {
 
  function log(data) {
 
  let div = document.createElement("div");
 
  let div = document.createElement("div");
Line 47: Line 41:
 
   
 
   
 
  </script>
 
  </script>
 +
</syntaxhighlight>
 +
 +
 +
== Example Exercise ==
 +
There are many ways to style your page elements and Agent Desktop widget display. The following is provided for example purposes only.
 +
 +
# Paste the [[5.3:Embedded-agent-desktop-sdk-specification/UseCases/Transfer#Sample_Code |
 +
sample code]] into the body of your HTML file.<br /><br />
 +
# Save and open the page in your web browser. Make sure the agent is logged in and "Ready."<br /><br />
 +
# The call comes in.<br /><br />[[File:Conference1-53.PNG|800px|center|Incoming call]]<br /><br />
 +
# The agent answers.<br /><br />[[File:Conference2-53.PNG|800px|center|Agent answers call]]<br /><br />
 +
# Enter the phone number (e.g., "1020") of the person who you want to include in the conference, and click '''Single Step Conference''' to dial it.<br /><br />
 +
# When the other person accepts the call, the conference begins and you see all parties in the Active Conversations List.<br /><br />[[File:Conference4-53.PNG|800px|center|Conference call with supervisor Christy, agent Jeffery, and customer Tracy]]
 +
 +
  
  

Latest revision as of 23:20, 26 March 2019

• 5.19 • 5.3 • 5.8

Start a Conference Call

You can use the singleStepConference method to have a logged-in agent transfer and add another party to his or her active call. For more information about conferencing, see the Contact Center Administrator Guide, section How to Host a Conference.

The singleStepConference method can be attached to a web element, such as a button, on your webpage. When clicked, the button will process the API method. Add a field to enter the phone number of the third party to be included in the conference.

In this article, you will learn how to:

  • Attach singleStepConference to a button
  • Add a field to enter the phone number of the party to be dialed
  • Place sample JavaScript into HTML


Sample Code

In this sample code, the methods are attached to button elements.

Copy this sample code for pasting into your HTML file. This is the bare minimum that you need for the SDK to work. Make sure you replace "<tenant>" with the name of your Agent Desktop web server (e.g., "example.brightpattern.com").

 <script type="text/javascript" src="https://<tenant>.brightpattern.com/agentdesktop/libs/servicepattern-sdk-v1.js"> 
 </script>
 
 <iframe id="repeater" style="position:absolute; right: 8px; width: 300px; height: 700px;" src="https://<tenant>.brightpattern.com/agentdesktop/UniversalRepeater.jsp"></iframe>
 
 <button onclick="bpspat.api.getState(log)">Get State</button>
 <br>
 <br>
 <input id="transfer_number" type="text" placeholder="Number"/>
 <button onclick="bpspat.api.singleStepConference(document.getElementById('transfer_number').value)">Single Step Conference</button>//Button with singleStepConference method attached
 <br>
 <br>
 <div id="log">Logs...</div>
 <br>
 <br>
 <script type="text/javascript">
 window.bpspat.api.init("https://<tenant>.brightpattern.com");
 function log(data) {
 let div = document.createElement("div");
 div.innerHTML = JSON.stringify(data);
 document.getElementById("log").appendChild(div);
 }
 
 </script>


Example Exercise

There are many ways to style your page elements and Agent Desktop widget display. The following is provided for example purposes only.

  1. Paste the sample code into the body of your HTML file.

  2. Save and open the page in your web browser. Make sure the agent is logged in and "Ready."

  3. The call comes in.

    Incoming call


  4. The agent answers.

    Agent answers call


  5. Enter the phone number (e.g., "1020") of the person who you want to include in the conference, and click Single Step Conference to dial it.

  6. When the other person accepts the call, the conference begins and you see all parties in the Active Conversations List.

    Conference call with supervisor Christy, agent Jeffery, and customer Tracy



< Previous | Next >