WhatsApp Business
WhatsApp Business API enables businesses to communicate with their customers through WhatsApp. It allows businesses to send messages, receive messages, and automate certain aspects of customer communication.
Content
- 1.1 Business Account
- 1.2 Verify Your Business on Meta
- 1.3 Type of Messages
- 1.3.1 Location
- 1.3.2 Interactive Messages
- 1.3.2.1 List button
- 1.3.2.2 Buttons Reply
- 1.3.3 Templates
- 1.4 NGINX
- 2 Configuración de la aplicación en Meta.
- 2.1 Log In
- 2.2 Home
- 2.3 Create application
- 2.4 Configure products
- 2.4.1 WhatsApp
- 2.4.2 Webhooks
- 2.4.3 Log in with Facebook
- 2.5 Meta platform documentation
Business Account
Before we start with the configuration of the provider, we need a few things:
Meta account member of a company with a business account.
Application created on Meta portal.
WhatsApp, Webhook, Log in with Facebook added as product to the application.
Permission to edit the API configuration.
Mobile number verified.
The steps to configure the application in Meta are at the bottom of the page.
Verify Your Business on Meta
To obtain official business verification on Meta, you can visit the following link where you'll find a detailed step-by-step guide on how to get this verification to gain greater trust from your customers.
Provider
Log into uContact with a user with permissions to create SMS providers.
Then we go to Administrator → Providers → SMS
We select WhatsApp from the list of providers and complete the fields:
Name
To identify the provider
Username
Application ID
Password
Secret identifier
SMS From
Phone Number ID
Account Id
This number corresponds to the Whatsapp Business account id. This field is only required to synchronize templates.
Messages per second: Limit of messages that will be sent by this provider per second.
Messages per second If it is 0, it does not limit the number of messages that can be sent per second.
Activate with Facebook, you need to login with the Meta account administrator of the application. Accept the permission requested and we are all set.
Campaign
Select a WhatsApp provider.
Put the Phone Number ID in the port field.
Rember to add members to the campaign.
Type of Messages
Besides the common types of messages such as text and media, WhatsApp Business provides interactive messages, templates and location.
Location
Location message let business send precise locations on maps.
Location:-34.92403016332158,-56.158280428772684:Shopping Punta Carretas:Montevideo, Uruguay
Interactive Messages
Interactive messages give users an easier way to find and select what they want from your business on WhatsApp. During testing, chatbots using interactive messaging features achieved a significant increase in response rates and conversions compared to text-based bots.
Json format is accepted WhatsApp/SMS providers format
List button
List; | Indicates that a Button List message is starting. |
|---|---|
title | Text Title of the List showed at the top. |
header | text Text showed on the button of the menu. |
body | text Text showed on the body of the message. |
options | text Options of the menu. |
footer | text Text showed on the footer of the message. |
Messages that include a menu with a maximum of 10 options. This type of message gives users a simpler and more consistent way to make a selection when interacting with a company.
Example:
List;
title: uContact Support
header:Menu
body: How can we help you? select one of the options.
1-Telephony
2-SMS
3-WhatsApp
4-Email
5-Webchat
6-Facebook
7-Menssager
8-Other
footer:Support service is available between 9am to 6pm
Buttons Reply
Messages that include a maximum of three options, each of which is a button. This type of message gives users a faster way to make a selection on a menu when interacting with a business. Answer buttons have the same user experience as interactive templates with buttons.
Example:
Buttons;
body;Please rate your experience with uContact
header;image;https://mma.prnewswire.com/media/1098841/Net2Phone_Logo.jpg?p=facebook
1-Very good
2-Good
3-BadTemplates
Message templates allow you to deliver a richer conversation experience than standard text messages by integrating buttons, images, lists, and other elements along with text in a single message. Templates can be used for many purposes, such as displaying product information, asking the recipient of the message to choose from a predetermined set of options, or displaying search results.
Use synchronised templates in uContact:
Templates on canned response
To create, modify or delete the templates it is necessary to enter the meta portal as application administration: https://business.facebook.com. In the menu located in the upper left corner, access account tools and click on message templates.
Template properties are separated by semicolons.
hsm: Indicates that the following message is of type template.
Name: The name with which the template was registered in the meta portal.
Language: The language with which the template was registered.
Type: Defines the type of the template header, the available ones are text, image, video, location, document.
Variable header: plain text if the type is text, or URL of the attachment if the type is not text.
Variable body
Variable-type: type can be text, date_time, currency.
Variable in buttons
Variable-type: Type can be text, payload.
hsm, Name, Language, Type is required.
*In the event that the template does not have one of the properties, it must be left empty separated by semicolons.
Examples:
Text
hsm;sample_issue_resolution;en_US;;text-JohnImage
hsm;sample_purchase_feedback;en_US;image;https://desarrollo.ucontactcloud.com/attachments/20230418/66c38ee1-bec9-462b-a844-9baed8eece43.download.png;text-uContactNGINX
To receive the messages un uContact is necessary to add the following code snippet to your NGINX configuration.
location /Integra/resources/Whatsapp/ {
proxy_pass http://localhost:8085;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /Integra/resources/WhatsappAuth/ {
proxy_pass http://localhost:8085;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
Configuración de la aplicación en Meta.
For WhatsApp Business, you must have a Facebook account and register as a Meta developer.
If you don't have a Meta developer account, you can create one using the following link:
https://developers.facebook.com/async/registration
Log In
Home
On the following screen we select my apps.
Create application
Configure products
On the next screen, select the products you need to configure to use the app. These are WhatsApp, Webhooks, and Facebook Login for Business.
Below, we'll explain how to configure each product.
On this screen, we can add numbers, payment methods, etc.
For this product, we need a business portfolio. On the next screen, select one and click Continue.
Webhooks
On the next screen, select your WhatsApp Business Account and click Subscribe to an item.
This will open a modal where we must complete the webhook URL and its verification token.
v6:
https://<instance>.ucontactcloud.com/Integra/resources/Whatsapp/webhookToken: 1nt3gr4!
Fields: subscribe to messages.
Recuerde agregar la configuración necesaria a NGINX
Log in with Facebook
In the Log in with Facebook window, section configuration, add the following in the valid redirect URI for OAuth field:
https://<instance>.ucontactcloud.com/Integra/resources/WhatsappAuth/oauth
Remember to add the necessary configuration to NGINX
Meta platform documentation
Meta platform:
User registration:
Create an application and add products:
Add phone number: