You can create a custom configuration of an embedded UI CTI link.

1. In the navigation explorer, click App and in the search bar enter: rule-file-bundle.

2. Open Rule-File-Bundle.

3. In the results page, click Pega Call.

4. Open the Pega_cti_embeddedApi file by clicking the target icon next to it.

5. Click Save As.

6. Edit the label to provide a unique name, select the status and edit the identifier.

   For example: myCompany_cti_embeddedApi_MyCustomApi

7. Click Create and open.

8. Change the JavaScript namespace and object name for your custom API .

   For example: Change all instances of pega.cti.embeddedApi to myCompany.cti.embeddedApi.myAdapterName.

9. Add your custom Embedded API to the PegaCall JavaScript bundle rule file.

   1. In the Pega Call script tab, click the Add item icon.

   2. In the App name field enter: webwb.

   3. In the File extension field, enter: js.

   4. In the File name field, enter the identifier of your customized Pega_cti_embeddedApi file.

      For example: myCompany_cti_embeddedApi_myAdapterName

10. Add an Embedded OpenCTI link definition that references your JavaScript object name (including name space).

    You can use Pega_cti_embeddedApi_AWSConnect as an example.

11. Implement the load() function.

    Your implementation will typically inject an IFRAME into the Embedded OpenCTI Div.

12. Select your embedded UI in the Pega Call UI to load it.

    1. In the header of Dev Studio, click ConfigureChannel ServicesPega CallAdministration & Configuration.

    2. In the CTI Links tab, click Add CTI Link and select your newly created link type.

13. Handle the ringing/alerting/screenpop notification from your contact center.

14. Implement the makeCall() function to support the Click-To-Call functionality from the Pega Application.

    For example:

    makeCall: function (destination, options, onSuccess, onFailure) {
      var endpoint = connect.Endpoint.byPhoneNumber(destination);
      pega.cti.API.theAgent.connect(endpoint, {
       queueARN: pega.cti.API.theAgent.getConfiguration().routingProfile
                                       .defaultOutboundQueue.queueARN,
       success: function () {
        console.log('makeCall SUCCESS');
        onSuccess();
       },
       failure: function (err, data) {
        var errObj = JSON.parse(err);
        console.log("Failed to make call : " + errObj.message);
        onFailure({
         errCode: "ERR_PASS",
         errMessage: errObj.message
        });
       }
      });
     }

    where:

    • destination is a string containing the digits to dial options is a string format of a JSON object listing optional parameters.
    • onSuccess is a callback function passing a message object after a successful connection attempt.
    • onFailure is a callback function passing a message object after a failed connection attempt.

15. Enable or disable Click-To-Call as supported by your Contact Center.

16. Add support for generating screen pops.

    For example:

    var event = {};
            event.pyCallId = "some-call-id";
            event.pyInteractionID = "some-call-id";
            event.pyMedia = "Phone";
            event.pyEventName = "Offering";
            event.pyANI = "some-ANI";
            event.pyCallType = "INBOUND";
            event.pyNamedVariables = {};
           
            // set some call meta data
            event.pyNamedVariables.accountNumber = "some-account-number";
            event.pyNamedVariables.customerName = "some-customer-name";
            // Apply call treatment rule (to screenpop or start interaction based
     on configuration)
          
     pega.cti.embeddedEventHandler.applyCallTreatment(JSON.stringify(event));