This article guides you through configuring a custom CCaaS adapter for Pega Call built with Constellation '24.2.1 and onwards. Performing these steps implements a custom CCaaS link in your application.

You can create a custom CCaaS adapter in any code editor program. The instructions assume you use a Visual Studio Code application for presentation purposes. 

1. Create a custom CCaaS adapter:  

   1. In the navigation pane of the Visual Studio Code application, select Terminal > New Terminal. 

   2. On the Terminal tab, enter npm i @pega/custom-dx-components. 

   3. Enter npx @pega/custom-dx components init to generate the project structure.

   4. Enter the details of your project: 

      1. For the Project name, enter cd <folder name of the project>.  

         For example: Enter cd CustomCCaaS.

      2. For the Organization name, enter your organization name.

         Result: The system created a project structure, as shown in the following example: 

   5. Modify the task.config.json file:

      1. Open the task.config.json file. 

      2. Find and set the libraryModelCL to false.

   6. Enter the following command: cd <folder name of the project>.  

      For example: Enter cd CustomCCaaS.

   7. Enter npm run create to create a sample component under src/component. 

   8. Specify the details for the sample component:

      1. For the Enter type of component, select Field. 

      2. For the Enter subtype of component, select Text. 

      3. For the Enter component name, enter the name of the CTI link.

         For example: Enter RingCentral.

      4. For the Enter component label for display, enter the label of the CTI link.

         For example: Enter RingCentral.

      5. For the Enter component version, enter the version of the CTI link.

         For example: Enter 1.0.0.

      6. For the Please enter the application names to be supported, click enter. 

      7. For Enter description for the component, enter a description of the CTI link.

         For example: Enter Ring Central CTI links. 
         Result: The system generates the component structure under src/component, as shown in the following example:
         

   9. Keep the config.json and index.tsx files inside the folder. The rest of the files can be deleted or ignored.

   10. Create a new typescript file with your link name.

       For example: Create a RingCentral.ts file.

   11.  In the <CTI link name>.ts file, create a class structure with business logic.  
       You can base your business logic based on the CcaasCustomDX_V2.txt file that you can find in the following article: OpenCTICustomDX text file. 
       Check the comments in the skeleton and do not modify the code between the //Start - Do not remove or change below code and //End - Do not remove or change above code mentions. 
       You can add new properties and fuctions, but do not modify existing function definitions or declarations to prevent UI and custom adapter connection issues.
       
       Always modify the event object in the skeleton to provide exact values when assigning. 
       For example: 
       const event = {
         pyCallId:'call id',
         pyMedia:'chat or call',
         cxChannelSrc: evaluatedChannelSrc,
         pyEventName: 'Offering',
         pyQueue: 'queue name',
         pyCallType: 'call type',
         pyCCSource: 'Vendor Name',
         pyANI: 'ANI',
         pyOtherDN: 'otherDN',
         pySiteId: '',
         pyOldCallId: 'call id',
         UserData
        };

   12. In this snipet, provide the exact value for pyCallId, pyMedia, pyQueue, pyCallType, pyCCSource, pyANI, pyOtherDN, pySitedId, pyOldCallId, User Data as recevied from the vendor. Do not pass null or constant values.

   13. Create a new file typescript file called <CTI link name>.type.ts for adding types used in the RingCentral.ts file.

       Note: Use the CcaasCustomDX_types.text file to add types. You can find the file in the OpenCTICustomDX text file article. 

   14. Rename the index.tsx file to index.ts.

   15. In the index.ts file, remove all contents.

   16. Add the following line of code: export { default } from './<folder name of the project>';.

   17. Modify the config.json file as per your business requirements.

   18. Resolve all lint and prettier issues. 
       The following figure shows an example of the final structure for a Ring Central custom CTI link:
       

Build a component to validate errors:

1. In the Visual Studio Code application, on the Terminal tab, enter npm run buildComponent. 

2. Select the component for building.

3. For Select component to build, select <folder name of the project>.

4. For Generate development build, select Yes.  

5. If the build is successful, the system generates the bundle as in the following example:  

   

Authenticate the CCaaS component to publish the custom CTI link that you created in your application:

1. In the Visual Studio Code application, on the Terminal tab, enter npm run authenticate.  

2. For the Pega server URL, enter your application's Pega server URL. For the authentication service alias, enter pega.

   Result: The system opens the Pega authentication window.  

3. On the Pega authentication window, log in with your credentials. 

   Note: If you face any issues during the authentication process, see Connecting to your development environment.

   If the authentication is successful, the system generates the following message on the Pega authentication window:  

   

Publish the component to Pega server: 

1. In the Visual Studio Code application, on the Terminal tab, enter npm run publish.  

2. For the Enter component to publish, select the <CTI link folder name> folder.  

3. For the Enter ruleset name, select an open ruleset of your application to which you want to publish the new CTI link. 

   For example: Enter PegaCallConstellation.  

4. For the Enter ruleset version, select the ruleset version of your application to which you want to publish the new CTI link.

   For example: Enter 01-01-01. 

5. For Generate development build, select Yes.

   Result: The component is now available as <organization>_<library>_<component name> in the PegaCallConstellation:01-01-01 ruleset.