1. Sales conversations happening without awareness of active complaints.
2. Poor customer experience when unresolved issues surface unexpectedly.
3. Reduced productivity due to frequent system switching between CRM and Desk.

Prerequisites

1. Create Zoho CRM and Zoho Desk under the same Zoho Organization. 

2. A two-way sync between Zoho CRM and Zoho Desk is required to keep Contacts and Accounts consistent across both applications.

With this support, any change made to a Contact or Account in either application is automatically reflected in the other.

Additionally, each record in Zoho Desk stores the corresponding Zoho CRM record ID. This allows you to reference the CRM record directly and perform further customizations or integrations using that unique ID.

Follow the steps to create the two-way sync:

1. Log into Zoho Desk.
2. Go to Settings > Integration > Zoho. 
3. Choose Zoho CRM and click Integrate. 
4. On the Authentication page:
   
1. Enter your email address.
2. Choose the CRM organization you want to integrate with.
5. Click Authorize.
6. Once authenticated, the sync configuration page opens.
7. Select the sync type as Two-way Sync.
8. Map the fields of Accounts and Contacts modules between Zoho Desk and Zoho CRM.
9. Click Start Sync to initiate the integration. 
   

Refer to the Integrating Zoho Desk with Zoho CRM help page for more details. 

3. Create a Zoho Desk connection in Zoho CRM with Desk.tickets.READ and Desk.contacts.READ scopes. 

Refer to the Connections help doc for more information. Store the Connection Link Name to use while making API calls. 

4. Create a local project folder for widget using Zoho CLI as mentioned in Creating your First Widget help guide. 

Step-by-Step Implementation

In the widget project directory, code the following logic in the widget.html file.

Step - 1: Get the Current CRM Contact ID

Step - 2: Fetch Desk Contacts and Match the CRM Contact ID

// Step 2: Make GET contacts API call to Desk using ZRC const contactsResponse = await deskZrc.get('/contacts', {     params: {         limit: 100     } }); console.log("Desk Contacts Response:", contactsResponse); if (contactsResponse && contactsResponse.data) {     // Parse the response data      const contactsData = typeof contactsResponse.data === 'string'          ? JSON.parse(contactsResponse.data)          : contactsResponse.data;     // Find the object where zohoCRMContact.id matches Contact record ID     if (contactsData && contactsData.data && Array.isArray(contactsData.data)) {         const matchingContact = contactsData.data.find(function(contact) {             return contact.zohoCRMContact &&                     contact.zohoCRMContact.id &&                     contact.zohoCRMContact.id === entityId;         });         if (matchingContact) {             // Pick the id (Desk contact record ID)             const deskContactId = matchingContact.id;             console.log("Desk Contact ID:", deskContactId);             // Proceed to fetch tickets             await fetchTickets(deskContactId);         } else {             showEmptyState("No Desk contact found linked to this CRM contact");         }     } }

Step - 3: Fetch Open Tickets and Filter by Desk Contact ID

Make a GET Tickets API call to Zoho Desk with the following parameters:

1. Specify status with Open value to retrieve only open tickets. 
2. Specify include with value set to contacts fetch each ticket details with its associated contact details. 

Filter the API response with the matched Desk Contact ID and render the results. 

async function fetchTickets(deskContactId) {     try {         // Step 3: Make GET Tickets API call using ZRC          const ticketsResponse = await deskZrc.get('/tickets', {             params: {                 include: 'contacts',                 status: 'Open',                 limit: 100             }         });         console.log("Tickets Response:", ticketsResponse);         if (ticketsResponse && ticketsResponse.data) {             const ticketsData = typeof ticketsResponse.data === 'string'                  ? JSON.parse(ticketsResponse.data)                  : ticketsResponse.data;             // Filter tickets where contact matches deskContactId             if (ticketsData && ticketsData.data && ticketsData.data.length > 0) {                 const matchingTickets = ticketsData.data.filter(function(ticket) {                     return ticket.contact && ticket.contact.id === deskContactId;                 });                 if (matchingTickets.length > 0) {                     renderTickets(matchingTickets);                 } else {                     showEmptyState("No open tickets found for this contact");                 }             } else {                 showEmptyState("No open tickets found");             }         }     } catch (error) {         console.error("Error fetching tickets:", error);         showError("Failed to fetch tickets: " + (error.message || error.toString()));     } }

Step - 4: Validate and Pack the Widget

Follow the steps given in the Widget help page to validate and package the widget. A complete working code sample is provided as attachment at the end of this post.

Creating a Related List Widget

1. Go to Zoho CRM > Setup > Developer Hub > Widgets and click Create New Widget.

2. Fill in the required details such as:

1. Name: Zoho WorkDrive
2. Type: Related List 
3. Hosting: Zoho 
4. File Upload: Upload the ZIP created in the dist folder within the widget project directory after packaging in the Step 4. 
5. Index page: /widget.html
   

3. Go to Customization > Modules and Fields > Contacts > Standard > Detail View. Then, create and associate the related list widget. 

Refer to the Customize Related Lists help page for more information on creating a related list.