This article guides you through configuring a custom OpenCTI Dekstop adapter for Pega Call built with Constellation '24.2. Performing these steps implements a custom OpenCTI Desktop link in your application.

1. Create a custom OpenCTI Desktop 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. 

   4. For the Project name, enter CustomCTI.  

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

      Result: The system created a project structure.  

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

      For example: Enter cd customcti. 

   7. Enter npm run create.  

   8. For the Type of component, enter Field.  

   9. For the subtype of component, enter Text. 

   10. For the component name, enter the name of the CTI link.  

   11. For the component label for display, enter the display label name of the CTI link.  

   12. For the component version, enter the version of the CTI link.  

   13. For the library name, enter Pega.  

   14. For the description, enter the description of the CTI link.  

       Result: The system generates a component structure under src/components.  
       Note: In the CTI link folder that you created, you can remove or ignore all files except config.json and index.tsx. 

   15. Create a new typescript file. 

       For example: Create a <CTI link name>.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: OpenCTICustomDX text file. 
       The existing function declaration should not be modified to prevent UI and custom adapter connection issues.    

   17. Create a new typescript file for adding the types.  

       Note: Create a <CTI link name>.types.ts file.  

   18. In the <CTI link name>.types.ts file, specify the business logic of the custom CTI link. 
       Base your business logic based on the OpenCTICustomCX.txt file. You can access the file in the following topic: OpenCTICustomDX text file. 
       The existing function declaration should not be modified to prevent UI and custom adapter connection issues.  

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

   20. Remove all content from index.ts file and enter the following 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.  
       The following figure shows an example of the final structure for a Nice custom CTI link:

       

2. Build the 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 OpenCTI Dekstop component to publish the custom CTI link that you created in your application:

   Note: The component resides in the Pega server and not the GIT repository. 

   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.  

   3. For the authentication service alias, enter pega.

      Result: The system opens the Pega authentication window.  

   4. On the Pega authentication window, log in with your credentials.  
      If the authentication is successful, the system generates the following message on the Pega authentication window:  

      

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

4. Publish the OpenCTI Desktop component to Pega Infinity server:

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

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

   3. For the 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 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.