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.

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. For the Project name, enter CustomCCaaS.  

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

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

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

      Enter cd CustomCCaaS.

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

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

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

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

      For example: Enter RingCentral.

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

       For example: Enter Ring Central.

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

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

   13. 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:
       

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

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

       For example: Create a RingCentral.ts file.

   16.  In the <CTI link name>.ts file, create a class structure with business logic.  
       You can base your business logic based on the OpenCTICustomDX.txt file that you can find in the following article: XXX. 
       The existing function definitions or declarations should not be modified to prevent UI and custom adapter connection issues. You can modify the body of the existing functions or create new functions. 

       Note: In the OpenCTICustomDX.txt file modify <<CustomCcass>> to the link name that you want to create.

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

       Note: You can create a new file or you can add types for each property in the RingCentral.ts file. 

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

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

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

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

   22. Resolve all lint and prettier issues. 

   23. The following figure shows an example of the final structure for a Ring Central custom CTI link:
       
2. 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:  

      

3. 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:  

      

4. 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.