WhatsApp messaging allows to create templates with footer buttons. This provides an easier and faster way for the WhatsApp end user to reply to a message.
Quick Reply buttons provide a one tap reply option to the end user making it extremely easy for consumers to send feedback to the enterprise for questions with short answers like accept, ok, cancel options requests.
Calls To Action buttons provides a one tap reply option to the end user to proceed with an action that could be start a mobile call or navigate up to two URLs.
Also, it is possible to build a template that provides the consumer a combination of both types of buttons, making it very easy and convenient for the user and powering the enterprise functionality.
This document provides information how to create a SCG-WhatsApp templates with buttons using SCG APIs. We will provide curl examples on how to create an SCG WhatsApp template using the available buttons components.
SCG-WhatsApp supported footer buttons
Syniverse SCG-WhatsApp templates support a mixture of up to 10 buttons total. However, there are rules that limit the number of buttons by type and the permitted combinations.
The template buttons are defined in a single array that must include single button components. If the use case requires more than three buttons, only two of the buttons are displayed in the message and an additional option "See all options" is displayed as a third option that when tapped displays the remaining buttons.
Phone number button
This is a Call-to-Action button that enables the consumer to call the configured phone number.
Only one phone number button can be configured in a template.
The button label can be up to 25 characters.
Example:
{
"type": "PHONE_NUMBER",
"text": "Call Us Now",
"phone_number": "+1506617XXXX"
}
URL button
This is a Call-to-Action button that enables the consumer to navigate to the website configured for the button.
A template can have up to two URL buttons.
Optionally a URL button can have a variable (dynamic URLs)
The button label can be up to 25 characters.
Example: with fixed URL
{
"type": "URL",
"text": "Visit Our Site",
"url": "https://www.Syniverse.com/"
}
Example: dynamic URL (with variable)
{
"type": "URL",
"text": "Buy now",
"url": "https://www.SyniverseStore.com/cart?item={{1}}",
"example": [
"SN1234567"
]
}
Quick Reply (QR) button
This allows the consumer to reply with the template defined buttons text. This is very convenient for use cases that needs consumer confirmation or short answers. For example: a transaction confirmation or recognition or opting out to marketing messages.
The maximum number of Quick Reply buttons is 10 and if combined with other buttons must be organized in two groups: QR group and Other group.
QR, QR and URL, Phone
URL, Phone and QR, QR
Example:
{
"type": "QUICK_REPLY",
"text": "Cancel"
}
When the consumer taps the button the "text" is sent to the enterprise as a MO WhatsApp message.
Example 1: Template with 10 Quick Reply buttons
WhatsApp template Quick Reply buttons allow the user to create up to 10 quick reply buttons in a template.
The cURL command to create a template with 10 Quick Reply buttons:
curl -X POST 'https://api.syniverse.com/scg-external-api/api/v1/messaging/external_message_templates/{WABA}' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer {SCG token}' \
--data '{
"language": "en_US",
"name": "da_test_098",
"category": "MARKETING",
"components": [
{
"type": "HEADER",
"format": "TEXT",
"text": "Quick reply message"
},
{
"text": "Hi {{1}}, please send a quick reply. ",
"type": "BODY",
"example": {
"body_text": [
[
"Manuel"
]
]
}
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "QUICK_REPLY",
"text": "Quick reply 1"
},
{
"type": "QUICK_REPLY",
"text": "Quick reply 2"
},
{
"type": "QUICK_REPLY",
"text": "Quick reply 3"
},
{
"type": "QUICK_REPLY",
"text": "Quick reply 4"
},
{
"type": "QUICK_REPLY",
"text": "Quick reply 5"
},
{
"type": "QUICK_REPLY",
"text": "Quick reply 6"
},
{
"type": "QUICK_REPLY",
"text": "Quick reply 7"
},
{
"type": "QUICK_REPLY",
"text": "Quick reply 8"
},
{
"type": "QUICK_REPLY",
"text": "Quick reply 9"
},
{
"type": "QUICK_REPLY",
"text": "Quick reply 10"
}
]
}
]
}'
To send a message using the above template use the cURL command:
curl -X POST 'https://api.syniverse.com/scg-external-api/api/v1/messaging/message_requests' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer {SCG token}' \
--data '{
"from": "sender_id:Wxx4k6a0EM5sdBF7XXXXXX",
"to": ["wa:+5066173XXXX"],
"body": "#parse(\"whatsapp:ns=278ca2e2_72ad_4540_8a96_8569b3XXXXXX:name=da_test_098:lang=en_US\")#set(Manuel)",
"message_type":"WHATSAPP"
}'
This message appears as follows:
When See all options is tapped by the mobile user, the WhatsApp shows all the Quick Reply options:
Example 2: Call to Action button
WhatsApp template Call to Action button allows the user to create up to 1 phone number button and 2 URL buttons in a template.
The cURL command to create the described template:
curl -X POST 'https://api.syniverse.com/scg-external-api/api/v1/messaging/external_message_templates/{WABA}' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer {token}' \
--data '{
"language": "en_US",
"name": "da_test_101",
"category": "MARKETING",
"components": [
{
"text": "Hi {{1}}, this is a call to action WA message",
"type": "BODY",
"example": {
"body_text": [
[
"Manuel"
]
]
}
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "PHONE_NUMBER",
"text": "call us",
"phone_number": "+5066173XXXX"
},
{
"type": "URL",
"text": "our web",
"url": "https://www.syniverse.com/"
},
{
"type": "URL",
"text": "Go to KB article",
"url": "https://sdcsupport.syniverse.com/hc/en-us/sections/{{1}}",
"example": [
"206397707-General-Knowledge-base"
]
}
]
}
]
}'
To send a message with this template use the below cURL command:
curl -X POST 'https://api.syniverse.com/scg-external-api/api/v1/messaging/messages' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer {SCG token}' \
--data '{
"from": "sender_id:Wxx4k6a0EM5sdBF7XXXXXX",
"to": "wa:+5066173XXXX",
"body": "#parse(\"whatsapp:ns=278ca2e2_72ad_4540_8a96_8569b3XXXXXX:name=da_test_101:lang=en_US\")#set(Manuel)#set($url_button=206397707-General-Knowledge-base;$index=2)",
"message_type":"WHATSAPP"
}'
Note: This template has multiple buttons, for this reason it is required to add the INDEX parameter next to the URL variable value indicating the related button, ($index=2) for the third button.
This message appears as follows:
Example 3: Quick Reply and Call to Action buttons (CTA)
WhatsApp templates can have both types of buttons. Up to 10 buttons can be defined in a template. For example: we can create a template with 7 Quick Reply, 1 Call Phone and 2 URL buttons.
The cURL command to create a template with 1 Call to action and 2 URL buttons:
curl -X POST 'https://api.syniverse.com/scg-external-api/api/v1/messaging/external_message_templates/{WABA}' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer {SCG token}' \
--data '{
"language": "en_US",
"name": "da_test_106",
"category": "MARKETING",
"components": [
{
"text": "Hi {{1}}, this is a QR and call to action WA message",
"type": "BODY",
"example": {
"body_text": [
[
"Manuel"
]
]
}
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "QUICK_REPLY",
"text": "reject"
},
{
"type": "QUICK_REPLY",
"text": "reject all"
},
{
"type": "QUICK_REPLY",
"text": "accept"
},
{
"type": "QUICK_REPLY",
"text": "accept all"
},
{
"type": "QUICK_REPLY",
"text": "call me later"
},
{
"type": "QUICK_REPLY",
"text": "contact me later"
},
{
"type": "QUICK_REPLY",
"text": "I'\''ll call later"
},
{
"type": "PHONE_NUMBER",
"text": "call us",
"phone_number": "+5066173XXXX"
},
{
"type": "URL",
"text": "our web",
"url": "https://www.syniverse.com/"
},
{
"type": "URL",
"text": "Go to KB article",
"url": "https://sdcsupport.syniverse.com/hc/en-us/sections/{{1}}",
"example": [
"206397707-General-Knowledge-base"
]
}
]
}
]
}'
Once the template is approved by Meta, you could be able to send messages with it.
To send messages with the above template use the cURL command:
curl --location 'https://api.syniverse.com/scg-external-api/api/v1/messaging/messages' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer {SCG token}' \
--data '{
"from": "sender_id:Wxx4k6a0EM5sdBF7XXXXXX",
"to": "wa:+5066173XXXX",
"body": "#parse(\"whatsapp:ns=278ca2e2_72ad_4540_8a96_8569b3XXXXXX:name=da_test_106:lang=en_US\")#set(Manuel)#set($url_button=206397707-General-Knowledge-base;$index=9)",
"message_type":"WHATSAPP"
}'
The message appears as follows:
When See all options is tapped by the mobile user, the WhatsApp shows all the buttons.
0 Comments