Whatsapp icon integrated with an authentication API, showcased on a green square.

Channel | WhatsApp Business

With more than 2 billion people using WhatsApp around the world to send 60 billion messages every day, the chat app has revolutionized the way we communicate. With an enterprise-grade API, companies can now send notifications and provide customer service through WhatsApp in a secure, reliable, and customer-friendly way.

WhatsApp Business API | Integration with Freshdesk

logo_freshdesk_ct2x

Hi there!

Would you like to notify your customers via WhatsApp and respond to their questions in your Freshdesk account?

In this tutorial, you will learn to integrate WhatsApp conversations with Freshdesk tickets. This integration will allow your system to trigger the sending of a WhatsApp notification, open a ticket for it in Freshdesk, and allow your agents to respond to customers from Freshdesk directly by adding Public Notes to the ticket.

You will need

 

 

 

    • A Freshdesk account with the Agent role

 

    • yarn and your favorite text editor or IDE with TypeScript highlighting

 

 

 

Step One: Get your integration app ready

For your quick start with integrations, we have prepared a sample integration app. Look at what the code does. The app contains a webhook module. Notice the code in the src/webhooks directory:

  • webhooks.controller.ts handles the webhooks callbacks.
  • webhooks.service.ts handles the API calls to tyntec and Freshdesk.

Let’s quickly get your app running in the development style:

1. Clone the api-samples repository and go to the wa-integrations/freshdesk folder.

2. Install dependencies:

 

yarn install

3. Copy the file .env-example to .env and set environment variables in .env:

  • WABA_NUMBER — your WABA number in the international format without the leading +/00
  • TYNTEC_API_KEY — your API key from tyntec
  • FRESHDESK_API_KEY — your API key from Freshdesk
  • FRESHDESK_DOMAIN — yourcompany.freshdesk.com
  • REQUESTER_EMAIL — the email of the requester for these tickets

4. Run ngrok in a terminal:

ngrok http 3000

5. And finally, start the app in another terminal:

yarn start

You now have all the API endpoints in your app ready and running!

Step Two: Subscribe your webhook in tyntec

Let tyntec know where to deliver WhatsApp messages from customers. You are going to subscribe the webhook to tyntec via an API call in Postman.

1. Download our Postman collection, unpack and import it in Postman.

2. Right-click the collection and select Edit.

3. Go to Variables and set the apikey value to your tyntec API key.

4. Go back to your collection, and in the folder Application Management open the patch Update default application (see the reference for details).

5. Edit the Body to update the callbackUrl with your webhook for the MoMessage event. The request body should look like this:

{
  "webhooks": [{
    "events": [
      "MoMessage"
    ],
    "callbackUrl": "https://<YOUR_SERVER>/webhooks/receiveResponse"
  }]
}

6. Now hit Send, and you should get the 204 status if everything is okay.

010 postman tyntec 2

Cool! Now tyntec knows where to deliver WhatsApp messages from your customers.

Step Three: Subscribe your webhook to Freshdesk

Let Freshdesk know where to forward Public Notes from tickets. You are going to set an automation rule as follows (or see Using webhooks in automation rules for details):

 

  1. Go to Freshdesk > Admin > [Helpdesk Productivity] Automations, switch to Ticket Updates, and click the button New rule.
  2. Define the rule.
  • Name the rule, for example: Send Public Note as WA message
  • When an action performed by… Agent: Any (leave empty)
  • Involves any of these events… Note is added — Public note
  • Perform these actions: Trigger webhook
  • Request type: POST
  • URL such as: https://<YOUR_SERVER>/webhooks/sendResponse
  • Encoding: JSON
  • Content: Simple and add properties: Ticket ID, Last Public Comment, and Contact Phone.

3. Hit the button Preview and save.

Note: The trigger will fire only if an Agent role account adds the Note

Congrats! Now Freshdesk knows where to forward new Public Notes.

Step Four: Try it out!

Guess what, it is testing time!

Let’s simulate the trigger from your system to send an initial notification to your testing customer.

 

1. Create a new collection in Postman and add a new request:

 

POST https://<YOUR_SERVER>/webhooks/initConversation
{
  "customerPhone": "123456789",
  "customerName": "John Doe",
  "templateParams": ["April 1", "2 PM"]
}

In Freshdesk, you need the name and phone number to create a new contact along with a ticket. The sample app uses the phone number and template parameters to send a template message to WhatsApp. In our case, we are using a template that notifies the customer of an appointment, which takes two parameters (date and time)

Hit the Send button. You should get the 201 status if everything is okay

2. Now login to your Freshdesk under the Agent account, and voila! You have a new ticket

Freshdesk new ticket

3. Check your testing customer WhatsApp – you should also have the notification there. Respond to it.

Respond in WhatsApp

And the response is added to your ticket

And you see customer response!

4. Now reply to your customer as the agent (add a note and set it to Public).

Set public response and see the magic.

And watch the reply arrive in the customer’s WhatsApp!

And response appears!

More?

If you want to use a different template to notify the customer, you need to update the function sendWhatsAppTemplate() in webhooks.service.ts and the number of parameters accepted by the template in dto\initConversation.dto.ts.

Also, subscribe the webhook to tyntec in the system to trigger the notifications automatically.

Tip: Freshworks provide further integrations as part of their services. For example, you may install Freshdesk in Freshsales to allow your salespeople to see the tickets from Freshdesk!