WhatsApp Cloud API development with Dot Net and Angular

In this blog I will be sharing the journey how to code for WhatsApp cloud API without using any BSP.

Creating Business Portfolio.

• First Step will be creating a Business Portfolio on https://business.facebook.com/ prerequisites is having a Facebook account.

Creating Business App.

• Then go to https://developers.facebook.com → My Apps → Create App.
• Fill out basic information in USE CASES, select Other. Select an app type → Business. In business portfolio select the one we created previously, then click create.
• After this step the App Dashboard will open in that select set up on WhatsApp.
• You will be directed to WhatsApp → Quick Start. Click Start using the API.

• In API setup screen, click Generate access token and select the business portfolio account we created(this token expires too fast at early stage). Meta is providing a Test Number, to test our setup add a TO number. Enter your number and get verified with OTP. Max 5 numbers can be verified.
• In App Settings → Basic you need to provide a Privacy Policy Public URL.
• Click Send Message. A popup will appear at right bottom message sent. If you are at this point, then we are good to go.
• If you want to play a bit then you can create a template from https://business.facebook.com → Manage Template → Create Template.
• After the created template status is approved, you can change the template name in curl request as shown above in the dashboard screen, and send the template.
• The Test Number has various limitation, so add new number (this number should not have a WhatsApp account).
• After adding the new number and payment information(optional), you are all set to send message, templates to any number.

We will talk about the webhook part later.

Code Development

• In my case I have developed this for a CRM and will explain this case.
• Firstly the admin user for a company will be seeing the screen where they can enter PhoneNumberID, BusinessAccountID, Access Token, APP ID, APP Secret, Phone Number ( the one added as new number) and will be storing this in our database.
• NOTE : By creating a system level user and assigning assets to it on https://business.facebook.com → Users → System Users> Generate access Token with whatsapp_business_messaging and whatsapp_business_management permission, you can create a permanent access token.
• You can also check the token expiry by this GET URL : $”https://graph.facebook.com/debug_token?input_token={WhatsAppConfig.AccessToken}&access_token={WhatsAppConfig.AppId}|{WhatsAppConfig.AppSecret}";
• Now we will be directing the user to WhatsApp screen if the token is valid.

Screen showing List of contact (including number & msg from unsaved contact)

• Now we have to develop the API that will provide Contact Name, Number, Last Message, Message Direction and Time of last Message let’s say {GetContactByCompanyId} for our reference.
• The result of this GetContactByCompanyId should be in decreasing order of last message timing.
• Also whenever there is incoming message, it is detected by signalR and the API is hit or can be set, to run on fixed interval. By this you can achieve the most recent message on the top of the list.
• Sending Message and Template (will talk about creating template and approval later)

Sending message payload is divided into three parts : sending normal text, sending template (with or without buttons) and sending image template.

sending message payload

Hit this POST API : var url = $”https://graph.facebook.com/v22.0/{config!.PhoneNumberId}/messages"; with access token.

This will provide messageId as response. You need to store it.

Create Table WhatsAppMessages with columns: CompanyId,SenderPhonenumber,ReceiverPhoneNumber,MessageId, MessageText,MessageType,TemplateName,MessageDirection, CallbackStatus, SendAt, CallbackStatusTime.

While sending message/ template you need to store it.

Receiving Incoming Messages

• Now you need to setup the WebHook on API DashBoard. WebHook → Select Product → Select WhatsApp Business Account. Here we will be providing our endpoint and a token which we will be writing in our code.
• You need to create 2 endpoint with the same URL, let’s say RECEIVE. First One is to Verify whereas Second one is to read incoming msg and message status/read receipt like sent/read/delivered/failed.

First API to verify the endpoint.

• These API should be public, so my recommendation is to use tunneling tool like ngrok while working on local and debugging.
• The second API with same endpoint is shown below.

Receive API to read incoming message and message read receipt

• Now we need to store the incoming message and emit the incoming message via SignalR to frontend, push the message to particular chat.
• Post this, we get the message read receipt, and accordingly the database is updated with the corresponding messageid. Also the same can be pushed using SignalR to frontend. Similarly single, double and blue tick on frontend can be used for sent, delivered and read status.

Building conversation

• Let’s call the click of a contact, pass the contact’s fullnumber and company id, as GetChatHistory API. The API should return message body, template name, Last incoming message time, message direction, sent at, sender phone number and receiver phone number.
• By using these details and template name, you can build the conversation. You can further push the particular template to chat.
• The 24 HRS count down icon. Meta allows to send template to a user if the user replies, then only normal conversation can start.
• Last incoming message time will help to start the timer against a chat. Also if there is a incoming message then from frontend signalR method, we have to update the lastIncomingMessageTime so that the timer again starts from 23:59.

Creating and Approving Template :

• Template can be categorized as Simple one with Header, Body and Footer.
• Button template includes simple template and CTA buttons.
• Image template has a image (not header) and can have Buttons too.

Create / View Template

Payload to pass while creating template

• var metaUrl = $”https://graph.facebook.com/v22.0/{config!.BusinessAccountId}/message_templates"; this API needs to be hit as POST request along with access token.
• Store this into your database for display, edit and pushing into the chat.
• Now I will be talking about creating image template. The image that is uploaded should be uploaded on meta and cloud (in my case s3 for public URL).
• Uploading to meta involves creating session Id and uploading the file. The created session id is passed to the upload API which in turn return a h property. This h property is needed to pass on header_handle of the request during creation of image template.

Uploading image to meta

• Also store s3 url in the database which will be used while sending the template.

Getting List of Template

• $”https://graph.facebook.com/v22.0/{business_account_id}/message_templates"; use this as GET API passing access token. Hence you can get list of template associated with your account.

List of Templates

Sending Template

• Sending template has been explained in sending message section. Keep in mind that the URL to be passed should be public s3 URL.

Updating Template

• Templates with following status Approve, Rejected, or Paused can only be edited.
• Category and Components only can be edited.
• Category of an approved template cannot be edited.
• You can edit a Approved Template,10 times in a 30 day window, or one time in a 24 hour window. Whereas for Rejected or Paused templates, can be done multiple times.
• Approved or paused template, can be automatically be approved unless the template review fails.
• POST API https://graph.facebook.com/v22.0/{template.MetaTemplateId} with access token uses same payload as create template for editing.

Deleting Template

• $”https://graph.facebook.com/v16.0/{config.BusinessAccountId}/message_templates?name={name}"; hitting this as Delete request while passing the token will delete the template.

Template Status

• Initial status is pending for the newly created template, approval doesn’t take much time. You can call GetALLTemplate API on angular with a set interval to handle the status.

Broadcasting Template

• Using the share button open a popup with GetContactByCompanyId API. Select the contacts and send templates to them. The Send Message method can be reused for this.

Finally Done 🎉

Now you have a fully functional WhatsApp for your CRM. Including Creating, Viewing, Updating, Deleting and Broadcasting Templates, Sending and Receiving messages. Happy Coding!!!

References

https://developers.facebook.com/docs/whatsapp/cloud-api/