Creating Your Interactive Messages Raphael.xisto August 09, 2022 16:32 Updated Index: Introduction List Message Reply 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 one of up to three 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 The first step is to create a dynamic content type from the block in the builder. According to the image below, in field 1, define the application/json for the dynamic content type, in field 2 define the JSON that will compose the content and confirm the changes through the Save Here is an example of a List Message JSON: { "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" } ] } ] } }} This is how the parts fit together: Reply Buttons Message Quick reply is available natively 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: 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 starts to 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/content/images/image-in-lens-convex.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":"identifier_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.med ia-link+json", "value":{ "title":"Title1" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value" :{ "title":"Title2", "text":"identifier_2" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title3" } } } ]} Json - Document { "header":{ "type":"application/vnd.lime.media-link+json", "value":{ "type":"document /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":"identifier_2" } } }, { "label":{ "type":"application/vnd.lime.media-link+json", "value":{ "title":"Title3" } } } ]} Even with the recommended flow, there is a flow that uses the original JSON, which 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 response 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": "Click here" } }, { "type": "reply", "reply": { "id": "unique-id", "title": "Don't click" } } ] } }} An example of a JSON document header reply 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": " uni que-postback-id", "title": "First" } }, { "type": "reply", "reply": { "id": "unique-id", "title": "Second" } } ] } }} An example video header response button JSON: { "recipient_type": "individual", "type": "interactive", "interactive": { "type": "button", "header" : { "type": "video", "text": "video take", "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" } } ] } }} One example of a JSON image header response button: { "recipient_type": "individual", "type": "interactive", "interactive": { "type": "button", "header": { "type" : "image", "text": "take image", "image": { "link": "https://sindinfor.org.br/wp-content/uploads/2020/10/take-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 Customizing Your Interactive Messages How to configure service hours What is markdown How to send email by the chatbot through Builder
