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.
Info |
---|
For more information refer to the meta documentation. Link |
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.
Configuration
Webhook
In the WhatsApp configuration window, section webhook, add the following:
Callback URL: https://<instance>.ucontactcloud.com/Integra/resources/Whatsapp/webhook
ID verifier: 1nt3gr4!
Webhook fields: subscribe to messages.
Info |
---|
Remember to add the necessary configuration to 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
Info |
---|
Remember to add the necessary configuration to NGINX |
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
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.
Code Block | ||
---|---|---|
| ||
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.
Info |
---|
Json format is accepted WhatsApp/SMS providers format |
List button
List; | Indicates that a Button List message is starting. | ||||
---|---|---|---|---|---|
title |
| ||||
header |
| ||||
body |
| ||||
options |
| ||||
footer |
|
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:
Code Block | ||
---|---|---|
| ||
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:
Code Block | ||
---|---|---|
| ||
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-Bad |
Templates
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.
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
Code Block |
---|
hsm;sample_issue_resolution;en_US;;text-John |
Image
Code Block |
---|
hsm;sample_purchase_feedback;en_US;image;https://desarrollo.ucontactcloud.com/attachments/20230418/66c38ee1-bec9-462b-a844-9baed8eece43.download.png;text-uContact |
NGINX
To receive the messages un uContact is necessary to add the following code snippet to your NGINX configuration.
Code Block |
---|
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; } |
Code Block |
---|
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; } |
Meta platform documentation
Anchor | ||||
---|---|---|---|---|
|
Meta platform:
https://developers.facebook.com/docs/whatsapp/
User registration:
https://developers.facebook.com/docs/development/register
Create an application and add products:
https://developers.facebook.com/docs/development/create-an-app
Add phone number:
https://developers.facebook.com/docs/whatsapp/phone-numbers