From Bright Pattern Documentation
Jump to: navigation, search
• 5.19 • 5.3 • 5.8

Select Service and Dial

You can use the dialNumber method to dial a phone number and initiate a call for a logged-in agent.

Using dialNumber alongside selectService provides added control over a call. When used together, you can select the service to be used. The getState method retrieves agent state and interaction information in the logs.

Methods can be attached to web elements, such as buttons, on your webpage. When clicked, the buttons will process the API methods. Add fields to enter the phone number to be dialed and the name of the service to use.

In this article, you will learn how to:

  • Attach getState, dialNumber, and selectService to buttons
  • Add fields
  • 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., "").

 <script type="text/javascript" src="https://<tenant>"> </script>
 <iframe id="repeater" style="position:absolute; right: 8px; width: 300px; height: 700px;" src="https://<tenant>"></iframe>
 <button onclick="bpspat.api.getState(log)">Get State</button>
 <input id="service_name" type="text" placeholder="Service name"/>
 <button onclick="bpspat.api.selectService(document.getElementById('service_name').value)">Change Service by Name</button>
 <input id="number" type="text" placeholder="Dial number"/>
 <button onclick="bpspat.api.dialNumber(document.getElementById('number').value)">Dial</button>
 <div id="log">Logs...</div>
 <script type="text/javascript">//Uses the log function to place requested data on the page.
 function log(data) {
 let div = document.createElement("div");
 div.innerHTML = JSON.stringify(data);


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.

  3. Click Get State to see if the agent is "Ready" to handle a call. The log data will show agent and interaction status.

  4. Configured services are shown in the Agent Desktop widget's service selector. These are the service names that you can type in the Service Name field.

    Configured services

  5. In the Service Name field, enter the desired service for the call, and click Change Service by Name. You see that the service name has changed in the Agent Desktop widget.

    The service changes immediately

  6. In the Dial Number field, enter the phone number to be dialed, and click Dial. If dialing outbound, enter the party's phone number with prefix (e.g., "14151234567").

    Party phone number

    If dialing another contact center user, enter the user's extension number (e.g., "1020").

    Enter service name and phone number or extension

  7. The number will be dialed, even if the agent was in the "Not ready" state.

    The call was accepted
    < Previous | Next >