Thumbnail
Support Inbox | Integration with Zoho CRM

Hi there!

Would you like to see your customer details from Zoho CRM in your Support Inbox?

In this tutorial, you will learn how to integrate Zoho CRM contact details with remarks in the Support Inbox. This integration allows you to automatically match Zoho CRM with your WhatsApp conversations. Also, when you edit remarks in the Inbox, it syncs back with Zoho CRM.

logo_zoho_crm_ct2x

You will need

  • Your activated Support Inbox account
  • An Assistant set up for your Support Inbox account by tyntec (contact tyntec support if you don't have it)
  • Your Support Inbox API key provided by tyntec (contact tyntec support if you don't have it)
  • The Custom webhook event set up to trigger on Closing of conversations in Support Inbox (contact tyntec support for setup)
  • A phone with WhatsApp as a testing customer
  • A Zoho enterprise account with the Admin role and your Zoho CRM API key
  • A Contact in Zoho CRM with the phone number of your testing customer
  • An ngrok account with the binary installed and authorized
  • Node.js installed and your favorite text editor or IDE with JavaScript
  • Postman

Step One: Get your integration app ready

For your quick start with integrations, we’ve prepared a sample integration app. Let’s have a look at what the code does. You can notice that the code is in several files:

  • app.js listens for webhooks and ties logic together.
  • config.js gets environment variables.
  • In the vendors folder:
    • cmd.js handles requests to the Support Inbox API.
    • zoho.js handles calls to Zoho Deluge functions.

 

1.Clone the api-sample repository and go to the chat-integrations/zohocrm directory.

2. Install dependencies (and the nodemon module if you don’t have it yet):

npm install 
npm install nodemon

3. Afterwards, you need to create a publicly accessible URL using ngrok. Launch ngrok with the local port 3000 using the following command:

path/to/ngrok http 3000

4. Copy the displayed public URL (such as https://d58d59e32a3a.ngrok.io).

Note: This setup is suitable only for development. For production use, you have to deploy your app properly!

Step Two: Subscribe your webhooks in your Inbox

Let the Inbox know where to deliver relevant events. You’re going to subscribe two webhooks via API calls in Postman.

1. From the chat-integrations directory, import the CMD.postman_collection.json into Postman.

2. Open the Set Webhook request and change the URL in body to the /open endpoint on your server (for example  https://d58d59e32a3a.ngrok.io/open). This request will subscribe your URL to incoming message events.

Postman Open

3. Hit the Send button. You should receive a 204 status in the response if everything was okay.

4. Now it's time to set up the second webhook! Open the Set Webhook request and change the URL in body to the /close endpoint on your server (for example  https://d58d59e32a3a.ngrok.io/open) and the events to custom. This request will subscribe your URL to the custom event. This custom event triggers when you close a conversation. Click the Send button.

Close

5. You should receive a 204 response status if everything was okay.

And your webhooks are set up!

Step Three: Configure Zoho CRM

You need to set up two functions in Zoho CRM. The first Get function fetches contact data based on a phone number. The second CRM function updates contact data with given values.

Prepare a Get function

You are going to set up the first of the two CRM functions.

1. Start by logging into your Zoho Account and go to your CRM.

2. Now you can grab your Organisation URL. Go to your contacts, open your test contact, and copy the URL address without the last number. It should look like this:
https://crm.zoho.eu/crm/orgXXXXXXX/tab/Contacts/

3. Note the URL and go to Settings. Click on Functions.

Settings

 

4. Now you will create your functions. Let's start with the Get function. Click the + New Function button.

5. In the following pop-up, fill the function name, display name, description, and select Category Automation. Then click Next.

New function

 

6. This open custom function editor, where you will create your function. The get function needs a custom parameter phonenumber. Start by clicking on Edit Arguments. In parameter name type phonenumber and select Type to string. Save the changes by pressing Save.

 

New parameter

 

7. With your parameter set, your next step is to create the Get function. It is written in the Deluge pseudo-code. You can just copy the following code:

//creates headers
header_data = Map();
header_data.put("Content-Type","application/json");
//creates search criteria and finds contact based on phone number
criteria = "(Phone:equals:" + phonenumber + ")";
contact = zoho.crm.searchRecords("Contacts",criteria).toText();
//Sends POST request back to url
response = invokeurl
[
	url:"https://YOUR_NGROK_URL_ADDRESS/remarks"
	type:POST
	parameters:contact
	headers:header_data
];
//shows response
info response;

Change the YOUR_NGROK_URL_ADDRESS to your ngrok address from Step One.

8. Now you have your function ready. Press Save.

Get function

 

9. The last thing to set up this function is to create access to it. Hover over the function, click on the three dots, and select REST API.

REST GET Function

 

10. After selecting the REST API, the settings pop up will appear. Select API KEY, and copy the given URL. Close the pop up with a clicking Save.

API URL

 

11. This was the last step to set up your Get function. Congratulations!

Prepare an Update function

Don't leave the function settings yet. Now you will set up the Update function.

1. Create a new function by clicking the + New Function button.

2. In the given pop-up, fill the function name, display name, description, and select Category Automation. Then click Next.

New Function 2
 

3. After clicking Next, the Deluge function editor opens. As in the previous step, you will start by creating custom parameters. Click on Edit Arguments.  In parameter name type phonenumber and select Type to string. Then, click on Add and create arguments: email, city, and country. All of these will have the Type string. Follow with clicking Save.

2nd Arguments

 

4. With your arguments set up, you can add the Deluge code. Copy the following code:

criteria = "(Phone:equals:" + phonenumber + ")";
contact = Map();
contact = zoho.crm.searchRecords("Contacts",criteria);
id = contact.get(0).get("id");
//update Lead info if you want to change which values are updated.
leadinfo={"Email":email,"Mailing_City":city,"Mailing_Country":country};
response = zoho.crm.updateRecord("Contacts",id,leadinfo);
info response;

5. Your function is now ready. Click on Save to save it.

6. The last thing you need to do is to create outside access to this function. Hover over it, click on three dots, and select REST API.

RRest

 

7. In the REST API pop-up, select the API KEY. Copy the URL and press Save.

REST  Update Function

 

8. Congratulations, your 2nd function is ready for work.

The only thing missing now is to configure your app.

Step Four: Configure and run your app

The last thing to: configure and run your app.

  1. Let's start with environment variables. Copy the file .env-example to .env and set the environment variables in .env:
  • CMD_API_KEY  – your Support Inbox API key
  • ZOHO_GET_FUNCTION_URL  – the link to your Zoho Get function
  • ZOHO_UPDATE_FUNCTION_URL  – the link to your Zoho Update function
  • ZOHO_ORG_URL  – the link to your Zoho CRM contacts
  • WABA_NUMBER  – your WhatsApp Business number
  1. From the cmd-integrations directory, import the CMD.postman_collection.json into Postman.
  2. Authorize Postman with your CMD API key and your WABA number.
    Right-click the collection and select Edit. Then go to Variables and set the apiKey variable to your CMD API key. Set also the wabaNumber variable to your WABA number.
  3. Start your app in another terminal:
nodemon app.js

Everything is up and running. Good job!

Step Five: Try it out!

Now you can test all the functionalities.

1. Grab your phone and send some warm WhatsApp message to your WhatsApp Business Account number.

2. Let's check the details from Zoho CRM. Go to your Support Inbox and open the conversation with your testing customer.

3. On the right side, you will see information from your Zoho Contact

Contact

 

4. If you click More (...), you can select the option to edit those remarks. Click on Edit Contact. Change the country to any country you want. Contact details are parsed by line, so keep line breaks and the order of the details. Continue by pressing Save.

Edit

 

5. To sync those changes with your Zoho CRM, press Close. This closes your conversation and sends an update via your second webhook.

Close

6. Now you just need to check your Contact in Zoho CRM to see how the details changed. You can either go to your Zoho and find the contact manually. Or you can click on the Link to Zoho in Notes to get directly to the contact.

 

Voilà! Your integration is ready. Give yourself a pat on the back.

More?

If you are using a premium plan of Zoho Desk, you can use its Webhook functionality to get automatically notified about new tickets in Contact notes of the CMD. You can find inspiration in our tutorial Integration with Shopify & Zendesk. You will need to:

  • require a Phone number in all your tickets (to successfully pair it within CMD)
  • add a new POST route in app.js to handle your incoming tickets
  • copy and modify the addLinkNote() function in cmd.js to send the ticket in its body