Creating interactive messages in WhatsApp April 25, 2024 13:22 Updated Index: Introduction List Message Answer Buttons Introduction This article will show you how to create the JSON file for both types of interactive messages in an easy to understand way, providing an example for each case. To improve the experience of users interacting with Smart Contact, two new message types can be used in the conversational flow as Dynamic Content, without the need for pre-approval of (message templates). The new types are called interactive messages by WhatsApp and can be: List Messages: will allow the selection of an item from a list of up to 10 options. This type of message provides a simpler and more consistent way for users to select an option when interacting with a business. Reply buttons: will allow the selection of up to 3 options in the form of buttons. This type of message provides a faster way for users to make a selection from a menu when interacting with a business. Response buttons have the same user experience as interactive templates with buttons. See more information in the official WhatsApp documentation: click here to access List Message Menu type messaging is natively available in Blip. This means that it is possible to use the component through the builder and have the same experience on the WhatsApp channel. Builder Component: If the payload is not enabled, the option text will be replicated for the ID, removing spaces and special characters. The ID is used by the channel to identify which option has been selected. If you want to customize the ID values and keep them fixed regardless of the option text, you should: "Set payload": should be checked. "Postback mime type": should be configured with the value "text/plain". "Postback value": The provided value will be assigned to the ID. The values must be unique among the payloads and among options that do not have defined payloads. Example of how the component is rendered in WhatsApp: Existing rules for buttons: 1. Title text: Emojis and markdown are supported Maximum length: 1024 characters 2. Button: Title of the button. Fixed value “Menu" Maximum limit: 20 characters 3. List of options: Emojis are supported Markdown is not supported Max size: 10 options It must be unique. Maximum length: 24 characters. Comments: Menu-type components that are converted to List Message will only have 1 section. If any of these rules are not respected, the component's conversion is done to text. To use this component by the builder, it is necessary to enable the Menu setting. In the Channels > Settings tab, enable the converter, as shown in the image below: In addition, it is still possible to use the component through the Dynamic Content message type from the block in the constructor anyway. According to the image below, in field 1, define the application/json value for the dynamic content type, in field 2, define the JSON that will compose the content and confirm the changes through the Save button, button 3. Exemplo de um JSON de Mensagem de Lista: {"recipient_type": "individual","type": "interactive","interactive": {"type": "list","header": {"type": "text","text": "your-header-content"},"body": {"text": "List Body Message"},"action": {"button": "Send","sections": [{"title": "Section 1","rows": [{"id": "ID 1.1","title": "Title 1.1","description": "Description 1.1"},{"id": "ID 1.2","title": "Title 1.2","description": "Description 1.2"}]},{"title": "Section 2","rows": [{"id": "ID 2.1","title": "Title 2.1","description": "Description 2.1"},{"id": "ID 2.2","title": "Title 2.2","description": "Description 2.2"}]}]}}} The example will render as follows: Finally, this is how the parts fit together: Answer Buttons The quick reply message is natively available in Blip. This means that it is possible to use the component through the builder and have the same experience on the WhatsApp channel. Builder Component: If the payload is not enabled, the option text will be replicated for the ID, removing spaces and special characters. The ID is used by the channel to identify which option has been selected. If you want to customize the ID values and keep them fixed regardless of the option text, you should: "Set payload": should be checked. "Postback mime type": should be configured with the value "text/plain". "Postback value": The provided value will be assigned to the ID. The values must be unique among the payloads and among options that do not have defined payloads. Example of how the component is rendered in WhatsApp: Existing rules for buttons: Text: Message content Emojis and markdown are supported Links are supported Maximum length: 1024 characters Buttons: You must have at least 1 button The number of buttons is limited to 3 Text: Empty text is not allowed Must be unique Emojis are supported, but markdown is not Maximum length: 20 characters Comments: If any of these rules are not respected, the component conversion is done to text To use this component by the builder, it is necessary to enable the Quick reply setting. In the Channels > Settings tab, enable the converter, as shown in the image below: In addition, in any case, it is still possible to use the component via the Dynamic Content message type. So in this case, the Reply Button type message would have four different types of headers that you can use: text, document, video, and image. It is recommended to use the JSON's structure below, because with them, the message will be presented in the Blip Desk, as it was sent to the contact. This suitability does not invalidate the way the platform already handled the Reply Button component previously. For all examples in the new format, the expected mime type is: application/vnd.lime.document-select+json Recommended Examples: Json - Text: { "header":{ "type":"application/vnd.lime.media-link+json", "value":{ "type":"", "title":"This is a title send from lime", "text":"This is a subtitle send from lime" } }, "options":[ { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title1", "text":"text1" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title2", "text":"text2" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title3" } } } ]} Json - Image { "header":{ "type":"application/vnd.lime.media-link+json", "value":{ "type":"image/jpeg", "aspectRatio":"1:1", "title":"This is a title send from lime", "text":"This is a subtitle send from lime", "uri":"https://s1.static.brasilescola.uol.com.br/be/conteudo/images/imagem-em-lente-convexa.jpg" } }, "options":[ { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title1" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title2", "text":"identificador_2" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title3" } } } ]} Json - Video { "header":{ "type":"application/vnd.lime.media-link+json", "value":{ "type":"video/mp4", "aspectRatio":"1:1", "title":"This is a title send from lime", "text":"This is a subtitle send from lime", "uri" :"https://edisciplinas.usp.br/pluginfile.php/5196097/mod_resource/content/1/Teste.mp4" } }, "options":[ { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title1" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title2", "text":"identificador_2" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title3" } } } ]} Json - Document: { "header":{ "type":"application/vnd.lime.media-link+json", "value":{ "type":"application/pdf", "aspectRatio":"1:1", "title":"This is a title send from lime", "text":"This is a subtitle send from lime", "uri":"https://blip-community.s3-sa-east-1.amazonaws.com/documento-padrao-blip.pdf" } }, "options":[ { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title1" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title2", "text":"identificador_2" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title3" } } } ]} Even with the recommended flow, there is the flow that uses the original JSON that today is no longer recommended, as explained earlier at the beginning of this topic. For any of the types below, the expected mime type for the component is: application/json Here is an example of a JSON text header reply button: { "recipient_type": "individual", "type": "interactive", "interactive": { "type": "button", "header": { "type": "text", "text": "header text" }, "body": { "text": "Button Body Message" }, "action": { "buttons":[ { "type": "reply", "reply": { "id": "unique-postback-id", "title": "Clique aqui" } }, { "type": "reply", "reply": { "id": "unique-id", "title": "Não clique" } } ] } }} An example of a JSON document header response button: { "recipient_type": "individual", "type": "interactive", "interactive": { "type": "button", "header": { "type": "document", "text": "Boleto", "document": { "link": "https://blip-community.s3-sa-east-1.amazonaws.com/documento-padrao-blip.pdf", "filename": "some-file-name" } }, "body": { "text": "Button Body Message" }, "action": { "buttons": [ { "type": "reply", "reply": { "id": "unique-postback-id", "title": "First" } }, { "type": "reply", "reply": { "id": "unique-id", "title": "Second" } } ] } }} A video header response button JSON example: { "recipient_type": "individual", "type": "interactive", "interactive": { "type": "button", "header": { "type": "video", "text": "video blip", "video": { "link": "http://techslides.com/demos/sample-videos/small.mp4" } }, "body": { "text": "Button Body Message" }, "action": { "buttons": [ { "type": "reply", "reply": { "id": "unique-postback-id", "title": "First" } }, { "type": "reply", "reply": { "id": "unique-id", "title": "Second" } } ] } }} An example of a JSON image header response button: { "recipient_type": "individual", "type": "interactive", "interactive": { "type": "button", "header": { "type": "image", "text": "blip image", "image": { "link": "https://sindinfor.org.br/wp-content/uploads/2020/10/blip-og-image.png" } }, "body": { "text": "Button Body Message" }, "action": { "buttons": [ { "type": "reply", "reply": { "id": "unique-postback-id", "title": "First" } }, { "type": "reply", "reply": { "id": "unique-id", "title": "Second" } } ] } }} Finally, this is how the parts fit together: For more information, visit the discussion on the subject in our community or the videos on our channel. 😃 Related articles How to send WhatsApp notifications through Blip API Builder variables Sending WhatsApp Active Messages on Blip Desk How to create a chatbot with Builder Validating user input