Creating Your Interactive Messages Victoria Alves May 23, 2022 18:19 Updated Introduction List Messages 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 by giving you 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 prior approval of message templates. The new types are called interactive messages by WhatsApp and can be: List Messages: will allow you to select 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 company. Answer buttons: selection selection from 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 company. Response buttons have the same user experience as interactive button templates. See more information in the official WhatsApp documentation: click here to access Before each one of the examples below, you will need to follow these next two steps: First step is to create a dynamic content through any block in builder. Remember to set the type of the dynamic content to application/json. Now all that's left is to write the JSON on your dynamic content's value field! List Messages 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 The Reply Button type message has four different types of headers you can use: text, document, video, image. Here is an example of a Text Header Reply Button JSON: { "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 Document Header Reply Button JSON: { "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" } } ] } } } An example of a Video Header Reply 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" } } ] } } } An example of an Image Header Reply Button JSON: { "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" } } ] } } } This is how the parts fit together: For customizing your interactive messages Related articles Customizing Your Interactive Messages How to configure service hours How to send email by the chatbot through Builder What is markdown
