Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Implementing custom embedded UI CTI links

Updated on January 10, 2022

You can create a custom configuration of an embedded UI Computer Telephony Integration (CTI) link. The Embedded UI link is a generic connector that supports building custom client-to-server integrations for computer telephony integration (CTI) systems with embedded, third-party user interfaces, including Amazon Connect, Five9, and Genesis Cloud CX integrations.

Before you begin: Ensure that you have an unlocked ruleset for saving rule instances.
  1. In the navigation pane of Dev Studio, click App, and then in the Classes search bar, enter Rule-File-Bundle.
  2. Open the Rule-File-Bundle file.
  3. On the results page, below Bundle Name, click PegaCall.
  4. Click the Target icon next to the Pega_cti_embeddedApi file to open 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 embedded API in the script.
    For example: Change all instances of pega.cti.embeddedApi to myCompany.cti.embeddedApi.myAdapterName.
  9. Add your custom embedded API to the Pega Call JavaScript bundle rule file.
    1. On the Pega Call script tab, click the Add item icon at the bottom of the tab.
    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 namespace.
    For example: Pega_cti_embeddedApi_AWSConnect
  11. Implement the load function.
    Your implementation typically injects an IFRAME into the Embedded OpenCTIdiv.
  12. In the Pega Call UI, select your embedded UI to load it.
    1. In the header of Dev Studio, click ConfigureChannel ServicesPega CallAdministration & Configuration.
    2. On the CTI Links tab, click Add CTI Link, and then select your newly created link type.
  13. Handle the ringing, alerting, and screenpop notifications in your Contact Center.
  14. Implement the makeCall function to support the Click-To-Call functionality in Pega Call.
    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.
    For more information about enabling Click-to-Call, see Configuring call treatment
  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));

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us