InteGreat 06: Integrate your Zoho Creator app with Whatsapp using Twilio

InteGreat 06: Integrate your Zoho Creator app with Whatsapp using Twilio

Hi folks,

We're back with a new post in our InteGreat series, and this time we're going to walk you through how to integrate your Zoho Creator application with Whatsapp using Twilio.

Before we dive into this integration, let's quickly cover some basics.


What is Whatsapp? How do businesses leverage it?

WhatsApp Messenger, or simply WhatsApp, is a cross-platform messaging app that lets you make video and voice calls, send text messages, and more.

With the introduction of Whatsapp Business, more businesses are using it as a means to communicate and engage with their customers and leads. They also use it for sending information, such as appointment details, shipping details, and confirming booking requests.


What is Twilio?
Twilio is a communications platform that allows software engineers to build voice and SMS capabilities into applications. Many of our customers integrate their Zoho Creator apps with Twilio to send SMS notifications, such as appointment reminders, transaction details, status updates on orders, and device approvals.

In this post, we'll talk about how to integrate your Creator app with Whatsapp, to communicate relevant information to your customers. That is, whenever a user or a customer submits data in a form, we can trigger a notification to the user, sharing relevant information. We can automate this entire process using Twilio on Creator's form workflow option that's enabled using an API. 


Why use Twilio to integrate a Creator app with Whatsapp?

Whatsapp doesn't provide a direct, end-user API, however, they allow you to host a small service, which in turn talks to Whatsapp servers. But hosting your own server can be challenging in terms of reliability, security, and knowledge, so we're using the cloud-based service option.

Twilio is one of the established messaging service providers that we support integration for. So you can opt to use the Twilio API to act as host to communicate with Whatsapp.

​

Before we do that, though, we need to set a few things to configure the integration.

​

Step 1: Set up a Whatsapp Business account, set up your Facebook Business Manager account, and set up a Twilio account using the same Whatsapp Business account mobile number.

Step 2: After you create the Twilio account, request access to enable the Twilio number for Whatsapp messages, and verify your Facebook Business Manager account.

Step 3: Create an appointment/registration form in your Creator application to collect the mobile numbers and the consent for Whatsapp notifications. 

Now, let's go in-depth into each of these steps:


Step 1: Setting up the accounts

Whatsapp Business account: First, choose the mobile number from which the notification is to be triggered, and use that mobile number to set up Whatsapp Business account.

Facebook Business Manager account: Then, please do set up your Facebook profile to create a Business Manager account, if you already haven't set up one. You can use your Facebook username and password to sign in to Business Manager.

To create a Business Manager account:

  1. Go to business.facebook.com/overview.
  2. Click Create account.
  3. Enter a name for your business, your name, and work email address and click Next.
  4. Enter your business details and click Submit.

Twilio account: Next, do sign up for a Twilio account with the same mobile number with which you've set up the Whatsapp Business account.

Once these initial setups are configured, you can proceed to request access and verification.

Step 2: Request access and verification

Now, WhatsApp uses your Facebook Business Manager account to identify your business and associate your phone number with it.

Twilio provides a sandbox environment, where users can test the API code with a sandbox from the number provided by Twilio, which can used used to test the API. To use your own number for notifications, you need to submit a request to Whatsapp with your business requirement. They need to approve it to trigger Whatsapp messages via the API. Whatsapp doesn't provide a direct, end-user API URL, so we're integrating it on top of the Twilio API and using that in the Creator application.

Please note that WhatsApp has final discretion to approve companies to use the API. You can follow the steps given below to request access and complete the verification process:

1) Twilio: Request access to enable your Twilio numbers for WhatsApp.
2) Twilio: Submit a sender profile and message templates.
3) Facebook: Approve Twilio to send messages on your behalf.
4) Facebook: Verify your Facebook Business Manager account.
5) Twilio: Twilio completes your WhatsApp sender registration.


Step 3: Configuring the code

Once you've completed the verification process and set the Whatsapp account, you can make use of the Twilio API on a Zoho Creator workflow to trigger a Whatsapp message.

For that, let's create a simple appointment or registration form in your Creator app.

Along with the other fields, you need to add the following fields:

  • Phone number type field to collect the mobile number of the customer/user
  • Decision box type field to get consent for Whatsapp notification



Once you've created the form, on On create on success, you need to add the code to trigger the Whatsapp notification based on the value in the Decision box field to send notifications.

Please find the below sample code added with the post URL call to trigger the notification via the Twilio API.

  1. if(input.I_agree_to_receive_whatsapp_notification == true)
  2. {
  3. mp = Map();
  4. mp.put("To","whatsapp:" + input.Mobile_Number);
  5. mp.put("From","whatsapp:+91**********");
  6. mp.put("Body","Your appointment is coming up on" + input.Appointment_Date_Time.todate());
  7. header = Map();
  8. username = zoho.encryption.base64Encode("<TWILIO_ACCOUNT_SID>:<TWILIO_AUTH_TOKEN>");
  9. header.put("Authorization","Basic " + username);
  10. resp = postUrl("https://api.twilio.com/2010-04-01/Accounts/<TWILIO_ACCOUNT_SID>/Messages.json",mp,header);
  11. info resp;
  12. }

Script explanation:

  1. Here, "I_agree_to_receive_whatsapp_notification" is the Decision box field, and we are using the if condition to trigger notifications only to the user who checked this field while submitting data in the form.

  2. Mobile_Number is the phone number field where the user enters their mobile number while submitting the form.

  3. The From in the code part is a static phone number from which the notification will be sent to all users for which the above setup and verifications were done. The business name and the logo as submitted in step 2 for "Submit a sender profile and message template" will reflect on the from part of the Whatsapp message to the customers.

  4. The Body part is the content of the Whatsapp message, where you can have both the static and form field content passed against it. 

  5. The "To" number (dynamic content) and the "body" of the Whatsapp message are the content filled in on the Creator form, and need to be passed to a data map.

  6. Authenticate the API on the Creator end with basic authentication, as below.
    username = zoho.encryption.base64Encode("<TWILIO_ACCOUNT_SID>:<TWILIO_AUTH_TOKEN>");
    header.put("Authorization","Basic " + username);
     

    The account SID (string identifier) and Authtoken will be available in the settings option under Twilio account, as in the screenshot given above.

    Note: A string identifier (SID) is a unique key that's used to identify specific resources. Here, the account SID is used to identify the Twilio account from which the API is triggered.

  7. Construct the Twilio Whatsapp API call in the below format:

    postUrl("https://api.twilio.com/2010-04-01/Accounts/<TWILIO_ACCOUNT_SID>/Messages.json",mp,header);

    Here, both the header map (header) and the data map (mp) are passed as arguments for the POST URL call to authenticate and trigger the Whatsapp message via API. 



    8. Please don't forget that WhatsApp requires that your application implement explicit user opt-ins to deliver messages over WhatsApp on the mobile number provided, while submitting the data on the Creator form and triggering the notification only for consenting users. Whatsapp also recommends that business owners track and save these details for future reference.

    Please note that sending messages to end users without an opt-in may result in users blocking your business, as well as the suspension of your WhatsApp Business account.
We hope this tip was useful to you! If there are any questions, feel free to ask in the comments below, and we'll be happy to address them for you!