Implementing custom embedded UI CTI links
You can create a custom configuration of an embedded UI CTI link.
- In the navigation explorer, click App and in the search
bar enter:
rule-file-bundle
. - Open
Rule-File-Bundle
. - In the results page, click Pega Call.
- Open the Pega_cti_embeddedApi file by clicking the target icon next to it.
- Click Save As.
- Edit the label to provide a unique name, select the status and edit the
identifier.
For example: myCompany_cti_embeddedApi_MyCustomApi
- Click Create and open.
- Change the JavaScript namespace and object name for your custom API .
For example: Change all instances of pega.cti.embeddedApi
tomyCompany.cti.embeddedApi.myAdapterName
. - Add your custom Embedded API to the PegaCall JavaScript bundle rule file.
- In the Pega Call script tab, click the Add item icon.
- In the App name field enter: webwb.
- In the File extension field, enter: js.
- In the File name field, enter the identifier of
your customized
Pega_cti_embeddedApi
file.For example: myCompany_cti_embeddedApi_myAdapterName
- 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. - Implement the load() function.Your implementation will typically inject an IFRAME into the Embedded OpenCTI Div.
- Select your embedded UI in the Pega Call UI to load it.
- In the header of Dev Studio, click .
- In the CTI Links tab, click Add CTI Link and select your newly created link type.
- Handle the ringing/alerting/screenpop notification from your contact center.
- Implement the makeCall() function to support the
Click-To-Call functionality from the Pega Application.
For example: where: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 }); } }); }
- 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.
- Enable or disable Click-To-Call as supported by your Contact Center.
- 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));
Previous topic The blindTransfer function