Support Inbox | Integration with Zoho CRM

logo_zoho_crm_ct2x

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.

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 account
  • 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:

 

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 to 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 the 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 Subscribe URL

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

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

And your webhooks are set up!

Step Three: Register a Zoho CRM app

Before your application makes any calls using the Zoho CRM APIs, you need to register your application with Zoho CRM.

1. Log into Zoho API Console.

2. Choose the Server-based Applications client type.

3. Fill in the client name and homepage URL. In Authorized Redirect URIs, fill in the /oauth/redirect endpoint on your server (for example  https://d58d59e32a3a.ngrok.io/oauth/redirect). Then click CREATE.

4. Copy the displayed client ID and client secret values.

Congratulations, you have successfully registered your application. Using the client ID and client secret, you can now use Zoho CRM API.

Step Four: Configure and run your app

Now, you will 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_CLIENT_ID – your client ID from the Zoho API Console
  • ZOHO_CLIENT_SECRET – your client secret from the Zoho API Console
  • ZOHO_ORG_URL  – the link to your Zoho CRM contacts
  • WABA_NUMBER  – your WhatsApp Business number

2. Start your app in another terminal:

nodemon app.js

Everything is up and running. Good job!

Step Five: Authenticate your app in Zoho

1. Visit the public URL from ngrok inside your web browser. The application automatically redirects you to the Zoho Login page. 

2. Log into your Zoho account.

3. Grant access to the sample app.

Now, your app is ready to accept webhooks from Support Inbox and read and update contacts in Zoho CRM.

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. Look at the right side, you will see information from your Zoho 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.

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

Close your conversation

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